我们在导航栏或者标签栏上设置背景图片时会遇到图片的尺寸不够大,在这里介绍几个关于图片拉伸问题的解决办法
- 1、打开图片,手动更改她的像素大小。
- 2、contentMode
UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake((frame.size.width-20)/2, 5, 20, 20)];
//原图显示,解决图片拉伸问题
imgView.contentMode = UIViewContentModeScaleAspectFit;
imgView.image = [UIImage imageNamed:@"123"];
- 3、CGImageRef
UIImage *image = [[ThemeManager shareThemeManager] getThemeImageWithImageName:@"123.png"];
CGImageRef imageRef = CGImageCreateWithImageInRect(image.CGImage, CGRectMake(10, 0, kScreenWidth, 64));
UIImage *endImage = [UIImage imageWithCGImage:imageRef];
这里要注意的是起点坐标如果设置成(0,0),那么左上角有一点点边角效果,这样就不好看了,所以一般起始点坐标x一般设置>0,假如设置成10,意思就是图片向右边裁剪掉了10个像素点后的位置放在了(0,0)处,这样就解决了边角问题
解决前:
解决后:
- 4、圆角图片
- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight
这个函数是UIImage的一个实例函数,它的功能是创建一个内容可拉伸,而边角不拉伸的图片,需要两个参数,第一个是不拉伸区域和左边框的宽度,第二个参数是不拉伸区域和上边框的宽度。
第一次用这个函数的时候一直搞不懂为什么只要两个参数就行,至少应该指定左上角和右下角,总共四个参数啊。后来读读文档才明白,只需要两个参数就行了。
参数的意义是,如果参数指定10,5。那么,图片左边10个像素,上边5个像素。不会被拉伸,x坐标为11和一个像素会被横向复制,y坐标为6的一个像素会被纵向复制。注意:只是对一个像素进行复制到一定宽度。
附:两个聊天用的汽泡,与参数值。
21,13
15,13
再看看实例,代码如下:
UIImage* image =[UIImage imageNamed:@"image.png"];
UIImageView* imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 400)];
[imageView setImage:[image stretchableImageWithLeftCapWidth:40 topCapHeight:40]];
[self.view addSubview:imageView];
[imageView release];
最后看看结果,不解释:
原图:
结果图:
给Button添加背景图片的拉伸问题解决方法
UIButton实现背景拉伸,即图片两端不拉伸中间拉伸的办法有如下两种:
第一种方法很简单而且使用性更广。做法就是直接拉伸想要setBackgroundImage的image,代码如下:
UIImage *image = [UIImage imageNamed:@"image.png"];
image = [image stretchableImageWithLeftCapWidth:floorf(image.size.width/2) topCapHeight:floorf(image.size.height/2)];
设置了左端帽之后,rightCapWidth = image.size.width - (image.leftCapWidth + 1); 也就是说图片中间的一像素用来拉伸。垂直方向同上。设置之后无论把image放到什么控件中都可以自动拉伸了。
UIImage *buttonImage = [UIImage imageNamed:@"contact.png"];
buttonImage = [buttonImage stretchableImageWithLeftCapWidth:floorf(buttonImage.size.width/2) topCapHeight:floorf(buttonImage.size.height/2)];
UIImage *buttonImageselected = [UIImage imageNamed:@"contactselected.png"];
buttonImage = [buttonImage stretchableImageWithLeftCapWidth:floorf(buttonImage.size.width/2) topCapHeight:floorf(buttonImage.size.height/2)];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(0, 0, 240, 44);
[button setBackgroundImage:buttonImage forState:UIControlStateNormal];
[button setBackgroundImage:buttonImageselected forState:UIControlStateHighlighted];
button.center = CGPointMake(160, 240);
[button setTitle:@"button" forState:UIControlStateNormal];
[button setTitle:@"buttonClick" forState:UIControlStateHighlighted];
[self.view addSubview:button];
第二种方法是在UIButton中加入一个UIImageView,拉伸imageView,然后将button的背景设为clearColor等等。把imageView放入button中,并且sendToBack,得到效果。代码如下:
//刚才imageView拉伸的代码
UIImageView *strechTest = [[UIImageyiView alloc] initWithImage:[UIImage imageNamed:@"contact.png"]];
[strechTest setContentStretch:CGRectMake(0.5f, 0.5f, 0.f, 0.f)];
CGRect frame = strechTest.frame;
frame.size.width += 100;
strechTest.frame = frame;
//把imageView放入button中,并设置为back
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button1.frame = frame;
button1.center = CGPointMake(160, 140);
[button1 addSubview:strechTest];
[button1 sendSubviewToBack:strechTest];
[button1 setBackgroundColor:[UIColor clearColor]];
[button1 setTitle:@"button" forState:UIControlStateNormal];
[button1 setTitle:@"buttonClick" forState:UIControlStateHighlighted];
[self.view addSubview:button];
效果: