ボタンに線形グラデーションを追加して、見栄えの良いUIボタンの作成に取り組んでいます。ただし、グラデーションを追加する必要があるインデックスがわかりません。私が現在持っているコードは、画像/テキストの上にグラデーションを配置します。
テキスト/画像サブレイヤーの下のUIButtonにサブレイヤーを挿入するにはどうすればよいですか?ボタンのテキストと画像を表示しておくことが重要です!
+(void)addLinearGradientToView:(UIView*)view TopColor:(UIColor*)topColor BottomColor:(UIColor*)bottomColor
{
for(CALayer* layer in view.layer.sublayers)
{
if ([layer isKindOfClass:[CAGradientLayer class]])
{
[layer removeFromSuperlayer];
}
}
CAGradientLayer* gradientLayer = [CAGradientLayer layer];
gradientLayer.startPoint = CGPointMake(0.5, 0);
gradientLayer.endPoint = CGPointMake(0.5,1);
gradientLayer.frame = view.bounds;
gradientLayer.colors = [NSArray arrayWithObjects:(id)[topColor CGColor], (id)[bottomColor CGColor], nil];
// [view.layer addSublayer:gradientLayer];
if(view.layer.sublayers.count>0)
{
[view.layer insertSublayer:gradientLayer atIndex:view.layer.sublayers.count-2];
}else {
[view.layer addSublayer:gradientLayer];
}
}
カスタムボタンのレイヤーに追加します。
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = customButton.layer.bounds;
gradientLayer.colors = [NSArray arrayWithObjects:
(id)[UIColor colorWithWhite:1.0f alpha:0.1f].CGColor,
(id)[UIColor colorWithWhite:0.4f alpha:0.5f].CGColor,
nil];
gradientLayer.locations = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0f],
[NSNumber numberWithFloat:1.0f],
nil];
gradientLayer.cornerRadius = customButton.layer.cornerRadius;
[customButton.layer addSublayer:gradientLayer];
ここで、customButton
はカスタムUIButton
です。
達成しようとしていることについては、常にインデックス0に挿入してください。
私は最近、あなたが面白いと思うかもしれないこの種のことについて 記事 を書きました。
Swift 4
@IBOutlet weak var gButton: UIButton!
override func viewDidLoad() {
super.viewDidLoad()
let topGradientColor = UIColor.red
let bottomGradientColor = UIColor.yellow
let gradientLayer = CAGradientLayer()
gradientLayer.frame = gButton.bounds
gradientLayer.colors = [topGradientColor.cgColor, bottomGradientColor.cgColor]
//Vertical
//gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
//gradientLayer.endPoint = CGPoint(x: 0.0, y: 1.0)
//Horizontal
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
gButton.layer.insertSublayer(gradientLayer, at: 0)
}
これを実現するためのコードは次のとおりです
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = <#View Variable Name#>.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)([UIColor colorWithRed:0.337 green:0.596 blue:1.000 alpha:1.000].CGColor),(id)([UIColor colorWithRed:0.757 green:0.459 blue:1.000 alpha:1.000].CGColor),(id)([UIColor colorWithRed:0.310 green:0.835 blue:1.000 alpha:1.000].CGColor),nil];
gradient.startPoint = CGPointMake(0.5,0.0);
gradient.endPoint = CGPointMake(0.5,1.0);
[<#View Variable name#>.layer insertSublayer:gradient atIndex:0];
色を簡単に選択して、グラデーションのコードを自動的に出力できるこのツールを入手しました。とても便利です毎日使っています iTunes.Apple.com/gb/app/gradient-creator/id1031070259?mt=12