在开发中，我们会经常给一些UIkit添加背景图的需求，此时一般是UI给图来用，随着背景图的越来越多，导致app越来越大，而且有些相同的图可能出现冗余，还有可能代码删了，遗留的垃圾图。其实很多作为背景图都很简单，完全可以直接代码绘制，如果UI能给一些通用的规范，可以封装出来给其他人用，ok，进入正题。
1、创建一个UIiamge的category，然后添加方法：
/*
获得指定颜色 大小 边角度 边框颜色 边框宽度 的图片
@param color 图片颜色
@param targetSize 图片大小
@param cornerRadius 图片边框的角度
@param borderColor 图片边框的颜色
@param ldCustomButtonStyle borderWidth 边框宽度
@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;
}
大家可以去学习一下core graphics ，上边的代码注释写的很清楚了，就是产生一个背景图，基本满足平时的背景图需求。
2、为UIkit控件设置背景图，这里以UIbutton为例：
假如UI给出了一个规范，有两种样式的button：
我们可以封装一个公共方法，给其他人用，创建一个UIbutton的Category：
typedef NS_ENUM(NSUInteger, LDCustomButtonStyle) {
LDCustomButtonDefaultStyle = 0 ,//默认样式 什么都没设置
LDCustomButtonRBgWTxtStyle = 1, //红底白字
LDCustomButtonWBgRTxtStyle = 2 ,//白底红字红边框
};
@interface UIButton (LDCustom)
/**
根据样式获得不同样式的按钮
@param ldCustomButtonStyle 按钮样式
@return 指定样式的按钮
*/
+ (instancetype )ld_createButtonWithStyle:(LDCustomButtonStyle )ldCustomButtonStyle;
可以看到我们的接口没有指定返回的按钮大小，怎么做到呢？
这里要用到，图片拉伸的方法（自己谷歌吧）：
- (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];
}
首先创建一个size为（2*cornerRadius+1, 2*cornerRadius+1）大小的图片，然后指定拉伸区域这样就OK了，当button大于图片大小时，会被拉伸中间区域，不影响边框的展示。
最后我们再提供一个针对规范的接口给其他人用就好了：
+ (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;
}
到此就可以了，以后用到规范的按钮，直接调用这个方法就好了~ 代码量也会明显简洁~
网友评论