UIButton上的image与label的布局

Posted 2020-08-08

     项目中遇到这样一个问题，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

 

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