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

转载  发布时间:2018年05月15日 11:49:13   作者:東引甌越   我要评论

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

前言

开发中总因为一些比较蛋疼的导角问题而困扰着我们,尤其是我们要给一个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一些简单的动画导角比较常用所以记录下来,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

本文Demo

相关文章

  • iOS在固定的label上动态显示所有文字

    iOS在固定的label上动态显示所有文字

    这篇文章给大家主要介绍了iOS中如何实现,在固定的label上动态显示所有文字的方法,文中给出了示例和思路,对大家的理解很有帮助,感兴趣的朋友们下面来一起看看吧。
    2016-10-10
  • IOS UI学习教程之设置UITextField各种属性

    IOS UI学习教程之设置UITextField各种属性

    这篇文章主要为大家详细介绍了IOS UI学习教程之设置UITextField各种属性,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • iOS开发中Subview的事件响应以及获取subview的方法

    iOS开发中Subview的事件响应以及获取subview的方法

    这篇文章主要介绍了iOS开发中Subview的事件响应以及获取subview的方法,代码基于传统的Objective-C,需要的朋友可以参考下
    2015-09-09
  • iOS中的AutoLayout使用实践总结

    iOS中的AutoLayout使用实践总结

    在对界面进行布局的时候,我们经常使用AutoLayout对界面进行布局适配。下面这篇文章主要给大家介绍了iOS中AutoLayout使用实践的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-12-12
  • iOS 10 推送高阶篇(必看)

    iOS 10 推送高阶篇(必看)

    本文重点给大家介绍ios10 推送的所有通知类,所以说这篇教程是ios10推送必看篇,感兴趣的朋友快来一起学习吧
    2016-09-09
  • iOS 点击图片放大效果的实现

    iOS 点击图片放大效果的实现

    本篇文章主要介绍了iOS 点击图片放大效果的实现,这种效果一般在微博,微信朋友圈中比较常见,有兴趣的可以了解一下。
    2017-01-01
  • iOS中WKWebView白屏问题的分析与解决

    iOS中WKWebView白屏问题的分析与解决

    最近在工作中遇到了WKWebView白屏的问题,所以这篇文章主要给大家介绍了关于iOS中WKWebView白屏问题的分析与解决方法,文中通过示例代码介绍的非常详细,对同样遇到这个问题的朋友具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • iOS中管理剪切板的UIPasteboard粘贴板类用法详解

    iOS中管理剪切板的UIPasteboard粘贴板类用法详解

    在iOS中,通过UITextField、UITextView和UIWebView剪切或复制的内容都可以通过UIPasteboard类来管理粘贴操作,下面就为大家带来iOS中管理剪切板的UIPasteboard粘贴板类用法详解:
    2016-06-06
  • IOS开发 UIAlertController详解及实例代码

    IOS开发 UIAlertController详解及实例代码

    这篇文章主要介绍了 IOS开发 UIAlertController详解及实例代码的相关资料,需要的朋友可以参考下
    2016-12-12
  • IOS开发之路--C语言预处理

    IOS开发之路--C语言预处理

    由于预处理指令是在编译之前就进行了,因此很多时候它要比在程序运行时进行操作效率高。在C语言中包括三类预处理指令,今天将一一介绍:宏定义、条件编译、文件包含
    2014-08-08

最新评论