欢迎访问移动开发之家(rcyd.net),关注移动开发教程。移动开发之家  移动开发问答|  每日更新
页面位置 : > > > 内容正文

IOS实现UIButton图文混排、自定义按钮按下和正常状态下不同的背景颜色、根据文字长度自定义UIButton长度,iosuibutton

来源: 开发者 投稿于  被查看 17394 次 评论:70

IOS实现UIButton图文混排、自定义按钮按下和正常状态下不同的背景颜色、根据文字长度自定义UIButton长度,iosuibutton


  在一些项目中,我们需要自定义自己的UIButton,使Button上面同时具有图片和文字描述,实现自定义UIButton的图文混排。

  首先我们需要定义一个继承自UIButton的类,同时实现自己的initWithFrame:方法。方法声明在这个类的头文件中。

self = [super initWithFrame:frame];
    if (self) {
     
    }
    return self;

在if判断语句中,我们可以实现对按钮的一些自定义属性和方法,如按钮圆角、Title文本、背景颜色等信息。

self.titleLabel.textAlignment=NSTextAlignmentLeft;

这些都可以根据自己的需要进行简单设置。

为了上面一些简单的设置当然不需要自定义一个类,所以下面gc来了!!!!!

假如需要根据UIButton 的文字内容自适应调整UIButton的长度,需要以下几步:

1.首先自动获取文本的长度,

NSDictionary *attribute = @{NSFontAttributeName: [UIFont systemFontOfSize:15]};
        titleTextSize = [self.titleLabel.text boundingRectWithSize:CGSizeMake(MAXFLOAT, self.frame.size.height) options:NSStringDrawingTruncatesLastVisibleLine attributes:attribute context:nil].size;
        [self setFrame:CGRectMake(self.frame.origin.x, self.frame.origin.y, titleTextSize.width + cornerRedius*2 +self.frame.size.height , self.frame.size.height)];

上面方法得到的size就是根据系统设置字体大小,所获得的文字长度和高度的size。获取后重新调用setFrame方法,重新定义自己的Frame大小,就实现了自适应大小。

2.自定义图片显示位置和文字显示位置

[self setImage:[UIImage imageNamed:imageName] forState:UIControlStateNormal];

使用这个方法设置了UIImage后,你会发现,图片和文字可能不是你想要的,这个时候,需要重写UIButton类的两个方法,如下:

- (CGRect)titleRectForContentRect:(CGRect)contentRect
{
    CGFloat titleW = contentRect.size.width - btnCornerRedius;
    CGFloat titleH = self.frame.size.height;
    CGFloat titleX = self.frame.size.height + btnCornerRedius;
    CGFloat titleY = 0;
    contentRect = (CGRect){{titleX,titleY},{titleW,titleH}};
    return contentRect;
    
}

- (CGRect)imageRectForContentRect:(CGRect)contentRect
{
    CGFloat imageW = self.frame.size.height -5;
    CGFloat imageH = self.frame.size.height -5;
    CGFloat imageX = btnCornerRedius;
    CGFloat imageY = 2.5;
    contentRect = (CGRect){{imageX,imageY},{imageW,imageH}};
    return contentRect;
    
}

这里的btnCornerRedius是我定义的圆角弧度。

重写这两个方法后,图片的高度和文字的位置就在你的掌控之内了。

3、设置Button 的背景颜色。当你需要设置UIButton在按下状态和普通状态的不同的颜色,可以使用以下方法:

- (UIImage *)imageWithColor:(UIColor *)color {
    CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);
    
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return image;
}

使用此方法构建一个指定颜色的两张图片,然后加载在UIButton的

setBackgroundImage方法中,就可以实现按钮在按下后不同的两种颜色的显示。

本文中设置方法为:

        [self setBackgroundImage:[self imageWithColor:[UIColor colorWithHexString:btnNormalStateHEXCorlor]] forState:UIControlStateNormal];
        [self setBackgroundImage:[self imageWithColor:[UIColor colorWithHexString:btnSelectedHEXCorlor]] forState:UIControlStateHighlighted];

注意,上面这段代码的colorWithHexString:是一个颜色十六进制格式转化为UIColor的红绿蓝格式的方法,在网上可以搜到,或者直接在

imageWithColor的方法中传入UIColor。


 

 

用户评论