控件自定义边框及控件layer边框特点

       《一》

        对于iOS控件，很容易使用控件的layer设置border的属性，有borderColor，borderWidth可设置控件四个边框的颜色和宽度。但，有些需求要求控件的边框不是四个。有些控件虽需要四边框，当两个控件上下或左右相邻时，相邻边框就会变得很粗，不协调。为了实现特殊需求或环境下控件边框，需要自定义，即自己在控件内部，画出相应的边。

      比如，我的需求。一个展示评论的cell中，会出现一楼，二楼，三楼等框起来的评论，楼层上下罗列，如草图：

       我先讲楼层框用一个单独的view实现，在这个view中按位置摆放相应的控件并设置view的layer的borderColor和borderWidth。再以view为对象，贴到cell中。会发现，当cell中出现多个楼层时，上下相邻的楼层相邻处的线，是两个楼层borderWidth的2倍，显的线条粗，不协调。

      我的解决办法是，删除通过borderColor，borderWidth设置的layer边框，通过向view的layer上添加上下左右方向的1像素的layer实现边框的设置。代码如下：

      

        //上边框

        CALayer * topBorder = [CALayer layer];

        topBorder.frame = CGRectMake(0.0f, 0.0f, self.bounds.size.width, 1.0f);

        topBorder.backgroundColor = borderColor.CGColor;

        [self.layer addSublayer:topBorder];

        //左边框

        CALayer * leftBorder = [CALayer layer];

        leftBorder.frame = CGRectMake(0.0f, 0.0f, 1.0f, self.bounds.size.height);

        leftBorder.backgroundColor = borderColor.CGColor;

        [self.layer addSublayer:leftBorder];

        //下边框

        self.bottomBorder = [CALayer layer];

        self.bottomBorder.frame = CGRectMake(0.0f, (self.bounds.size.height - 1), self.bounds.size.width, 1);

        self.bottomBorder.backgroundColor = borderColor.CGColor;//没有贴到view上

        //右边框

        CALayer * rightBorder = [CALayer layer];

        rightBorder.frame = CGRectMake((self.bounds.size.width - 1), 0.0, 1.0, self.bounds.size.height);

        rightBorder.backgroundColor = borderColor.CGColor;

        [self.layer addSublayer:rightBorder];

     我在view内部，将上左右边框，实例化后，贴到view上。下边框设置成view的属性，在view内部实例化下边框，没有贴到view上。当向cell上贴view时，会判断，是否是最后一个view框，如果是，则将下边框贴到view上。

     完美～

     《二》

     其中，我还发现一个用layer的borderColor，borderWidth设置边框的特性。

     在开发中，会遇到在界面的某处，设置了两个或多个可点击的控件，点击控件伴随着切换到相对应的列表中。以两个按钮为例，如图：

    实现按钮一和按钮二及小红条。我将按钮一，按钮二，和小红条贴到view上，并设用layer的borderColor，borderWidth设置边框，实现上下边框（左右边框看不到）。根据需求，小红条高度为2pt，底边压在1pt的下边框上。我设置了正确的小红条的frame。发现小红条只显示下边框上面的1pt，然后无论如何改变小红条的frame的y和height（将小红条高度修改为20pt），调整小红条位于view的最上层，设置view的clipsToBounds为no，都无法覆盖着下边框。

    得出结论，边框不能被内部控件覆盖。也是一个很重要的特性。

    为与效果图上小红条的位置和显示一致，我去掉了边框的设置，用UILable创建下边框线。kill掉了当时不用控件设置边框，而通过设置layer的边框的想法。

    也许，我上边表述的问题，你会觉得不值得一提。写者我要说，另辟思路，通过减少控件的创建，控件的堆叠，来达到效果，未尝不可呢。况且，尝试自己的想法是一个好的趋势，说不一定哪天，自己会拥有超出别人，很伟大的idea，加油。