如何为 UIButton 设置自定义渐变背景?
Posted
技术标签:
【中文标题】如何为 UIButton 设置自定义渐变背景?【英文标题】:How to set custom gradient background for UIButton? 【发布时间】:2013-11-04 19:55:45 【问题描述】:我想创建一个自定义 UIButton 渐变背景。我附上了一些关于要求的图片。
但是我的渐变背景和我想象的不一样。
我的问题是如何将位置或位置设置为渐变? (从上到中,然后从中到下)。
这是我的代码:
- (void)setBlueShiningLayer
CALayer *buttonLayer = self.layer;
[buttonLayer setMasksToBounds:YES];
[buttonLayer setCornerRadius:5.0];
[buttonLayer setBorderWidth:1.0f];
[buttonLayer setBorderColor:[UIColor colorWithRed:153.0f / 255.0f green:153.0f / 255.0f blue:153.0f / 255.0f alpha:1.0f].CGColor];
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
[gradientLayer setBounds:self.bounds];
NSArray *colors = [NSArray arrayWithObjects:
(id) [UIColor colorWithRed:129.0f / 255.0f green:151.0f / 255.0f blue:179.0f / 255.0f alpha:0.8f].CGColor, // top
(id) [UIColor colorWithRed:111.0f / 245.0f green:133.0f / 255.0f blue:162.0f / 255.0f alpha:0.4f].CGColor, // center
(id) [UIColor colorWithRed:95.0f / 245.0f green:118.0f / 255.0f blue:151.0f / 255.0f alpha:0.4f].CGColor, // center
(id) [UIColor colorWithRed:75.0f / 245.0f green:99.0f / 255.0f blue:133.0f / 255.0f alpha:0.8f].CGColor, // bottom
nil];
[gradientLayer setPosition:CGPointMake([self bounds].size.width / 2, [self bounds].size.height / 2)];
[gradientLayer setColors:colors];
[buttonLayer insertSublayer:gradientLayer atIndex:0];
[self setTitleColor:[UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:1.0f] forState:UIControlStateNormal];
[self setTintColor:[UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.3f]];
【问题讨论】:
我的回答是否解决了您的问题? 【参考方案1】:看起来渐变层均匀地隔开颜色。这就是为什么你会得到你正在得到的效果。
要解决此问题,您可以使用CAGradientLayer
的locations
属性。
像这样……
gradientLayer.locations = @[@0, @0.5, @0.5, @1.0];
TBH,使用UIButton
执行此操作的最简单方法是使用图像。
只需创建一个具有所需渐变和边框的按钮图像,然后将其添加为背景图像。
如果您需要使用不同尺寸的图片,您可以创建可调整大小的图片。
【讨论】:
非常感谢它现在可以工作,但我也必须将最后一个位置设置为 0。我同意你使用图片,但设计师给我发的是 RGB 而不是图片 :)【参考方案2】:Swift - 4.2 版
@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)
gradientLayer.locations = [0.0, 1.0]
gButton.layer.insertSublayer(gradientLayer, at: 0)
【讨论】:
以上是关于如何为 UIButton 设置自定义渐变背景?的主要内容,如果未能解决你的问题,请参考以下文章
为uibutton背景图像iphone sdk设置渐变颜色(颜色)