CALayer 给指定方向的控件边框添加阴影

前言

相信大家在开发的过程中，都遇到过各式各样的UI设计，最近开发项目的时候就遇到给指定方向的控件边框添加阴影。话不多说，直接上图吧。

图1.png 图2.png

分析需求

项目中用到的这个控件是一个自定义的UITextView,需要达到的需求就是有黑色的边框，有圆角的处理，仔细看的小伙伴可以还发现了一个需求就是图1的上边框是带阴影效果的，图2的下边框是带阴影效果的。系统自带的有设置阴影的，但是它是同时四边一起设置，这就有点不符合我们的需求。那我们要怎么处理呢？

解决问题

系统的处理阴影的问题，是从控件的layer层去设置，我们的出发点也是抓住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

接下来就是实现图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

下边界也是同理去设置，就不继续撸代码了。