UIButton上的image与label的布局

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了UIButton上的image与label的布局相关的知识,希望对你有一定的参考价值。

     项目中遇到这样一个问题,button的创建是根据服务器返回的数据来创建,比如label信息和image信息都是服务器返回,比较难搞,因为图片返回来都是URL,这是肯定没有错误的,不可能服务器给你返回一个图片。
     涉及到一个问题,白之前没使用过类似方式设计按钮,多数情况下都是使用本地图片来创建,button上是有个set方法,但是这个方法就是我说的直接付本地图片名的。
     后经旁牛教诲,第三方管理网络图片的插件有相应功能,我便导入<UIButton+WebCache>,使用sd_setImageWithURL方法便轻易的解决了此问题。
     又涉及到了一个新的问题,就是,此图片并不是按原图大小而展示,他是平铺到了整个button上,这就造成了不仅图片被拉伸的不成样子,而且图片过大相当难看,想都不用想,这种方式是肯定不行的。但是虽然问题解决了,是给图片做了一个等比例的缩小,可是这种方法我觉得肯定是不对的。
     为什么说不对呢,因为又涉及到了一个问题,没办法掌握移动尺寸,使用setImageEdgeInsets和setTitleEdgeInsets时没法找到一个可掌握的办法来自动适应屏幕。
 
     这么多问题,我觉得应该先从导入的那个第三方来捋顺起,不用想,网上肯定有跟我一样的问题的,我又不是大神,能遇到别人遇不到的问题,OC马上就要退出市场了,我还为OC的问题,肯定是不对的。去找找看!
 
     找到了类似的问题,但是并不是解决了图片缩小的问题,但是通过使用他的方法,连图片被平铺的问题都修复了,还是按照上面那种加载图片的方法[button sd_setImageWithURL: forState:];但是导师的方法是此button要去继承一个父button,父button来重写两个方法:
     - (CGRect)titleRectForContentRect:(CGRect)contentRect;
     - (CGRect)imageRectForContentRect:(CGRect)contentRect;
     其实旁牛也一直在说我这么写代码太长,应该把设置放到父类里。但是当时我也不会,不知道到时候怎么整init或者其他什么的。看了导师的代码我不但完成了,而且还完成了呵呵呵,其实还是一脸懵逼啊!
     
@interface MemberButton : UIButton

@end

@implementation MemberButton

- (instancetype)initWithFrame:(CGRect)frame {
    self = [superinitWithFrame:frame];
    if (self) {
        self.titleLabel.font = [UIFontsystemFontOfSize:15.f];
        self.titleLabel.textAlignment = NSTextAlignmentCenter;
        [selfsetTitleColor:[UIColorcolorWithWhite:153.f/255.falpha:1.f] forState:UIControlStateNormal];
    }
   
    returnself;
}

- (CGRect)titleRectForContentRect:(CGRect)contentRect {
    returnCGRectMake(0.f, contentRect.size.height / 5.f * 3.f, contentRect.size.width, contentRect.size.height / 5.f * 2.f);
}

- (CGRect)imageRectForContentRect:(CGRect)contentRect {
    CGFloat width = contentRect.size.width;
    CGFloat height = contentRect.size.height;
    returnCGRectMake(width / 3.5f, height / 10.f, width / 7.f * 3.f, height / 5.f * 3.f - height / 10.f * 2.f);
}

@end
 
     上面那几个浮点值的修改就能相应改出你所需要的文字与图片的相对位置,而且是能自动屏幕适配的,这点才是最棒的,要不然还有根据屏宽去设定两套或多套偏移方案。

以上是关于UIButton上的image与label的布局的主要内容,如果未能解决你的问题,请参考以下文章

自动布局 - UIButton 的固有大小不包括标题插图

在滚动视图中具有相同宽度和高度的三个 UIButton 上的自动布局

如何使用自动布局防止 UIButton 超出其父 UIView 的宽度

约束布局更改后,不会触发UIButton操作

将 UIButton 的 titleLabel 文本与自动布局匹配在固定的恒定宽度上

5分钟 搞定UIButton的文本与图片的布局