先不說那么多先上圖看看效果是怎么樣的
74FD213A-99EB-4A38-8BE9-842E2F0D6EE9.png
看到這個ui效果每個人都會自己不同的做法油猫，現(xiàn)在我來介紹一下我是怎么做的蜻拨，先來說下思路吧
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
