今日接到一個(gè)需求抢野，UI設(shè)計(jì)圖如下：
UI設(shè)計(jì)圖.jpg
以正常的邏輯思維辕棚，沒一個(gè)卡片應(yīng)該是一個(gè)section，上面的日期和錢數(shù)扁瓢，應(yīng)該是section頭引几，下面有一個(gè)距離卡片底部8像素高度的白色區(qū)域伟桅，應(yīng)該為section尾楣铁。里面為該section對(duì)應(yīng)的cell列表。
但是問題來(lái)了盖腕，我們可以很方便的給section Header加陰影溃列，但是如何將Seciton作為一個(gè)整體來(lái)加陰影呢膛薛？
我最初的做法是，將一個(gè)卡片當(dāng)做一個(gè)view哄啄，里面的列表用自定制的Button來(lái)實(shí)現(xiàn)雅任，通過(guò)For循環(huán)來(lái)依次創(chuàng)建Button進(jìn)行布局。
- 好處是：UI方面可以很輕松的實(shí)現(xiàn)卡片的陰影效果增淹；
- 壞處是：cell內(nèi)的Button個(gè)數(shù)不固定椿访，如果條數(shù)多的畫會(huì)特別容易卡，而且在快速滑動(dòng)的時(shí)候虑润，可以看到卡片有卡頓的現(xiàn)象成玫。
基于上述原因，我改用UIBezierPath指定陰影的路徑來(lái)實(shí)現(xiàn)卡片效果拳喻。
但是section頭部和尾部哭当，我分別可以指定上左右和下左右的陰影路徑，但是對(duì)于列表冗澈，因?yàn)閁IBezierPath只能畫一條連續(xù)的線钦勘，無(wú)法單獨(dú)指定左邊和右邊的路徑，如果我通過(guò)把上下的陰影寫在view內(nèi)部，這樣展示的時(shí)候看起來(lái)沒有上下陰影，但是滑動(dòng)的時(shí)候虎囚，每個(gè)cell都有了邊框适揉。而且這樣組裝起來(lái)的陰影炼邀，看起來(lái)不是特別的平滑，故又棄之！
最后，安卓同事點(diǎn)醒了我袜漩，可以通過(guò)漸變view來(lái)做陰影呀座掘！
- 1嬉愧、section頭部分，分別在上，左挂疆，右添加了一個(gè)透明的view视事，通過(guò)設(shè)置View的背景色來(lái)達(dá)到陰影效果。
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è)置左右兩個(gè)方向的陰影
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厉亏、每個(gè)左右漸變View的寬度需要一致。
- 2恬试、上下漸變view長(zhǎng)度可以稍微長(zhǎng)一點(diǎn)點(diǎn)窝趣，這樣做出來(lái)邊角也有陰影的效果幻馁。
- 3、所有的漸變顏色設(shè)置需要保持一致铲咨，否則做出來(lái)的陰影會(huì)不平滑。
- 4济赎、startPoint和endPoint代表的view的漸變方向滑凉。只有0和1兩個(gè)值统扳。例如如果x從1到0，則代表從右向左漸變畅姊。
這樣做也有缺點(diǎn)：那就是卡片的圓角處理暫未實(shí)現(xiàn)咒钟。如果有人有更好的方法，歡迎提出指正若未。謝謝朱嘴！
