前言
相信大家在開發(fā)的過程中,都遇到過各式各樣的UI設計胞谈,最近開發(fā)項目的時候就遇到給指定方向的控件邊框添加陰影尘盼。話不多說,直接上圖吧烦绳。
圖1.png
圖2.png
分析需求
項目中用到的這個控件是一個自定義的UITextView,需要達到的需求就是有黑色的邊框卿捎,有圓角的處理,仔細看的小伙伴可以還發(fā)現(xiàn)了一個需求就是圖1的上邊框是帶陰影效果的径密,圖2的下邊框是帶陰影效果的午阵。系統(tǒng)自帶的有設置陰影的,但是它是同時四邊一起設置享扔,這就有點不符合我們的需求趟庄。那我們要怎么處理呢括细?
解決問題
系統(tǒng)的處理陰影的問題伪很,是從控件的layer層去設置戚啥,我們的出發(fā)點也是抓住layer層去處理,自定義一個和控件的上邊界重合的layer锉试,對它來進行設置猫十。
我們用label來做實驗,先初始化一個lable呆盖,并進行簡單的設置:
//init lable
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(CGRectGetMidX(self.view.frame) - 150, CGRectGetMidY(self.view.frame) - 20, 300, 40)];
label.layer.borderWidth = 1.5;
label.layer.borderColor = [UIColor blackColor].CGColor;
label.layer.cornerRadius = 5;
label.layer.masksToBounds = YES;
[self.view addSubview:label];
效果如下:
圖3.png
接下來就是實現(xiàn)圖1 那樣的效果拖云,上邊界帶陰影部分。
//set the shadow on the top edge
CALayer *topLayer = [CALayer layer];
topLayer.frame = CGRectMake(0, 1.5,label.frame.size.width,0.5);
topLayer.shadowColor = [UIColor colorWithWhite:0.298 alpha:1.000].CGColor;
topLayer.shadowOffset = CGSizeMake(0, 0.1);
topLayer.shadowOpacity = 1;
topLayer.shadowPath = [UIBezierPath bezierPathWithRect:topLayer.bounds].CGPath;
[label.layer addSublayer:topLayer];
有圖有真相:
圖4.png
看起來不怎么明顯应又,設置陰影顏色為紅色:
圖5.png
下邊界也是同理去設置宙项,就不繼續(xù)擼代碼了。