iOS shadow陰影 + 給整個tableview外框添加陰影

最近項目涉及到對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)動效果。大家可以自己試試吊说。

如果能夠解決您的問題請點擊喜歡论咏,這是對我的肯定,哈哈哈哈颁井!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末厅贪,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子雅宾,更是在濱河造成了極大的恐慌养涮,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,222評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件眉抬,死亡現(xiàn)場離奇詭異贯吓,居然都是意外死亡,警方通過查閱死者的電腦和手機蜀变,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,455評論 3 385
  • 文/潘曉璐 我一進店門悄谐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人库北,你說我怎么就攤上這事爬舰。” “怎么了贤惯?”我有些...
    開封第一講書人閱讀 157,720評論 0 348
  • 文/不壞的土叔 我叫張陵洼专,是天一觀的道長。 經(jīng)常有香客問我孵构,道長屁商,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,568評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮蜡镶,結(jié)果婚禮上雾袱,老公的妹妹穿的比我還像新娘。我一直安慰自己官还,他們只是感情好芹橡,可當(dāng)我...
    茶點故事閱讀 65,696評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著望伦,像睡著了一般林说。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上屯伞,一...
    開封第一講書人閱讀 49,879評論 1 290
  • 那天腿箩,我揣著相機與錄音,去河邊找鬼劣摇。 笑死珠移,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的末融。 我是一名探鬼主播钧惧,決...
    沈念sama閱讀 39,028評論 3 409
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼勾习!你這毒婦竟也來了浓瞪?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,773評論 0 268
  • 序言:老撾萬榮一對情侶失蹤语卤,失蹤者是張志新(化名)和其女友劉穎追逮,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體粹舵,經(jīng)...
    沈念sama閱讀 44,220評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡钮孵,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,550評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了眼滤。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片巴席。...
    茶點故事閱讀 38,697評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖诅需,靈堂內(nèi)的尸體忽然破棺而出漾唉,到底是詐尸還是另有隱情,我是刑警寧澤堰塌,帶...
    沈念sama閱讀 34,360評論 4 332
  • 正文 年R本政府宣布赵刑,位于F島的核電站,受9級特大地震影響场刑,放射性物質(zhì)發(fā)生泄漏般此。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,002評論 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望铐懊。 院中可真熱鬧邀桑,春花似錦、人聲如沸科乎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,782評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽茅茂。三九已至捏萍,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間空闲,已是汗流浹背照弥。 一陣腳步聲響...
    開封第一講書人閱讀 32,010評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留进副,地道東北人。 一個月前我還...
    沈念sama閱讀 46,433評論 2 360
  • 正文 我出身青樓悔常,卻偏偏與公主長得像影斑,于是被迫代替她去往敵國和親机打。 傳聞我的和親對象是個殘疾皇子矫户,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,587評論 2 350

推薦閱讀更多精彩內(nèi)容

  • 在iOS中隨處都可以看到絢麗的動畫效果,實現(xiàn)這些動畫的過程并不復(fù)雜残邀,今天將帶大家一窺ios動畫全貌皆辽。在這里你可以看...
    每天刷兩次牙閱讀 8,471評論 6 30
  • 1.nav1.navigationBar.barStyle=UIBarStyleBlack; //改變導(dǎo)航欄背景顏...
    SadMine閱讀 1,565評論 1 4
  • 轉(zhuǎn)載:http://www.reibang.com/p/32fcadd12108 每個UIView有一個伙伴稱為l...
    F麥子閱讀 6,170評論 0 13
  • *7月8日上午 N:Block :跟一個函數(shù)塊差不多,會對里面所有的內(nèi)容的引用計數(shù)+1芥挣,想要解決就用__block...
    炙冰閱讀 2,477評論 1 14
  • 打卡day10:今天上午棟要去參加寫毛筆活動驱闷,他早上說不想去了,我說:“你答應(yīng)老師了空免,如果別人答應(yīng)你了又不去空另,你是...
    沈小丁子閱讀 151評論 0 0