美文网首页iOS开发技术
#UIButton#背景图片的拉伸

#UIButton#背景图片的拉伸

作者: 冷洪林 | 来源:发表于2016-08-23 19:49 被阅读411次
  • 如果不采用相应技术对button的背景图片进行拉伸,则显示的效果就会失真,效果:
Snip20160823_7.png
  • iOS中有三种方法对图片进行拉伸
// 方法一:
- (void)viewDidLoad {
    [super viewDidLoad];
    // 0.创建一张图片
    UIImage *image = [UIImage imageNamed:@"chat_send_nor"];
    // 1.获取图片尺寸
    CGFloat width = image.size.width;
    CGFloat height = image.size.height;
    // 2.拉伸图片
    UIImage *resizableImage = [image resizableImageWithCapInsets:UIEdgeInsetsMake(height * 0.5, width * 0.5, height * 0.5 - 1, width * 0.5 - 1)];
    // 3.把拉伸过的图片设置为button的背景图片
    [self.buttonView setBackgroundImage:resizableImage forState:UIControlStateNormal];
    
}
// 方法二
- (void)viewDidLoad {
    [super viewDidLoad];  
    // 0.创建一张图片
    UIImage *image = [UIImage imageNamed:@"chat_send_nor"];
    // 1.获取图片尺寸
    CGFloat width = image.size.width;
    CGFloat height = image.size.height;
    // 2.拉伸图片
    UIImage *resizableImage = [image stretchableImageWithLeftCapWidth:width * 0.5 topCapHeight:height * 0.5];
    // 3.把拉伸过的图片设置为button的背景图片
    [self.buttonView setBackgroundImage:resizableImage forState:UIControlStateNormal];
    
}
  • 方法三
    • 在storyboard中进行设置


      Snip20160823_8.png
Snip20160823_9.png
Snip20160823_12.png
  • 注意:由于storyboard的图片拉伸往往不能处理一些特殊形状的图片,所以还需要用上面两种代码拉伸图片的方法
  • 由于经常需要用到代码拉伸图片的功能,所以我们可以写一个分类,可以方便以后直接使用
    • 构造一个类方法
Snip20160823_13.png
#import "UIImage+LHLExtension.h"

@implementation UIImage (LHLExtension)

+ (instancetype)stretchableImageWithLocalName:(NSString *)imageName{
    // 0.创建一张图片
    UIImage *image = [UIImage imageNamed:imageName];
    // 1.获取图片尺寸
    CGFloat width = image.size.width;
    CGFloat height = image.size.height;
    // 2.拉伸图片
    UIImage *resizableImage = [image stretchableImageWithLeftCapWidth:width * 0.5 topCapHeight:height * 0.5];
    return resizableImage;
}
@end
  • 然后在viewDidLoad中用分类中的方法
 UIImage *image = [UIImage stretchableImageWithLocalName:@"chat_send_nor"];
 [self.buttonView setBackgroundImage:image forState:UIControlStateNormal];
}
  • 以上三种方式处理后的图片效果如下:
Snip20160823_14.png

相关文章

网友评论

    本文标题:#UIButton#背景图片的拉伸

    本文链接:https://www.haomeiwen.com/subject/yndnsttx.html