iOS头像效果的实现(边框、阴影、可点击)

一、目的:实现一个带有立体感效果的图像

二、效果图:

三、组成介绍:

     1、一个UIImageView (用来显示照片的)

     2、CALayer       (用来显示背景的阴影效果)

     3、手势       (点击照片有反应,可以添加一些查看头像以及改头像的效果)  

四、代码如下:

 1   //添加一个圆形图片,带内边框
 2     UIImageView *headImage=[[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
 3     [headImage setBackgroundColor:[UIColor blueColor]];
 4     headImage.layer.cornerRadius=50;      //设置圆形效果是根据这个imageVeiw的宽度来设定的
 5     headImage.image=[UIImage imageNamed:@"image.png"];
 6     headImage.contentMode=UIViewContentModeScaleAspectFill;
 7     headImage.clipsToBounds=YES;         //这里必须设置将图片剪切成圆形,而阴影效果是在园外的,所以不可以在这个ImageView添加阴影
 8     headImage.layer.borderWidth=3;        //虽然不可以添加阴影效果,但是可以添加一个内边框效果,感觉蛮好看的
 9     headImage.layer.borderColor=[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.6].CGColor;//设置颜色和透明度
10     [self.view addSubview:headImage];
11     //添加背景
12     CALayer *layer=[[CALayer alloc]init];
13     layer.position=headImage.layer.position;        //这里是个人喜好这么写
14     layer.bounds=headImage.bounds;
15     layer.cornerRadius=headImage.layer.cornerRadius;
16     layer.backgroundColor=[UIColor blackColor].CGColor;  //这里必须设置layer层的背景颜色,默认应该是透明的,导致设置的阴影颜色无法显示出来
17     layer.shadowColor=[UIColor grayColor].CGColor;     //设置阴影的颜色
18     layer.shadowRadius=5;               //设置阴影的宽度
19     layer.shadowOffset=CGSizeMake(2, 2);      //设置偏移
20     layer.shadowOpacity=1;
21     [self.view.layer addSublayer:layer];
22     [self.view bringSubviewToFront:headImage];
23     //添加手势
24     UITapGestureRecognizer *tap=[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(clickedTheImage)];//响应方法没写
25     headImage.userInteractionEnabled=YES;   ///必须设置用户交互,手势才有用
26     [headImage addGestureRecognizer:tap];

五??、总结和注意事项

1.给imageView添加了图片并且设置了clipsToBounds后不可显示外部的阴影效果了,因为阴影效果就是在外部设置的,一经剪切就没有了,所以要再加一个CALayer来显示这个阴影效果。

2.给imgeView添加图片时要设置clipsToBounds=YES;这样才可以将图片设置为圆形;

3.imageView的边界效果是

headImage.layer.borderWidth=3;

headImage.layer.borderColor=[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.6].CGColor;

4.要在CALayer层显示阴影效果,必须设置CALayer的背景颜色

5.添加CALayer层之后要将ImageView设置到最前端

6.手势添加后要设置手势的交互,不然不能响应

headImage.userInteractionEnabled=YES;

(作者原创)

时间: 2024-10-12 16:29:27

iOS头像效果的实现(边框、阴影、可点击)的相关文章

swift UI专项训练36 ImageVi图片边框阴影

ImageView是我们经常用到的组件,但是我们发现storyboard中图片的属性编辑器中没有对于图片边框的设计.在view中添加一张普通的图片,效果是这样的: 可以看到,白色背景上的深色图片,效果总是有点突兀,我们想要加一个阴影边框来过渡一下图片和背景,打开图片所属的控制器代码,类中所显示的图片名为image,现在来设置它的边框.在viewDidLoad中输入以下代码: image.layer.backgroundColor = UIColor.orangeColor().CGColor i

CSS3边框 阴影 box-shadow

box-shadow是向盒子添加阴影.支持添加一个或者多个. box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 参数介绍: box-shadow: h-shadow v-shadow blur spread color inset; h-shadow:水平阴影的偏移值,必需,可以为负值. v-shadow:纵向阴影的偏移值,必需,可以为负值. blur:阴影模糊值,可选,不能为负值. spread:阴影的扩展,可选,可以为负值. c

边框阴影box-shadow

边框的阴影: 参数说明: box-shadow:1px 2px 3px 4px #ccc inset: 1px 从原点开始,沿x轴正方向的长度(倘若为负值,为沿x轴负方向的长度) 2px 从原点开始,沿y轴正方向的长度:(倘若为负值,为沿y轴负方向的长度) 3px 阴影的模糊度,只允许为正值 4px 阴影扩展半径 #ccc 阴影颜色 inset 设置为内阴影(如果不写这个值,默认为外阴影) 说明 1. 对于上边,沿x轴方向的偏移量显然没有意义,设为0px: 2. 沿y轴正方向阴影进入div内部,

CSS入门(css简介与样式汇总、CSS的使用方式、CSS样式表的特征、CSS基础选择器和复杂选择器、边框阴影)

一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 CSS :构建HTML元素的样式 样式汇总: color:red 字体颜色 font-size:字体大小 font-family:字体样式 background-color 背景颜色 width:宽度 height:高度 字体使用实例(样式) font-family:字体的种类 font-size:字

Android仿IOS回弹效果 ScrollView回弹 总结

Android仿IOS回弹效果  ScrollView回弹 总结 应项目中的需求  需要仿IOS 下拉回弹的效果 , 我在网上搜了很多 大多数都是拿scrollview 改吧改吧 试了一些  发现总有点小问题 下面的代码是我对大家发布的做了点小修改   觉得没太大问题 package com.example.myscrollview; import android.content.Context; import android.graphics.Rect; import android.util

iOS-设置视图的边框

iOS-设置视图的边框 效果图: 具体代码: //创建视图 UIView * view=[[[UIView alloc]init]autorelease]; view.frame=CGRectMake(0, 0, 270, 250); view.backgroundColor=[UIColor whiteColor]; view.center=self.view.center; [self.view addSubview:view]; //view的边框 CALayer * layer=[vie

提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果

提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果 2014-08-11 17:39 11614人阅读 评论(0) 收藏 举报  分类: iOS相关(20)  文章来自:http://blog.csdn.net/ryantang03/article/details/7877120 MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显示的内容进行自定义,功能很强大,很多项目中都有使用到.到GitHub上可以下载到项目源码

iOS - 毛玻璃效果

iOS - 毛玻璃效果 iOS8之后苹果提供了制作毛玻璃效果的API 就是这个UIVisualEffectView,用这个initWithEffect:去初始化,然后呢,他有两种效果继承自UIVisualEffect.这个父类不用管,什么也不做,主要看他的两个子类UIBlurEffect和UIVibrancyEffect. UIBlurEffect : 这个是影响毛玻璃后面视图的 效果图: UIVibrancyEffect : 这个是影响毛玻璃上的视图的 是不是很漂亮,做起来也不难呢. 先说毛玻

css边框阴影

<style type="text/css">.mydiv{width:250px;height:auto;border:#909090 1px solid;background:#fff;color:#333;filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/-moz-box-shadow: 2px 2px 10px #909090;/