正文

iOS中UIView实现不同方向的导角

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0713

这篇文章主要给大家介绍了关于iOS中UIView实现不同方向的导角的相关资料，文中通过示例代码介绍的非常详细，对大家学习或使用iOS具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

开发中总因为一些比较蛋疼的导角问题而困扰着我们,尤其是我们要给一个uiview导角成 左上 、左下。。。

这种需求很值得用代码实现一下, 今天突然在appcode找到了一篇好文章.于是有了下文

通常导角

?
1
2
self.view.cornerradius = 20.0
self.view.cliptobounds = true

这两行代码是全方向导角

如果像要搞成不同方向的话可以用ios11 新的api和 ios11以前的cashapelayer画贝赛尔曲线来解决

首先我们要创建一个uiview

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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的动画相关.

?
1
2
3
4
5
6
7
8
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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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()方法里面加个手势.

并写好触发的事件, 完整的代码如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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

?
1
2
3
4
uiviewpropertyanimator(duration: 0.4, curve: .easeinout) {
//这里写相关view的操作代码 。。。eg:下面代码
    self.cardview.roundcorners(cornerradius: targetradius)
    }.startanimation()

ios之前可以通过古老的api来实现

?
1
2
3
4
uiview.animate(withduration: 1.0, delay: 0.0, options: .curveeaseinout, animations: {
//这里写相关view的操作代码 。。。eg:下面代码
    self.cardview.roundcorners(cornerradius: targetradius)
   }, completion: nil)

最终的效果

iOS中UIView实现不同方向的导角

总结

ios一些简单的动画导角比较常用所以记录下来,以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对米米素材网的支持。

本文demo

原文链接：https://www.sunyazhou.com/2018/05/15/20180515How-to-Create-Top-or-Bottom-Rounded-Corners-for-Views/