iOS中UIView实现不同方向的导角
程序员文章站
2023-12-13 20:03:10
前言
开发中总因为一些比较蛋疼的导角问题而困扰着我们,尤其是我们要给一个uiview导角成 左上 、左下。。。
这种需求很值得用代码实现一下, 今天突然在appcode...
前言
开发中总因为一些比较蛋疼的导角问题而困扰着我们,尤其是我们要给一个uiview导角成 左上 、左下。。。
这种需求很值得用代码实现一下, 今天突然在appcode找到了一篇好文章.于是有了下文
通常导角
self.view.cornerradius = 20.0 self.view.cliptobounds = true
这两行代码是全方向导角
如果像要搞成不同方向的话可以用ios11 新的api和 ios11以前的cashapelayer画贝赛尔曲线来解决
首先我们要创建一个uiview
class viewcontroller: uiviewcontroller { var cardview: uiview! override func viewdidload() { super.viewdidload() cardview = uiview() view.addsubview(cardview) cardview.translatesautoresizingmaskintoconstraints = false //把view居中 cardview.widthanchor.constraint(equaltoconstant: 200).isactive = true cardview.heightanchor.constraint(equaltoconstant: 200).isactive = true cardview.centerxanchor.constraint(equalto: view.centerxanchor).isactive = true cardview.centeryanchor.constraint(equalto: view.centeryanchor).isactive = true cardview.backgroundcolor = uicolor(red: 1.0, green: 0.784, blue: 0.2, alpha: 1) } }
ios11 以后苹果提供了一个uiview的属性叫maskedcorners用于calayer的动画相关.
public struct cacornermask : optionset { public init(rawvalue: uint) public static var layerminxminycorner: cacornermask { get } public static var layermaxxminycorner: cacornermask { get } public static var layerminxmaxycorner: cacornermask { get } public static var layermaxxmaxycorner: cacornermask { get } }
下面我说一下
- layerminxminycorner 底部右侧 的圆角 -> 右下角
- layermaxxminycorner 顶部右侧 的圆角 -> 右上角
- layerminxmaxycorner 底部左侧 的圆角 -> 左下角
- layerminxminycorner 顶部左侧 的圆角 -> 左上角
一般我们都为uiview写个 extension
extension uiview { func roundcorners(cornerradius: double) { self.layer.cornerradius = cgfloat(cornerradius) self.clipstobounds = true if #available(ios 11.0, *) { self.layer.maskedcorners = [.layerminxminycorner, .layermaxxminycorner] } else { let path = uibezierpath(roundedrect: self.bounds, byroundingcorners: [.topleft, .topright], cornerradii: cgsize(width: cornerradius, height: cornerradius)) let masklayer = cashapelayer() masklayer.frame = self.bounds masklayer.path = path.cgpath self.layer.mask = masklayer } } }
这里区分了ios11之前和之后的两种搞法.
之前的话我们都是用一个贝塞尔曲线画path.然后创建cashapelayer 给self.layer.mask做一种透明的遮罩来解决不同方向导角问题.
添加动画效果的导角
我们在原viewdidload()
方法里面加个手势.
并写好触发的事件, 完整的代码如下
import uikit class viewcontroller: uiviewcontroller { var cardview: uiview! override func viewdidload() { super.viewdidload() cardview = uiview() view.addsubview(cardview)cardview.translatesautoresizingmaskintoconstraints = false cardview.widthanchor.constraint(equaltoconstant: 200).isactive = true cardview.heightanchor.constraint(equaltoconstant: 200).isactive = true cardview.centerxanchor.constraint(equalto: view.centerxanchor).isactive = true cardview.centeryanchor.constraint(equalto: view.centeryanchor).isactive = true cardview.backgroundcolor = uicolor(red: 1.0, green: 0.784, blue: 0.2, alpha: 1) let taprecognizer = uitapgesturerecognizer(target: self, action: #selector(animatecornerchange(recognizer:))) cardview.addgesturerecognizer(taprecognizer) } @objc func animatecornerchange(recognizer: uitapgesturerecognizer) { let targetradius: double = (cardview.layer.cornerradius == 0.0) ? 100.0:0.0 if #available(ios 10.0, *) { uiviewpropertyanimator(duration: 0.4, curve: .easeinout) { self.cardview.roundcorners(cornerradius: targetradius) }.startanimation() } else { uiview.animate(withduration: 1.0, delay: 0.0, options: .curveeaseinout, animations: { }, completion: nil) } } } extension uiview { func roundcorners(cornerradius: double) { self.layer.cornerradius = cgfloat(cornerradius) self.clipstobounds = true if #available(ios 11.0, *) { self.layer.maskedcorners = [.layerminxminycorner, .layermaxxminycorner] } else { let path = uibezierpath(roundedrect: self.bounds, byroundingcorners: [.topleft, .topright], cornerradii: cgsize(width: cornerradius, height: cornerradius)) let masklayer = cashapelayer() masklayer.frame = self.bounds masklayer.path = path.cgpath self.layer.mask = masklayer } } }
这里主要强调一下动画的新api
ios10之后u增加一个新的动画效果api
uiviewpropertyanimator(duration: 0.4, curve: .easeinout) { //这里写相关view的操作代码 。。。eg:下面代码 self.cardview.roundcorners(cornerradius: targetradius) }.startanimation()
ios之前可以通过古老的api来实现
uiview.animate(withduration: 1.0, delay: 0.0, options: .curveeaseinout, animations: { //这里写相关view的操作代码 。。。eg:下面代码 self.cardview.roundcorners(cornerradius: targetradius) }, completion: nil)
最终的效果
总结
ios一些简单的动画导角比较常用所以记录下来,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。