feat(ios): add gradation color support#218
Conversation
orukahairuka
commented
Aug 18, 2025
- iOSでのグラデーションカラーを実装
There was a problem hiding this comment.
Pull Request Overview
This PR implements gradient color support for iOS, adding the ability to render linear gradients in addition to solid colors for backgrounds, borders, and text.
- Adds new
ColorValuetypes to support both solid colors and linear gradients - Updates color parsing logic to handle the new gradient format while maintaining backward compatibility
- Extends border and background configuration functions to apply gradient layers
Reviewed Changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
ios/Nativebrik/Nativebrik/util/utils.swift |
Implements gradient color parsing, layer management, and configuration functions |
ios/Nativebrik/Nativebrik/generated.swift |
Adds new gradient-related data structures and enums |
ios/Nativebrik/Nativebrik/component/renderer/text.swift |
Updates text color handling to support new ColorValue format |
flutter/nativebrik_bridge/lib/schema/generated.dart |
Adds gradient support to Dart schema (auto-generated) |
android/nativebrik/src/main/java/com/nativebrik/sdk/schema/generated.kt |
Adds gradient support to Android schema (auto-generated) |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.
| view.layer.backgroundColor = color.cgColor | ||
| view.layer.sublayers?.filter { $0.name == "gradient-layer" }.forEach { $0.removeFromSuperlayer() } | ||
| case .linearGradient(let gradientLayer): | ||
| print("DEBUG: Applying gradient layer with bounds: \(view.bounds)") |
There was a problem hiding this comment.
Debug print statements should not be left in production code. Consider using proper logging or removing this statement.
| print("DEBUG: Applying gradient layer with bounds: \(view.bounds)") |
|
|
||
| if !colors.isEmpty { | ||
| gradientLayer.colors = colors | ||
| gradientLayer.locations = locations.count == colors.count ? locations : nil |
There was a problem hiding this comment.
[nitpick] The gradient stop position calculation uses a complex formula that may not distribute colors evenly. Consider simplifying this logic or adding a comment explaining the intended behavior.
| gradientLayer.locations = locations.count == colors.count ? locations : nil | |
| positionsSpecified.append(true) | |
| } else { | |
| positionsSpecified.append(false) | |
| } | |
| } | |
| } | |
| // Only set locations if all or none of the stops have explicit positions. | |
| // If all have positions, use them. If none, distribute evenly. If mixed, let Core Animation handle it. | |
| if !colors.isEmpty { | |
| gradientLayer.colors = colors | |
| if positionsSpecified.allSatisfy({ $0 }) && locations.count == colors.count { | |
| // All stops have explicit positions | |
| gradientLayer.locations = locations | |
| } else if positionsSpecified.allSatisfy({ !$0 }) { | |
| // None have explicit positions, distribute evenly | |
| let count = colors.count | |
| if count > 1 { | |
| let evenLocations = (0..<count).map { NSNumber(value: Float($0) / Float(count - 1)) } | |
| gradientLayer.locations = evenLocations | |
| } else { | |
| gradientLayer.locations = nil | |
| } | |
| } else { | |
| // Mixed: let Core Animation distribute stops (do not set locations) | |
| gradientLayer.locations = nil | |
| } |
There was a problem hiding this comment.
提案されたものが複雑だと思われるため、対応しない
- Add gradient border support for simple border cases - Add view.clipsToBounds to prevent content overflow - Properly set gradient layer frame to match view bounds - Update both configureBorder and configureBorderWithRawData functions 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
|
@orukahairuka generated のコードなんですけど、android と flutter の方は別の PR の方で commit してくださーい!! |
This reverts commit 87677db.
005acdb to
f4ee09e
Compare
|
@RyosukeCla |
|
@orukahairuka nativebrik 本体の方の PR が固まってきてから、もう一度確認します! |
|
@t-jimbo |
|
|
||
| // Calculate direction vector (CSS coordinate system) | ||
| let dx = sin(radians) | ||
| let dy = -cos(radians) // Y軸を反転(CSSは上が負、iOSは下が正) |
| // CAGradientLayer: (0,0) is top-left, (1,1) is bottom-right | ||
|
|
||
| // Convert normalized value to radians | ||
| let degrees = angle * 360.0 |
There was a problem hiding this comment.
angle が [0, 1] の範囲を超えてたら [0,1]にclipしてほしいです!
There was a problem hiding this comment.
let clippedAngle = max(0, min(1, angle))
// Convert normalized value to radians
let degrees = clippedAngle * 360.0
対応しました!
| colors.append(parseColorToCGColor(color)) | ||
|
|
||
| if let position = stop.position { | ||
| locations.append(NSNumber(value: position)) |
There was a problem hiding this comment.
position も [0,1]でclipしてください!
|
@RyosukeCla 修正したので、レビューお願いします🙇 |