最近項目涉及到對tableView設(shè)置陰影效果绍赛,實現(xiàn)技術(shù)上不難骡技,主要是思路鸣个。這里記錄下來,也方便大家學(xué)習(xí)布朦。
陰影是對layer層的操作囤萤。CALayer是屏幕上的一個矩形區(qū)域,在每一個UIView中都包含一個根CALayer是趴,在UIView上的所有視覺效果都是在這個Layer上進行的涛舍。
通常我們可以對CALayer進行一下操作
1、層的大小尺寸
2唆途、背景色
3富雅、內(nèi)容(可以填充圖片或者使用Core Graphics繪制的內(nèi)容)
4掸驱、矩形是否使用圓角
5、矩形是否有陰影
對shadow最簡單的使用時通過layer直接設(shè)置shadow屬性没佑,這樣設(shè)置的shadow會對整個view設(shè)置一個陰影效果毕贼。代碼如下:
self.coverView.layer.shadowOffset=CGSizeMake(0,0);//往x方向偏移0,y方向偏移0
self.coverView.layer.shadowOpacity=0.3;//設(shè)置陰影透明度
self.coverView.layer.shadowColor= [UIColorblackColor].CGColor;//設(shè)置陰影顏色
self.coverView.layer.shadowRadius=5;//設(shè)置陰影半徑
然而蛤奢,如果我們想自定義一些特殊的陰影區(qū)域怎么辦呢鬼癣,別慌。這個時候我們就需要使用到shadowPath這個屬性啤贩〈海可以事先定義一個UIBezierPath的路徑。然后對路徑設(shè)置陰影效果痹屹。
CGFloatborder =5;
UIBezierPath*path= [UIBezierPathbezierPath];
[pathmoveToPoint:CGPointMake(border, cell.height)];
[pathaddArcWithCenter:CGPointMake(border, cell.height- border) radius:border startAngle:M_PI_4 endAngle:M_PI_2 clockwise:YES];
[pathaddLineToPoint:CGPointMake(cell.width, border)];
[pathaddLineToPoint:CGPointMake(cell.width, cell.height- border)];
[pathaddArcWithCenter:CGPointMake(cell.width- border, cell.height- border) radius:border startAngle:0endAngle:M_PI_4 clockwise:YES];
[pathaddLineToPoint:CGPointMake(cell.width- border, cell.height)];
[pathaddLineToPoint:CGPointMake(border, cell.height)];
cell.layer.shadowPath= path.CGPath;
cell.layer.shadowColor=kBGGaryColor.CGColor;//shadowColor陰影顏色
cell.layer.shadowOffset=CGSizeMake(0.6,0.6);//shadowOffset陰影偏移,x向右偏移4章郁,y向下偏移4,默認(0, -3),這個跟shadowRadius配合使用
cell.layer.shadowOpacity=0.8;//陰影透明度痢掠,默認0
cell.layer.shadowRadius=1;//陰影半徑驱犹,默認3
cell.layer.masksToBounds=NO;
cell.contentView.layer.cornerRadius=10.0f;
cell.contentView.layer.borderWidth=0.5f;
cell.contentView.layer.borderColor= [UIColorclearColor].CGColor;
cell.contentView.layer.masksToBounds=YES;
cell.contentView.clipsToBounds=YES;
下面我們要回到正題,如何對tableView設(shè)置陰影效果足画。
先說如何對cell添加一個陰影效果
cell.layer.shadowOffset=CGSizeMake(0, 1);
cell.layer.shadowColor= [UIColorgrayColor].CGColor;
cell.layer.shadowRadius= 1;
cell.layer.shadowOpacity= .5f;
CGRectshadowFrame = cell.layer.bounds;
CGPathRefshadowPath = [UIBezierPathbezierPathWithRect:shadowFrame].CGPath; ? ?cell.layer.shadowPath= shadowPath;
注意:不要給section footer 或 section header設(shè)置背景色雄驹,否則無效果。
當(dāng)然淹辞,如果你一定要進行特別的操作医舆,那就可以在cell中添加一圈小一層的view,然后對這個view進行shadow的設(shè)置象缀。
接下來講講如何對一個tableview設(shè)置shadow效果
或許你做過這樣的操作蔬将,對一個tableview(scrollView)進行shadow的設(shè)置,but 為什么沒顯示央星!bingo霞怀,因為shadow默認設(shè)置clipsToBounds=YES,而shadow需要開啟clipsToBounds = NO莉给。
所以最直接的操作
tableView.layer.shadowColor = UIColor(white: 000000, alpha: 0.3).CGColor
tableView.layer.shadowOffset = CGSize(width: -6, height: 6)
tableView.layer.shadowOpacity = 1
tableView.clipsToBounds = false //這句最重要了毙石,不然就顯示不出來
這個時候有人可能就會碰到tableView顯示的問題了,如果clipsToBounds=NO颓遏,那么scrollView超出部分就會顯示出來徐矩。如果你的scrollView沒有覆蓋整個屏幕,我想這個不會是你想要的效果叁幢!那么怎么辦呢滤灯!
沒錯,我也么辦法解決 哈哈哈哈哈哈。
所以我采用另外的一個方法迂回了鳞骤。歷史教育會我們窒百,農(nóng)村包圍城市是是否有必要的,雖然方法low了點豫尽,但實用不是贝咙。
代碼很簡單,主要是思路:
創(chuàng)建一個coverView拂募,覆蓋在tableview的下面,對coverView進行shadow的設(shè)置窟她,當(dāng)然別忘了設(shè)置coverViewcover的背景色陈症,花花綠綠都可以,別透明就行震糖。
PS:有些人可能會另外實現(xiàn)淘寶商品的效果录肯。這個就涉及到scrollView的聯(lián)動效果。大家可以自己試試吊说。