重新定义Button的图片和label位置

最新推荐文章于 2021-01-04 14:04:58 发布

原创最新推荐文章于 2021-01-04 14:04:58 发布 · 940 阅读

0 ·

CC 4.0 BY-SA版权

UI相关专栏收录该内容

77 篇文章

订阅专栏

本文介绍如何调整UIButton的布局，包括更改按钮上的文字和图片位置。提供了两种方法：一是通过设置UIButton的相关属性；二是通过自定义UIButton子类并重写特定的方法来实现更灵活的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文挺多的,说的很细,我就简化一些, 在加上自己的一些优化,

http://m.blog.youkuaiyun.com/lqq200912408/article/details/51323336

UIButton的默认布局是:title在右,image在左;

很多时候我们需要的是title在左边,或者title在下面,这时就需要调整UIButton的TitleLabel和ImageView的位置了,

一种是设置UIButton的以下属性:

在xib,sb中直接设置就行了 . 左右上下都能设置, 而且可以实时看到,简直不要太方便 . 如果代码创建的,那就老实的设置

属性值吧.

二,通过自定义Button

该方法,是通过自定义一个button,继承自UIButton,然后重写方法:

方法的参数contentRect,即内容的frame,其值和button的bounds是一样的,通过这个参数可以获取到当前button的size;

这里可以返回一个写死的frame,但要注意,不要超过contentRect的范围;

比如这种 : ( 上图下字, 图是正方形 , 字的高度固定 20 像素)

// 调整图片的位置, 涨见识了, 还能这样写 ,重新调整Button的图片和label位置
- (CGRect)imageRectForContentRect:(CGRect)contentRect
{
    return CGRectMake(0, 0, self.width, self.width);

}
// 调整label的位置
- (CGRect)titleRectForContentRect:(CGRect)contentRect
{
    return CGRectMake(0, self.height - 20, self.width, 20);
}

有一点需要说明:这两个方法不是只调用一次,会被多次调用,只要button的title改变,都会调用此方法,最后一次调用,返回的f

rame值,才是最终的布局frame,

效果图:

这是写死的方式,可能不能普遍使用所有情况 , 那就在加点东西,

.m文件 :

在调用时,优先检测有没有自己的设置, 如果有自己的设置, 就直接使用自己的设置, 没有的话, 就按照默认的显示 .

Good ,几乎可以适应任何情况了.

3. 还有一种方式 , 反正都已经用继承了,直接重写layoutSubview就行了, 简单粗暴直接, 也可以像上面一样,写一个值存imageRect 和 labelRect , 如果没有使用这个默认值, 有的话就用存的值 , 但是这个有个问题 , 就是button的实际位置是没改的,绿色是背景色,是图片的真实frame, 下面的字是无法响应点击事件的,所以设置button的frame的时候要算好button的真正的frame .

- (void)layoutSubviews{
    [super layoutSubviews];
    
    if (self.imageRect.size.width != 0 && self.imageRect.size.height != 0) {
        self.imageView.frame = self.imageRect;
    } else {
        self.imageView.frame = CGRectMake(0, 0, self.imageView.image.size.width, self.imageView.image.size.height);
    }
    
    if (self.titleRect.size.width != 0 && self.titleRect.size.height != 0) {
        self.titleLabel.frame = self.titleRect;
    } else {
        self.titleLabel.frame = CGRectMake(0, self.imageView.image.size.height+10, self.imageView.image.size.width, self.titleLabel.frame.size.height);        
    }
    
    
    
}