UIButton上同时显示图片和文字,且图片和文字上下排列,一般方法是在UIButton上添加一个UIImageView和UILable控件,这样做代码比较繁琐,
然后我就试着扩展了UIButton,代码如下:
在.h文件中:
@interface UIButton (UIButtonImageWithLable)
- (void) setImage:(UIImage *)image withTitle:(NSString *)title forState:(UIControlState)stateType;
@end
在.m文件中:
- (void) setImage:(UIImage *)image withTitle:(NSString *)title forState:(UIControlState)stateType
{
//UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)
CGSize titleSize = [titlesizeWithAttributes:@{NSFontAttributeName:[UIFontsystemFontOfSize:12]}];
[self.imageViewsetContentMode:UIViewContentModeCenter];
[selfsetImageEdgeInsets:UIEdgeInsetsMake(-8.0,
0.0,
0.0,
-titleSize.width)];
[selfsetImage:imageforState:stateType];
[self.titleLabelsetContentMode:UIViewContentModeCenter];
[self.titleLabelsetBackgroundColor:[UIColorclearColor]];
[self.titleLabelsetFont:[UIFontsystemFontOfSize:12.0f]];
[self.titleLabelsetTextColor:[UIColorblackColor]];
[selfsetTitleEdgeInsets:UIEdgeInsetsMake(30.0,
-image.size.width,
0.0,
0.0)];
[selfsetTitle:titleforState:stateType];
}
备注:如果不需要上下显示,只需要横向排列的时候,就不需要设置左右偏移量了,代码如下
- (void) setHImage:(UIImage *)image withTitle:(NSString *)title forState:(UIControlState)stateType
{
//UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)
[self.imageViewsetContentMode:UIViewContentModeCenter];
[selfsetImageEdgeInsets:UIEdgeInsetsMake(-8.0,
0.0,
0.0,
0.0)];
[selfsetImage:imageforState:stateType];
[self.titleLabelsetContentMode:UIViewContentModeCenter];
[self.titleLabelsetBackgroundColor:[UIColorclearColor]];
[self.titleLabelsetFont:[UIFontsystemFontOfSize:12.0f]];
[self.titleLabelsetTextColor:[UIColorblackColor]];
[selfsetTitleEdgeInsets:UIEdgeInsetsMake(30.0,
0.0,
0.0,
0.0)];
[selfsetTitle:titleforState:stateType];
}
关于UIButton UIEdgeInsetsMake 理解
默认情况下,不设置的效果,都使居中现实,button为150*150
使用以下设置后:
[self setTitleEdgeInsets:UIEdgeInsetsMake( 0.0,-backGroundImag.size.width, 0.0,0.0)];
[self setImageEdgeInsets:UIEdgeInsetsMake(0.0, 0.0,0.0, -self.titleLabel.bounds.size.width)];
若要title在图片的上方,则位置相对于图片来说,向上移动-80
[self setTitleEdgeInsets:UIEdgeInsetsMake( -80.0,-backGroundImag.size.width, 0.0,0.0)];
[self setImageEdgeInsets:UIEdgeInsetsMake(0.0, 0.0,0.0, -self.titleLabel.bounds.size.width)];
效果如下:
综上所述,若单独设置一个title或者image在button中的位置,
UIEdgeInsets是相对于button的frame来计算的(上,左,下,右,),
如果是刚才所描述的情况,则title是相对于image的frame设置的,而image的位置是相对于titel的位置设置的
over!