先不说那么多先上图看看效果是怎么样的
74FD213A-99EB-4A38-8BE9-842E2F0D6EE9.png
看到这个ui效果每个人都会自己不同的做法，现在我来介绍一下我是怎么做的，先来说下思路吧
1 要处理的问题是什么
（1） 先找到制作这个效果需要的处理的问题，很显而易见的这个ui最需要处理的就是从上到小的渐变效果，渐变程度也是越来越深的
2 需要怎么做
（1）我们先来简化一下,要怎么把这5个图纵向的画出来
B1B48840-576E-40E6-82F9-CAC63A823F35.png
让我来说下我的思路吧：
这个我使用tableview 来做到的，我吧5张图，分别做成了5个cell，因为cell是紧密相连的，就形成了一个图片轴的感觉，来看我的cell怎么样的估计大家就明白了，cell是用xib做的
374ABC58-4178-4A41-A9D7-CFDC9D60CE23.png
，
（2）那么来到第二点看向我们是做到渐变的，先让每个cell来做渐变我们看看效果是怎么样的
这里先上一段代码吧看看做渐变的方法是怎么样的
-(void)setJianBian
{
//添加渐变图层
CAGradientLayer *newShadow = [[CAGradientLayer alloc] init];
CGRect newShadowFrame = CGRectMake(0, 0, 40, 40);
newShadow.frame = newShadowFrame; newShadow.opacity = 0.7;
//降低图层透明度，防止完全遮盖
newShadow.cornerRadius =20;
_view.layer.cornerRadius = 20;
//添加渐变的颜色组合
newShadow.colors = [NSArray arrayWithObjects:(id)[UIColor greenColor].CGColor,(id)[UIColor redColor].CGColor,nil];
[_view.layer addSublayer:newShadow];
//圆形头像添加渐变图层
CAGradientLayer *newShadow1 = [[CAGradientLayer alloc] init];
CGRect newShadowFrame1= CGRectMake(0, 0, 10, 68);
newShadow1.frame = newShadowFrame1;
newShadow1.opacity = 0.7;
//添加渐变的颜色组合
newShadow1.colors = [NSArray arrayWithObjects:(id)[UIColor greenColor].CGColor,(id)[UIColor redColor].CGColor,nil];
[_line.layer addSublayer:newShadow1];
}
我在cell 里面调用这个关键的方法 每个cell都产生了渐变的效果，虽然还是不理想但已经距离成功就差一小步，也是关键的一步，效果如下
9F0B5A00-93CB-4304-961A-0F21A75F0AB8.png
（3）第三步那就上从上之下的渐变效果
如果要达到从上至下的渐变效果 先看一下思路吧，
如果要达到渐变的效果，那么每个cell都必须有不同的渐变值，而且这个渐变值还要越来越大，那么才看看上面那个方法，要修改这个渐变值，我们只能根据形成渐变开始的颜色和最终的颜色来形成一个渐变值，也即是说，从上到下的cell 渐变图层的起始颜色和终止颜色
那么在上一段代码看看
-(void)setJianBianWithBeforeColor:(UIColor *)beforeColor afterColr:(UIColor *)afterColor
{
//添加渐变图层
CAGradientLayer *newShadow = [[CAGradientLayer alloc] init];
CGRect newShadowFrame = CGRectMake(0, 0, 40, 40);
newShadow.frame = newShadowFrame; newShadow.opacity = 0.7;
//降低图层透明度，防止完全遮盖
newShadow.cornerRadius =20;
_view.layer.cornerRadius = 20;
//添加渐变的颜色组合
newShadow.colors = [NSArray arrayWithObjects:(id)beforeColor.CGColor,(id)afterColor.CGColor,nil];
[_view.layer addSublayer:newShadow];
//圆形头像添加渐变图层
CAGradientLayer *newShadow1 = [[CAGradientLayer alloc] init];
CGRect newShadowFrame1= CGRectMake(0, 0, 10, 68);
newShadow1.frame = newShadowFrame1;
newShadow1.opacity = 0.7;
//添加渐变的颜色组合
newShadow1.colors = [NSArray arrayWithObjects:(id)beforeColor.CGColor,(id)afterColor.CGColor,nil];
[_line.layer addSublayer:newShadow1];
}
修改了这个方法之后只要每次调配起始颜色和终止颜色就可以达到效果
最好上一下我的githup 链接 希望大神，有更好的想法可以交流指教一下，
https://github.com/heysunnyboy/jianbianui
