android 图片边框缩放,[转]带边框的UIImage缩放(类似Android的九宫格)

转载前言:在Android中,有.9的图片可以用于处理拉伸问题,这个大家都很熟悉了,iOS中,不仅xCode的IB可以这么搞,代码中也可以很方便的实现这个功能。

转载自:https://onevcat.com/2011/12/uiimage/

一个带边框的UIImage如果使用常规的缩放,边框部分将被按照缩放比例拉伸或压缩,有些时候这并不是我们所期望的..比如这个边框是根据图片大小变化的外框。比如下面的类似按钮的不明物体图片:主体为渐变蓝色,边框为外圈白色,灰色底板为背景。

blueButton.gif

常见的按钮添加和背景设置如下:

UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(80, 130, 160, 44)];

[button setTitle:@”Test Button” forState:UIControlStateNormal];

// Image with without cap insets

UIImage *buttonImage = [UIImage imageNamed:@”blueButton”];

[button addTarget:self action:@selector(buttonPressed:) forControlEvents: UIControlEventTouchUpInside];

[button setBackgroundImage:buttonImage forState:UIControlStateNormal];

[[self view] addSubview:button];

所得到的按钮会相当悲剧…

button0.gif

边框,特别是左右边框由于按钮frame过大被惨烈拉伸… iOS5中提供了一个新的UIImage方法,resizableImageWithCapInsets:,可以将图片转换为以某一偏移值为偏移的可伸缩图像(偏移值内的图像将不被拉伸或压缩)。

用法引述如下:

resizableImageWithCapInsets:

Creates and returns a new image object with the specified cap insets.

- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets

Parameters

capInsets

The values to use for the cap insets.

Return Value

A new image object with the specified cap insets.

Discussion

You use this method to add cap insets to an image or to change the existing cap insets of an image. In both cases, you get back a new image and the original image remains untouched.

During scaling or resizing of the image, areas covered by a cap are not scaled or resized. Instead, the pixel area not covered by the cap in each direction is tiled, left-to-right and top-to-bottom, to resize the image. This technique is often used to create variable-width buttons, which retain the same rounded corners but whose center region grows or shrinks as needed. For best performance, use a tiled area that is a 1x1 pixel area in size.

输入参数为一个capInsets结构体:

//Defines inset distances for views.

typedef struct {

CGFloat top, left, bottom, right;

} UIEdgeInsets;

分别表示上左下右四个方向的偏移量。于是把上面按钮的UIImage改为如下形式:

// Image with cap insets

UIImage *buttonImage = [[UIImage imageNamed:@”blueButton”]

resizableImageWithCapInsets:UIEdgeInsetsMake(0, 16, 0, 16)];

可以得到如下按钮:

button1.gif

问题得到解决。

但是值得注意的是该方法需要至少iOS5的运行环境,因此对于需要开发支持iOS5之前的App来说是不可行的。替代方案是stretchableImageWithLeftCapWidth:topCapHeight:,但是在iOS5中,这已经是被Deprecated的方法了,而且该方法只能以1px作为重复铺满拉伸区域,无法做到类似渐变等图片效果,是存在一定局限的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个使用UICollectionView来实现九宫格图片显示的简单示例代码: 1. 在Storyboard中拖拽一个UICollectionView控件,并设置其约束和相关属性。 2. 创建一个UICollectionViewCell的子类,命名为ImageCell,并在Storyboard中设置其样式和布局。 3. 在ViewController中添加以下代码: ```swift import UIKit class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate { @IBOutlet weak var collectionView: UICollectionView! let images: [UIImage] = [UIImage(named: "image1")!, UIImage(named: "image2")!, UIImage(named: "image3")!, UIImage(named: "image4")!, UIImage(named: "image5")!, UIImage(named: "image6")!] override func viewDidLoad() { super.viewDidLoad() collectionView.dataSource = self collectionView.delegate = self } // MARK: - UICollectionViewDataSource func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return images.count } func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageCell", for: indexPath) as! ImageCell cell.imageView.image = images[indexPath.row] return cell } // MARK: - UICollectionViewDelegate func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) { // TODO: 处理选中事件 } } ``` 4. 最后,在ImageCell中添加以下代码: ```swift import UIKit class ImageCell: UICollectionViewCell { @IBOutlet weak var imageView: UIImageView! override func awakeFromNib() { super.awakeFromNib() imageView.layer.cornerRadius = 8.0 imageView.layer.masksToBounds = true } } ``` 这样就可以在UICollectionView中显示九宫格图片了。当然,你可以根据自己的需求对代码进行修改和优化。希望对你有帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值