在項目中,遇到UI設(shè)計師要求整個項目中的按鈕樣式修改,由小圓角按鈕改為“一定傾斜度的漸變色” + 兩頭半圓形 + 淺色陰影效果,容易想到的實現(xiàn)方式就是,讓UI切圖來實現(xiàn);其實更好的方法是自定義一個按鈕的子類,讓子類具有那些效果,這樣只需要使用子類去初始化按鈕,按鈕就具有了這種特性。
UI切圖實現(xiàn)的優(yōu)缺點:
優(yōu)點:只需要給按鈕設(shè)置可點擊和不可點擊的圖片即可,不用管設(shè)置陰影、圓角、傾斜角度漸變色背景的代碼
缺點:
1. UI需要切很多的圖,可點擊、不可點擊狀態(tài)下的圖,UI設(shè)計師工作量大。
2. 自己要手動去一個一個設(shè)置圖片,開發(fā)人員工作量大。
3. 后續(xù)如果還有這種按鈕,還需要UI設(shè)計師切圖,自己手動設(shè)置圖片。。
4. 后續(xù)要修改成其他樣式呢?。。。。。
自定義按鈕子類實現(xiàn)的優(yōu)缺點
優(yōu)點:
1. 不需要UI切圖,UI只需要把漸變的幾個顏色值、傾斜的角度、陰影的屬性告訴開發(fā)、給出一樣參照例子。
2. 項目中所有要具有這種效果的按鈕只需要將UIbutton改為自定義的類名即可,簡單方便
3. 后續(xù)如果有其他頁面中按鈕需要這樣的效果,只需要使用子類去創(chuàng)建視圖即可,可拓展性好
4. 一改全改,修改子類,所有效果都可以跟著變,方便做統(tǒng)一修改。
缺點:需要將子類效果寫好需要一點時間
經(jīng)過上面的分析可以看出,我們該做出怎樣的選擇。
自定義按鈕實現(xiàn)效果

實現(xiàn)的參考代碼:
- (void)drawRect:(CGRect)rect { ? ?
?UIColor *color_middle = [UIColor colorWithHexString:@"#ff6a00"]; ?
? ?CGFloat selfH = rect.size.height; ?
? ?self.layer.cornerRadius = selfH/2; ?
? ?self.layer.shadowColor = color_middle.CGColor; ?
? ?self.layer.shadowOpacity = 0.35f; ? ?
?self.layer.shadowOffset = CGSizeMake(0, 3.5 * selfH/41); ?
?if (self.gradientLayer) return; ? ?
?UIColor *color_start = RGB(251,138,36);// [UIColor redColor]; ?
? UIColor *color_end = RGB(255,102,0);//[UIColor greenColor]; ?
? ?CAGradientLayer *gradientLayer = [CAGradientLayer layer]; ?
? CGFloat alpha = self.wj_enabled?1.f:.5; ?
? ?gradientLayer.opacity = alpha; ? ?
?self.gradientLayer = gradientLayer; ? ?
gradientLayer.colors = @[(__bridge id)color_start.CGColor, (__bridge id)color_middle.CGColor, (__bridge id)color_end.CGColor];
//? ? gradientLayer.position = self.center;
? ? gradientLayer.locations = @[@0.0, @.5, @1.0];
? ? gradientLayer.type = kCAGradientLayerAxial;
? ? gradientLayer.startPoint = CGPointMake(0, .5); ?
? gradientLayer.endPoint = CGPointMake(1.f, .6); ? ?
?gradientLayer.cornerRadius = selfH/2; ?
?gradientLayer.masksToBounds = YES; ?
? gradientLayer.frame = CGRectMake(0, 0, rect.size.width, rect.size.height); ?
? ?[self.layer insertSublayer:gradientLayer atIndex:0];
//? ? DLOG(@"gradientLayerdrawRect"); ? ?
?gradientLayer.shouldRasterize = self.layer.shouldRasterize = YES;? // 光柵化,設(shè)置后會有緩存效果,提升運行效率
? gradientLayer.rasterizationScale = [UIScreen mainScreen].scale;// 如果不這樣設(shè)置,在使用masksToBounds的時候可能會有鋸齒狀
?}
具體實現(xiàn)代碼: