iOS中UIView實現不同方向的導角

2020-07-26 02:27:23

字體：大中小

來源：轉載

供稿：網友

前言

開發中總因為一些比較蛋疼的導角問題而困擾著我們,尤其是我們要給一個UIView導角成左上、左下。。。

這種需求很值得用代碼實現一下, 今天突然在AppCode找到了一篇好文章.于是有了下文

通常導角

self.view.cornerRadius = 20.0self.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 UIKitclass 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)

最終的效果