UIButton 获取网络图片的排版技巧

最近在做 UI 的时候，遇到一排 button 需要通过后端来控制它的 image 和 title。但由于 Android 和 iOS 对图片要求的尺寸有差异，因此通过后端开控制图片大小比较麻烦。

由于我们对 button 的尺寸有具体的要求，因此，当代码写下来的时候，效果是这样的：

    [self.button1 sd_setImageWithURL:[NSURL URLWithString:ResourceUrl] forState:UIControlStateNormal];

    [self.button1 setTitle:@"一碗米饭" forState:UIControlStateNormal];

    self.button1.frame = CGRectMake(50, 50, 120, 50);

效果图如下：

①

这样的结果显然不符合设计的要求。因此需要我们改变 button 内部 image 的大小。

---

总的来说，有两个方案：

一、通过 UIEdgeInsetsMake 去图片改变大小

UIButton 的这两个属性：imageEdgeInsets 、 titleEdgeInsets，分别代表着 image 和 title 距离初始状态下的偏移量。所谓的初始状态就是设置完 image 和 title 之后，image 和 title 的默认位置。此时是 UIEdgeInsetsMake(0, 0, 0, 0) 即UIEdgeInsetsZero 。

根据上面的原理，我们先调整 image 的大小 （最终我们想要的图片尺寸是 (20，20) ）：

self.button2.imageEdgeInsets = UIEdgeInsetsMake(15, 20, 15, 80);

解释一下四个参数：
由于 button 的高度是 50 ，图片要求是20，因此，图片只要距离 button 的 top 和 bottom 各 15 ，即可满足高度。

button 的宽度是 120，因此如果没有 title ,那么 image 只需距离 button 的 left 和 right 各(120-20)/2 即 50 即可。

但由于 title 的存在，image 距离 left 必须要小于 50，距离 right 的自然也就应该大于50。问题的关键就是如何确定这个具体的值。

其实最后的效果无非是让图片和文字整体居中，这里我们就需要计算 title的实际宽度，具体计算方法很简单，这里就不说了，知道了最终图片和文字的宽度，结合 button 的初始状态下图片的文字的位置，剩下的就是一些数学知识了。（如果你比较懒，而且 button 的 title 长度是固定的话，慢慢试也行，毕竟是有规律的）。

效果图如下：

②

---

二、提前改变网络图片的大小

所谓提前改变网络图片的大小，就是在图片下载下载后，赋给 button 的 image 之前，改变大小：

[[SDWebImageDownloader sharedDownloader] downloadImageWithURL:[NSURL URLWithString:ResourceUrl] options:SDWebImageDownloaderHighPriority progress:nil completed:^(UIImage *image, NSData *data, NSError *error, BOOL finished) {
        UIImage *targetImage = [self originImage:image scaleToSize:CGSizeMake(20, 20)];
        [self.button setImage:targetImage forState:UIControlStateNormal];
    }];

改变图片大小的方法：

-(UIImage*)originImage:(UIImage *)image scaleToSize:(CGSize)size{
    UIGraphicsBeginImageContext(size);
    [image drawInRect:CGRectMake(0, 0, size.width, size.height)];
    UIImage* scaledImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return scaledImage;
}

这样做比较假单，而且很好理解，但是由于图片下载是耗时操作，会导致 button 先显示 一个居中的 title ，图片裁剪完成后，button 重新布局，会出现闪动的问题。体验不好。

当然，你肯定想到了解决办法，提前设置一个正确尺寸的默认图就好了！

---

如果说还有其他办法，那就是用 自定义一个 button 了 ，除非有特别的需求，比如 button 内的动画，否则，上面的方法就够了。