在開(kāi)發(fā)中废赞,我們會(huì)經(jīng)常給一些UIkit添加背景圖的需求,此時(shí)一般是UI給圖來(lái)用叮姑,隨著背景圖的越來(lái)越多唉地,導(dǎo)致app越來(lái)越大,而且有些相同的圖可能出現(xiàn)冗余,還有可能代碼刪了渣蜗,遺留的垃圾圖屠尊。其實(shí)很多作為背景圖都很簡(jiǎn)單,完全可以直接代碼繪制耕拷,如果UI能給一些通用的規(guī)范讼昆,可以封裝出來(lái)給其他人用,ok骚烧,進(jìn)入正題浸赫。
1、創(chuàng)建一個(gè)UIiamge的category赃绊,然后添加方法:
/*
獲得指定顏色 大小 邊角度 邊框顏色 邊框?qū)挾?的圖片
@param color 圖片顏色
@param targetSize 圖片大小
@param cornerRadius 圖片邊框的角度
@param borderColor 圖片邊框的顏色
@param ldCustomButtonStyle borderWidth 邊框?qū)挾?/p>
@return 指定圖片
*/
+ (UIImage *)ld_imageWithBackgroundColor:(UIColor *)color toSize:(CGSize)targetSize cornerRadius:(CGFloat)cornerRadius? borderColor:(UIColor *)borderColor borderWidth:(CGFloat)borderWidth {
UIGraphicsBeginImageContextWithOptions(targetSize, cornerRadius == 0, [UIScreen mainScreen].scale);
CGRect targetRect = (CGRect){0, 0, targetSize.width, targetSize.height};
UIImage *finalImage = nil;
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);
if (cornerRadius == 0) {
if (borderWidth > 0) {
CGContextSetStrokeColorWithColor(context, borderColor.CGColor);
CGContextSetLineWidth(context, borderWidth);
CGContextFillRect(context, targetRect);
targetRect = CGRectMake(borderWidth / 2, borderWidth / 2, targetSize.width - borderWidth, targetSize.height - borderWidth);
CGContextStrokeRect(context, targetRect);
} else {
CGContextFillRect(context, targetRect);
}
} else {
targetRect = CGRectMake(borderWidth / 2, borderWidth / 2, targetSize.width - borderWidth, targetSize.height - borderWidth);
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:targetRect
byRoundingCorners:UIRectCornerAllCorners
cornerRadii:CGSizeMake(cornerRadius, cornerRadius)];
CGContextAddPath(UIGraphicsGetCurrentContext(), path.CGPath);
if (borderWidth > 0) {
CGContextSetStrokeColorWithColor(context, borderColor.CGColor);
CGContextSetLineWidth(context, borderWidth);
CGContextDrawPath(context, kCGPathFillStroke);
} else {
CGContextDrawPath(context, kCGPathFill);
}
}
finalImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return finalImage;
}
大家可以去學(xué)習(xí)一下core graphics 既峡,上邊的代碼注釋寫(xiě)的很清楚了,就是產(chǎn)生一個(gè)背景圖碧查,基本滿(mǎn)足平時(shí)的背景圖需求运敢。
2、為UIkit控件設(shè)置背景圖忠售,這里以UIbutton為例:
假如UI給出了一個(gè)規(guī)范传惠,有兩種樣式的button:
我們可以封裝一個(gè)公共方法,給其他人用稻扬,創(chuàng)建一個(gè)UIbutton的Category:
typedef NS_ENUM(NSUInteger, LDCustomButtonStyle) {
LDCustomButtonDefaultStyle = 0 ,//默認(rèn)樣式 什么都沒(méi)設(shè)置
LDCustomButtonRBgWTxtStyle = 1, //紅底白字
LDCustomButtonWBgRTxtStyle = 2 ,//白底紅字紅邊框
};
@interface UIButton (LDCustom)
/**
根據(jù)樣式獲得不同樣式的按鈕
@param ldCustomButtonStyle 按鈕樣式
@return 指定樣式的按鈕
*/
+ (instancetype )ld_createButtonWithStyle:(LDCustomButtonStyle )ldCustomButtonStyle;
可以看到我們的接口沒(méi)有指定返回的按鈕大小卦方,怎么做到呢?
這里要用到泰佳,圖片拉伸的方法(自己谷歌吧):
- (void )setBackgroundColor:(UIColor *)backgroundColor? cornerRadius:(CGFloat)cornerRadius borderColor:(UIColor *)borderColor borderWidth:(CGFloat)borderWidth forState:(UIControlState)state {
UIImage *backgroundImg = [UIImage ld_imageWithBackgroundColor:backgroundColor? toSize:CGSizeMake(2*cornerRadius+1, 2*cornerRadius+1) cornerRadius:cornerRadius borderColor:borderColor borderWidth:borderWidth];
UIImage * stretchedImage = [backgroundImg resizableImageWithCapInsets:UIEdgeInsetsMake(cornerRadius, cornerRadius, cornerRadius ,cornerRadius) resizingMode:UIImageResizingModeStretch];
[self setBackgroundImage:stretchedImage forState:state];
}
首先創(chuàng)建一個(gè)size為(2*cornerRadius+1, 2*cornerRadius+1)大小的圖片盼砍,然后指定拉伸區(qū)域這樣就OK了,當(dāng)button大于圖片大小時(shí)逝她,會(huì)被拉伸中間區(qū)域浇坐,不影響邊框的展示。
最后我們?cè)偬峁┮粋€(gè)針對(duì)規(guī)范的接口給其他人用就好了:
+ (instancetype )ld_createButtonWithStyle:(LDCustomButtonStyle )ldCustomButtonStyle {
UIButton *customBtn = [UIButton buttonWithType:UIButtonTypeCustom];
switch (ldCustomButtonStyle) {
case LDCustomButtonDefaultStyle:
break;
case LDCustomButtonRBgWTxtStyle:
[customBtn setBackgroundColor:[UIColor ld_colorWithHex:0xfa4545]? cornerRadius:4.0 borderColor:[UIColor ld_colorWithHex:0xfa4545] borderWidth:0.5 forState:UIControlStateNormal];
[customBtn setTitleColor:[UIColor ld_colorWithHex:0xffffff] forState:UIControlStateNormal];
[customBtn setBackgroundColor:[UIColor ld_colorWithHex:0xc63737]? cornerRadius:4.0 borderColor:[UIColor ld_colorWithHex:0xc63737] borderWidth:0.5 forState:UIControlStateSelected];
[customBtn setTitleColor:[UIColor ld_colorWithHex:0xd55d5d] forState:UIControlStateSelected];
[customBtn setBackgroundColor:[UIColor ld_colorWithHex:0xc63737]? cornerRadius:4.0 borderColor:[UIColor ld_colorWithHex:0xc63737] borderWidth:0.5 forState:UIControlStateHighlighted];
[customBtn setTitleColor:[UIColor ld_colorWithHex:0xd55d5d] forState:UIControlStateHighlighted];
[customBtn setBackgroundColor:[UIColor ld_colorWithHex:0xfa4545] cornerRadius:4.0 borderColor:[UIColor ld_colorWithHex:0xfa4545] borderWidth:0.5 forState:UIControlStateDisabled];
[customBtn setTitleColor:[UIColor ld_colorWithHex:0xff9797] forState:UIControlStateDisabled];
break;
case LDCustomButtonWBgRTxtStyle:
[customBtn setBackgroundColor:[UIColor ld_colorWithHex:0xffffff] cornerRadius:4.0 borderColor:[UIColor ld_colorWithHex:0xfa4545] borderWidth:0.5 forState:UIControlStateNormal];
[customBtn setTitleColor:[UIColor ld_colorWithHex:0xfa4545] forState:UIControlStateNormal];
[customBtn setBackgroundColor:[UIColor ld_colorWithHex:0xfa4545]? cornerRadius:4.0 borderColor:[UIColor ld_colorWithHex:0xfa4545] borderWidth:0.5 forState:UIControlStateSelected];
[customBtn setTitleColor:[UIColor ld_colorWithHex:0xffffff] forState:UIControlStateSelected];
[customBtn setBackgroundColor:[UIColor ld_colorWithHex:0xfa4545]? cornerRadius:4.0 borderColor:[UIColor ld_colorWithHex:0xfa4545] borderWidth:0.5 forState:UIControlStateHighlighted];
[customBtn setTitleColor:[UIColor ld_colorWithHex:0xffffff] forState:UIControlStateHighlighted];
[customBtn setBackgroundColor:[UIColor ld_colorWithHex:0xfa4545]? cornerRadius:4.0 borderColor:[UIColor ld_colorWithHex:0xfa4545] borderWidth:0.5 forState:UIControlStateDisabled];
[customBtn setTitleColor:[UIColor ld_colorWithHex:0xff9797] forState:UIControlStateDisabled];
break;
default:
break;
}
return customBtn;
}
到此就可以了黔宛,以后用到規(guī)范的按鈕吗跋,直接調(diào)用這個(gè)方法就好了~ 代碼量也會(huì)明顯簡(jiǎn)潔~