IOS如何给VIEW设置2个圆角?set cornerRadius for only top-left and top-right corner of a UIVIEW
来源:互联网 发布:java版qq还能用吗 编辑:程序博客网 时间:2024/05/24 06:11
-----如果大家有更好的方法请告诉我,谢谢--------
有些设计中,需要实现top-left和top-right为圆角,而bottom-left and bottom-right依然是平角,这样就不能使用
_bg.layer.cornerRadius
了。
这里要用到一些基本的绘制功能UIBezierPath and CAShapeLayer
-----------
这里先看看最终效果图
注意上面的大白块,top-left and top-right是圆角,bottom-left and bottom-right是平角,然后有一个border color;
实现的具体步骤如下(给大白块定义为_bg):
一、定义一个贝赛尔曲线,作为路径绘制给_bg
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:_bg.bounds byRoundingCorners:(UIRectCornerTopLeft|UIRectCornerTopRight) cornerRadii:CGSizeMake(10.0, 10.0)];// (UIRectCornerBottomLeft|UIRectCornerBottomRight) CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];maskLayer.path = maskPath.CGPath;_bg.layer.mask = maskLayer;(标题里说绘制上面的2个角只是一种说法,其实想绘几个就绘几个。其实上面这一步就实现了标题的问题,参数请自己研究)
完成这一步,如果想给UIView添加borderColor and borderWidth,会发现,UIView直线处成功有了线条,但是曲线(圆角)并没有线条的出现,所以就有了接下的内容。
二、创建一个UIView,用来绘制展现border的,然后覆盖在_bg上面,实现borderColor的效果
UIView *strokeView = [[UIView alloc] initWithFrame:_bg.bounds];strokeView.tag = 99;_bg.userInteractionEnabled = NO;
注1:为什么要设置tag
注2:为什么要新建一个UIView
三、为storkeView绘制边线
CAShapeLayer *strokeLayer = [CAShapeLayer layer];strokeLayer.path = maskPath.CGPath;strokeLayer.fillColor = [UIColor clearColor].CGColor; //内容填充的颜色设置为clearstrokeLayer.strokeColor = [UIColor colorWithHexString:@"#e0e0e0"].CGColor; //边色strokeLayer.lineWidth = 1; // 边宽[strokeView.layer addSublayer:strokeLayer];完成这一步,其实会发现,已经实现了在给_bg添加borderColor的效果;这里解释下注1和注;
注1:因为使用了AutoLayout,有时候不能确定_bg在不同设备上最终的bounds ,所以像绘制的内容如果放在viewWillLayoutSubviews方法(或者多次绘制)时,在layout之前如果不小心触发了绘制,那么绘制的bounds可能是按照xib上设计的尺寸;这里我建议就是设置一个tag,然后在每次绘制(触发)前调用
[[_bg viewWithTag:99] removeFromSuperview];方法来清除掉borderColor,防止绘制多个strokeView在_bg上面
注2:其实直接在_bg上绘制strokeLayer是可以的,但是如果_bg里本身有内容的话,绘制因为是整个UIView绘制(不是只绘一条线),所以会把子元素给抹掉,所以还是新建一个UIView比较好
-------那么接下来,仔细看效果图其实会发现,最下面的边其实是没有borderColor的,那如何抹掉呢?-------
四、在strokeView上创建一根白色的线,覆盖下面的边线,实现抹掉效果……
CALayer *bottomBorder = [CALayer layer];bottomBorder.frame = CGRectMake(0.0f, strokeView.bounds.size.height-1.0f, strokeView.frame.size.width, 1.0f);bottomBorder.backgroundColor = [UIColor whiteColor].CGColor;[strokeView.layer addSublayer:bottomBorder];这里创建了一个图层,Rect和strokeView下面的边线的size\origin是一样的,因为白色背景,所以图层用白色,实现抹掉~
哦,最后记得把strokeView添加到_bg里
[_bg addSubview:strokeView];
----如果_bg有子元素是需要触发事件的,可以
[[_bg2 viewWithTag:99].superview sendSubviewToBack:[_bg2 viewWithTag:99]];
-----如果大家有更好的方法请告诉我,谢谢--------
- IOS如何给VIEW设置2个圆角?set cornerRadius for only top-left and top-right corner of a UIVIEW
- how to set cornerRadius for only top-left and top-right corner of a UIView?
- View[2] left、top、right、bottom
- View的位置--top, left, bottom, right
- absolute同时设置left,right,top,bottom
- Problem 15 - Starting in the top left corner in a 20 by 20 grid, how many routes are there to the bottom right corner?
- How to hide my site and my document link in the right-top corner of sharepoint 2010
- difference of top and left between Javascript and Jquery
- margin: left right /top bottom的怪异
- 定位参数:position、left、right、top、bottom
- DIV CSS left right top bottom定位
- clip:rect('top', 'right', 'bottom', 'left')
- left right top bottom定位div无效
- DIV CSS left right top bottom定位
- glOrtho(left, right, bottom, top, near, far)
- css left right top bottom定位
- html中 left,right,top,bottom图示
- css属性left、right、top、bottom
- linux配置play freamwork环境
- 第四章 监督学习
- php字符串转换
- 往下拖动页面滚动条时,固定住菜单栏(不随其他内容网上滚动,兼容各版本IE、Chrome、Firefox)
- Android N For Developers 笔记 (一)
- IOS如何给VIEW设置2个圆角?set cornerRadius for only top-left and top-right corner of a UIVIEW
- 当加入DropKick(美化selecte)js时
- Ubuntu14.04 x64 qt集成cuda开发
- 学习一个月vb6.0总结
- Linux系统查看版本信息
- Memcached 知识整理
- ORB-SLAM跑通注意事项
- 图像处理基础知识01
- Error:Unable to tunnel through proxy. Proxyreturns "HTTP/1.1 400 Bad Request"