今日接到一個需求，UI設(shè)計圖如下：
UI設(shè)計圖.jpg
以正常的邏輯思維，沒一個卡片應(yīng)該是一個section，上面的日期和錢數(shù)，應(yīng)該是section頭，下面有一個距離卡片底部8像素高度的白色區(qū)域，應(yīng)該為section尾。里面為該section對應(yīng)的cell列表。
但是問題來了，我們可以很方便的給section Header加陰影，但是如何將Seciton作為一個整體來加陰影呢？
我最初的做法是，將一個卡片當做一個view，里面的列表用自定制的Button來實現(xiàn)，通過For循環(huán)來依次創(chuàng)建Button進行布局。
- 好處是：UI方面可以很輕松的實現(xiàn)卡片的陰影效果；
- 壞處是：cell內(nèi)的Button個數(shù)不固定，如果條數(shù)多的畫會特別容易卡，而且在快速滑動的時候，可以看到卡片有卡頓的現(xiàn)象。
基于上述原因，我改用UIBezierPath指定陰影的路徑來實現(xiàn)卡片效果。
但是section頭部和尾部，我分別可以指定上左右和下左右的陰影路徑，但是對于列表，因為UIBezierPath只能畫一條連續(xù)的線，無法單獨指定左邊和右邊的路徑，如果我通過把上下的陰影寫在view內(nèi)部，這樣展示的時候看起來沒有上下陰影，但是滑動的時候，每個cell都有了邊框。而且這樣組裝起來的陰影，看起來不是特別的平滑，故又棄之！
最后，安卓同事點醒了我，可以通過漸變view來做陰影呀！
- 1、section頭部分，分別在上，左，右添加了一個透明的view，通過設(shè)置View的背景色來達到陰影效果。
UIView *leftView = [[UIView alloc] initWithFrame:CGRectMake(2, 4, 6, 48)];
[view addSubview:leftView];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = leftView.bounds;
gradient.colors = [NSArray arrayWithObjects:
(id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) blue:(0/255.0) alpha:0.0].CGColor,
(id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) blue:(0/255.0) alpha:0.12].CGColor, nil];
gradient.startPoint = CGPointMake(0, 0);
gradient.endPoint = CGPointMake(1, 0);
[leftView.layer addSublayer:gradient];
UIView *rightView = [[UIView alloc] initWithFrame:CGRectMake(kScreenWidth - 8, 4, 6, 48)];
[view addSubview:rightView];
CAGradientLayer *gradientR = [CAGradientLayer layer];
gradientR.frame = rightView.bounds;
gradientR.colors = [NSArray arrayWithObjects:
(id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) blue:(0/255.0) alpha:0.12].CGColor,
(id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) blue:(0/255.0) alpha:0.0].CGColor, nil];
gradientR.startPoint = CGPointMake(0, 0);
gradientR.endPoint = CGPointMake(1, 0);
[rightView.layer addSublayer:gradientR];
UIView *topV = [[UIView alloc] initWithFrame:CGRectMake(6, 0, kScreenWidth - 12, 4)];
[view addSubview:topV];
CAGradientLayer *gradientT = [CAGradientLayer layer];
gradientT.frame = topV.bounds;
gradientT.colors = [NSArray arrayWithObjects:
(id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) blue:(0/255.0) alpha:0.12].CGColor,
(id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) blue:(0/255.0) alpha:0.0].CGColor, nil];
gradientT.startPoint = CGPointMake(0, 1);
gradientT.endPoint = CGPointMake(0, 0);
[topV.layer addSublayer:gradientT];
- 2、section尾部分同上，設(shè)置下，左，右漸變背景色
UIView *leftView = [[UIView alloc] initWithFrame:CGRectMake(2, 0, 6, 8)];
[view addSubview:leftView];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = leftView.bounds;
gradient.colors = [NSArray arrayWithObjects:
(id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) blue:(0/255.0) alpha:0.12].CGColor,
(id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) blue:(0/255.0) alpha:0.0].CGColor, nil];
gradient.startPoint = CGPointMake(1, 0);
gradient.endPoint = CGPointMake(0, 0);
[leftView.layer addSublayer:gradient];
UIView *rightView = [[UIView alloc] initWithFrame:CGRectMake(kScreenWidth - 8, 0, 6, 8)];
[view addSubview:rightView];
CAGradientLayer *gradientR = [CAGradientLayer layer];
gradientR.frame = rightView.bounds;
gradientR.colors = [NSArray arrayWithObjects:
(id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) blue:(0/255.0) alpha:0.12].CGColor,
(id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) blue:(0/255.0) alpha:0.0].CGColor, nil];
gradientR.startPoint = CGPointMake(0, 0);
gradientR.endPoint = CGPointMake(1, 0);
[rightView.layer addSublayer:gradientR];
UIView *bottomV = [[UIView alloc] initWithFrame:CGRectMake(6, 8, kScreenWidth - 12, 4)];
[view addSubview:bottomV];
CAGradientLayer *gradientB = [CAGradientLayer layer];
gradientB.frame = bottomV.bounds;
gradientB.colors = [NSArray arrayWithObjects:
(id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) blue:(0/255.0) alpha:0.12].CGColor,
(id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) blue:(0/255.0) alpha:0.0].CGColor, nil];
gradientB.startPoint = CGPointMake(0, 0);
gradientB.endPoint = CGPointMake(0, 1.0);
[bottomV.layer addSublayer:gradientB];
- 3、cell部分，設(shè)置左右兩個方向的陰影
UIView *leftView = [[UIView alloc] initWithFrame:CGRectMake(2, 0, 6, 72)];
[self addSubview:leftView];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = leftView.bounds;
gradient.colors = [NSArray arrayWithObjects:
(id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) blue:(0/255.0) alpha:0.12].CGColor,
(id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) blue:(0/255.0) alpha:0.0].CGColor, nil];
gradient.startPoint = CGPointMake(1, 0);
gradient.endPoint = CGPointMake(0, 0);
[leftView.layer addSublayer:gradient];
UIView *rightView = [[UIView alloc] initWithFrame:CGRectMake(kScreenWidth - 8, 0, 6, 72)];
[self addSubview:rightView];
CAGradientLayer *gradientR = [CAGradientLayer layer];
gradientR.frame = rightView.bounds;
gradientR.colors = [NSArray arrayWithObjects:
(id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) blue:(0/255.0) alpha:0.12].CGColor,
(id)[UIColor colorWithRed:(0/255.0) green:(0/255.0) blue:(0/255.0) alpha:0.0].CGColor, nil];
gradientR.startPoint = CGPointMake(0, 0);
gradientR.endPoint = CGPointMake(1, 0);
[rightView.layer addSublayer:gradientR];
這里需要注意的是：
- 1、每個左右漸變View的寬度需要一致。
- 2、上下漸變view長度可以稍微長一點點，這樣做出來邊角也有陰影的效果。
- 3、所有的漸變顏色設(shè)置需要保持一致，否則做出來的陰影會不平滑。
- 4、startPoint和endPoint代表的view的漸變方向。只有0和1兩個值。例如如果x從1到0，則代表從右向左漸變。
這樣做也有缺點：那就是卡片的圓角處理暫未實現(xiàn)。如果有人有更好的方法，歡迎提出指正。謝謝！
