android ui头像圆角化,UIImageView常用操作以及圆角头像的设置

UIImageView，顾名思义，是用来放置图片的。使用Interface

Builder设计界面时，当然可以直接将控件拖进去并设置相关属性，这就不说了，这里讲的是用代码。

1、创建一个UIImageView：

创建一个UIImageView对象有五种方法：

UIImageView *imageView1 = [[UIImageView alloc] init];

UIImageView *imageView2 = [[UIImageView alloc] initWithFrame:(CGRect)];

UIImageView *imageView3 = [[UIImageView alloc] initWithImage:(UIImage *)];

UIImageView *imageView4 = [[UIImageView alloc] initWithImage:(UIImage *) highlightedImage:(UIImage *)];

UIImageView *imageView5 = [[UIImageView alloc] initWithCoder:(NSCoder *)];

比较常用的是前边三个。至于第四个，当这个ImageView的highlighted属性是YES时，显示的就是参数highlightedImage，一般情况下显示的是第一个参数UIImage。

2、frame与bounds属性：

上述创建一个UIImageView的方法中，第二个方法是在创建时就设定位置和大小。

当之后想改变位置时，可以重新设定frame属性：

imageView.frame = CGRectMake(CGFloat x, CGFloat y, CGFloat width, CGFloat heigth);

注意到UIImageView还有一个bounds属性

imageView.bounds = CGRectMake(CGFloat x, CGFloat y, CGFloat width, CGFloat heigth);

那么这个属性跟frame有什么区别呢？

我的理解是，frame设置其位置和大小，而bounds只能设置其大小，其参数中的x、y不起作用即便是之前没有设定frame属性，控件最终的位置也不是bounds所设定的参数。bounds实现的是将UIImageView控件以原来的中心为中心进行缩放。例如有如下代码：

imageView.frame = CGRectMake(0, 0, 320, 460);

imageView.bounds = CGRectMake(100, 100, 160, 230);

执行之后，这个imageView的位置和大小是(80， 115， 160，

230)。

3、contentMode属性：

这个属性是用来设置图片的显示方式，如居中、居右，是否缩放等，有以下几个常量可供设定：

UIViewContentModeScaleToFill

UIViewContentModeScaleAspectFit

UIViewContentModeScaleAspectFill

UIViewContentModeRedraw

UIViewContentModeCenter

UIViewContentModeTop

UIViewContentModeBottom

UIViewContentModeLeft

UIViewContentModeRight

UIViewContentModeTopLeftUIViewContentModeTopRight

UIViewContentModeBottomLeft

UIViewContentModeBottomRight

注意以上几个常量，凡是没有带Scale的，当图片尺寸超过

ImageView尺寸时，只有部分显示在ImageView中。UIViewContentModeScaleToFill属性会导致图片变形。UIViewContentModeScaleAspectFit会保证图片比例不变，而且全部显示在ImageView中，这意味着ImageView会有部分空白。UIViewContentModeScaleAspectFill也会证图片比例不变，但是是填充整个ImageView的，可能只有部分图片显示出来。

前三个效果如下图：

UIViewContentModeScaleToFillUIViewContentModeScaleAspectFitUIViewContentModeScaleAspectFill

4、更改位置

更改一个UIImageView的位置，可以

4.1 直接修改其frame属性

4.2 修改其center属性：

imageView.center = CGPointMake(CGFloat x, CGFloat y);

center属性指的就是这个ImageView的中间点。

4.3 使用transform属性

imageView.transform = CGAffineTransformMakeTranslation(CGFloat dx, CGFloat dy);

其中dx与dy表示想要往x或者y方向移动多少，而不是移动到多少。

5、旋转图像

imageView.transform = CGAffineTransformMakeRotation(CGFloat angle);

要注意它是按照顺时针方向旋转的，而且旋转中心是原始ImageView的中心，也就是center属性表示的位置。

这个方法的参数angle的单位是弧度，而不是我们最常用的度数，所以可以写一个宏定义：

#define degreesToRadians(x) (M_PI*(x)/180.0)

用于将度数转化成弧度。下图是旋转45度的情况：

6、缩放图像

还是使用transform属性：

imageView.transform = CGAffineTransformMakeScale(CGFloat scale_w, CGFloat scale_h);

其中，CGFloat scale_w与CGFloat

scale_h分别表示将原来的宽度和高度缩放到多少倍，下图是缩放到原来的0.6倍的示意图：

7、播放一系列图片

imageView.animationImages = imagesArray;

// 设定所有的图片在多少秒内播放完毕

imageView.animationDuration = [imagesArray count];

// 不重复播放多少遍，0表示无数遍

imageView.animationRepeatCount = 0;

// 开始播放

[imageView startAnimating];

其中，imagesArray是一些列图片的数组。如下图：

8、为图片添加单击事件：

imageView.userInteractionEnabled = YES;

UITapGestureRecognizer *singleTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapImageView:)];

[imageView addGestureRecognizer:singleTap];

一定要先将userInteractionEnabled置为YES，这样才能响应单击事件。

9、其他设置

imageView.hidden = YES或者NO;// 隐藏或者显示图片

imageView.alpha = (CGFloat) al;// 设置透明度

imageView.highlightedImage = (UIImage *)hightlightedImage;

// 设置高亮时显示的图片

imageView.image = (UIImage *)image;

// 设置正常显示的图片

[imageView sizeToFit];// 将图片尺寸调整为与内容图片相同

UIImageView

的contentMode这个属性是用来设置图片的显示方式，如居中、居右，是否缩放等，有以下几个常量可供设定：

typedefNS_ENUM(NSInteger, UIViewContentMode) {

UIViewContentModeScaleToFill,

UIViewContentModeScaleAspectFit,//

contents scaled to fit with fixed aspect. remainder is

transparent

UIViewContentModeScaleAspectFill,//

contents scaled to fill with fixed aspect. some portion of content

may be clipped.

UIViewContentModeRedraw,// redraw on

bounds change (calls -setNeedsDisplay)

UIViewContentModeCenter,// contents

remain same size. positioned adjusted.

UIViewContentModeTop,

UIViewContentModeBottom,

UIViewContentModeLeft,

UIViewContentModeRight,

UIViewContentModeTopLeft,

UIViewContentModeTopRight,

UIViewContentModeBottomLeft,

UIViewContentModeBottomRight,

};

以上几个常量，凡是没有带Scale的，当图片尺寸超过

ImageView尺寸时，只有部分显示在ImageView中。UIViewContentModeScaleToFill属性会导致图片变形。UIViewContentModeScaleAspectFit会保证图片比例不变，而且全部显示在ImageView中，这意味着ImageView会有部分空白。UIViewContentModeScaleAspectFill也会证图片比例不变，但是是填充整个ImageView的，可能只有部分图片显示出来。

self.image = UIViewContentModeScaleToFill;如图1

图1

self.image =

UIViewContentModeScaleAspectFit;如图2

图2

self.image =

UIViewContentModeScaleAspectFill;如图3

图3

其他属性，可以根据字面意思来理解，分别是显示图片中间的范围，显示图片头部的范围，以此类推。

所以大家在开发过程中，图片变形了的话，简单设置一下就好了。

还有一种需求，就是当需要仅仅把图片的内容拉伸，而边角不拉伸的情况，类似于聊天窗口的气泡，可拉伸长短，而图片边角不失贞变形，就是需要用这个方法：

- (UIImage

*)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth

topCapHeight:(NSInteger)topCapHeight

这个函数是UIImage的一个实例函数，它的功能是创建一个内容可拉伸，而边角不拉伸的图片，需要两个参数，第一个是不拉伸区域和左边框的宽度，第二个参数是不拉伸区域和上边框的宽度。

第一次用这个函数的时候一直搞不懂为什么只要两个参数就行，至少应该指定左上角和右下角，总共四个参数啊。后来读读文档才明白，只需要两个参数就行了。

根据设置的宽度和高度，将接下来的一个像素进行左右扩展和上下拉伸。

注意：可拉伸的范围都是距离leftCapWidth后的1竖排像素，和距离topCapHeight后的1横排像素。

参数的意义是，如果参数指定10，5。那么，图片左边10个像素，上边5个像素。不会被拉伸，x坐标为11和一个像素会被横向复制，y坐标为6的一个像素会被纵向复制。注意：只是对一个像素进行复制到一定宽度。而图像后面的剩余像素也不会被拉伸。

UIImage*imageTest = [UIImage

imageNamed:@"rounded"];

UIImageView*imageView = [[UIImageView

alloc]initWithFrame:CGRectMake(40,63,240,128)];

UIImage*newImageTest = [imageTest

stretchableImageWithLeftCapWidth:imageTest.size.width*0.5topCapHeight:imageTest.size.height*0.5];

[imageView setImage:newImageTest];

[self.view addSubview:imageView];

原来是这样的：

图片本来是这样的:

设置后，图片显示是这样的:

当然如果在Xib或者StoryBoard中可以通过View 的Stretching属性来设置。

图

也能达到这样的效果。

很多朋友会有这样的需求，从别的地方得到一张图片，但是图片色调和app主色调不一致，又不想重新用ps换色

一种简单的修改原图片的方法: /****/

UIImageView

*tempImageView = [[UIImageView alloc] init];

leftWaringImage.frame = CGRectMake(10, 2, 16,

16);

tempImageView.image = [[UIImage

imageNamed:@"topWaringLeftImage"]

imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

tempImageView.tintColor = kMainColor;

//kMainColor可以换成自己喜欢的颜色

/****/

tempImageView的图片就从原来颜色变成自己想要的颜色了

UIImageView图片变成圆角

前言

随着腾讯QQ的普及，现在越来越多的社交类APP在显示好友头像时，都选择用圆形头像，效果如下(不包括黑底)：

在ios开发中，大致有以下三种方案来实现圆形头像效果。

方案一：用Quartz2D绘制

具体代码如下：

+ (UIImage *)circleImageWithName:(NSString *)name borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor

{

// 1.加载原图

UIImage *oldImage = [UIImage imageNamed:name];

// 2.开启上下文

CGFloat imageW = oldImage.size.width + 22 * borderWidth;

CGFloat imageH = oldImage.size.height + 22 * borderWidth;

CGSize imageSize = CGSizeMake(imageW, imageH);

UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);

// 3.取得当前的上下文,这里得到的就是上面刚创建的那个图片上下文

CGContextRef ctx = UIGraphicsGetCurrentContext();

// 4.画边框(大圆)

[borderColor set];

CGFloat bigRadius = imageW * 0.5; // 大圆半径

CGFloat centerX = bigRadius; // 圆心

CGFloat centerY = bigRadius;

CGContextAddArc(ctx, centerX, centerY, bigRadius, 0, M_PI * 2, 0);

CGContextFillPath(ctx); // 画圆。As a side effect when you call this function, Quartz clears the current path.

// 5.小圆

CGFloat smallRadius = bigRadius - borderWidth;

CGContextAddArc(ctx, centerX, centerY, smallRadius, 0, M_PI * 2, 0);

// 裁剪(后面画的东西才会受裁剪的影响)

CGContextClip(ctx);

// 6.画图

[oldImage drawInRect:CGRectMake(borderWidth, borderWidth, oldImage.size.width, oldImage.size.height)];

// 7.取图

UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

// 8.结束上下文

UIGraphicsEndImageContext();

return newImage;

}

方案二：使用CALayer

CALayer是屏幕上的一个具有可见内容的矩形区域，每个UIView都有一个根CALayer，其所有的绘制(视觉效果)都是在这个layer上进行的。

通过UIView的layer属性可以访问这个层。

代码如下：

self.imageView2.image = [UIImage imageNamed:@"xxx"];

//告诉layer将位于它之下的layer都遮盖住

self.imageView2.layer.masksToBounds = YES; //设置layer的圆角,刚好是自身宽度的一半，这样就成了圆形

self.imageView2.layer.cornerRadius = self.imageView2.bounds.size.width * 0.5;

//设置边框的宽度为20

self.imageView2.layer.borderWidth = 5.0;

//设置边框的颜色

self.imageView2.layer.borderColor = [UIColor whiteColor].CGColor;

方案三：在storyboard或xib中设置。

在Inspector面板中找到User

Defined Runtime Attributes，添加如下键值对，如下图

可以看出这些键值对，其实就是方案二中所写的代码。

总结：

方案一虽然代码写的比较多，但是可扩展性高。

方案二代码简洁，便于维护，推荐使用此方案。

方案三优点是在控制器里不用写一行代码，但是在键值对里写死了cornerRadius的值，缺点是不便于后期维护。

方案四

考虑到工程中会设置大量的图片圆角,以上两种方法虽然可以实现圆角的效果,但是会印象性能,为了以后用起来方便还是自己封装一套设置图片圆角的方法比较实用些,接下来我们就来封装一下实现图片圆角功能的代码:

可以为UIImage添加分类,代码如下:

#import

@interface UIImage (PDExtension)

- (instancetype)circleImage;

+ (instancetype)circleImage:(NSString *)image;

@end

方法的实现：

#import "UIImage+PDExtension.h"

@implementation UIImage (PDExtension)

- (instancetype)circleImage

{

UIGraphicsBeginImageContext(self.size);

CGContextRef

ctx = UIGraphicsGetCurrentContext();

CGRect rect

= CGRectMake(0, 0, self.size.width, self.size.height);

CGContextAddEllipseInRect(ctx, rect);

CGContextClip(ctx);

[self

drawInRect:rect];

UIImage

*image = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

return

image;

}

+ (instancetype)circleImage:(NSString *)image

{

return

[[self imageNamed:image] circleImage];

}

@end

UIImage的分分类方法的用法:

下面是先设置图片圆角,然后设置按钮的图片

[self.iconButton setImage:[image circleImage] forState:UIControlStateNormal];

方案五

考虑到很多直接设置UIImageView圆角,接下来就为UIImageView在添加一个分类

#import

@interface UIImageView (PDExtension)

// 没有占位图片

- (void)setHeaderUrl:(NSString *)url;

// 带有占位图片

- (void)setHeaderUrl:(NSString *)url

withplaceholderImageName:(NSString *)placeholderImageName;

@end

方法的实现：

@implementation UIImageView

(PDExtension)

- (void)setHeaderUrl:(NSString *)url

{

[self

setCircleHeaderUrl:url];

}

- (void)setCircleHeaderUrl:(NSString *)url

{

[self

sd_setImageWithURL:[NSURL URLWithString:url]

placeholderImage:[UIImage imageNamed:@"img_studio_default"]

completed:^(UIImage *image, NSError *error, SDImageCacheType

cacheType, NSURL *imageURL) {

if (image == nil) return;

self.image = [image circleImage];

}];

}

- (void)setHeaderUrl:(NSString *)url

withplaceholderImageName:(NSString *)placeholderImageName

{

[self

sd_setImageWithURL:[NSURL URLWithString:url]

placeholderImage:[UIImage imageNamed:placeholderImageName]

completed:^(UIImage *image, NSError *error, SDImageCacheType

cacheType, NSURL *imageURL) {

if (image == nil) return;

self.image = [image circleImage];

}];

}

@end

具体的用法：

[self.iconImageView setHeaderUrl:topic.boardheadportrait];

注意点:如果是用的UIImageView是分类方法,这个类的实现是以UIImage为基础的,里面用到了UIImage的方法,所以用的时候记得把UIImage的分类也要写上,还有用分类方法的时候记得导入头文件......