如何在 iPhone/iOS 的 UIView 中创建边框、边框半径和阴影?


在这篇文章中,我们将学习如何创建边框和阴影。我们将通过两种方式来实现,一种是直接编码,另一种是使它可设计且是 UIView 的扩展,可以直接在故事板中编辑。

让我们看看如何在 ios 中玩转边框−

方法 1 − 利用简易编码创建边框 –

边框是图层的属性,视图在其上方绘制,边框具有以下属性:边框颜色、边框宽度。

self.view.layer.borderColor = colorLiteral(red: 0.4392156899, green: 0.01176470611, blue: 0.1921568662, alpha: 1)
self.view.layer.borderWidth = 5.0

如果要创建视图的圆角半径,我们可以使用

self.view.layer.cornerRadius = 5

以下是以上代码在模拟器上运行后显示的结果。

如果要创建阴影,我们可以使用其他属性,如 shadowPath、shadowColor、shadowOffSet、shadowOpactiy 和 shadowRadius。

方法 2 − 利用 Designable,我们可以从故事板中编辑这些属性。我们来用一个可设计元素玩转边框的示例,看看是什么情况。

extension UIView {
   @IBInspectable
   var cornerRadius: CGFloat {
      get {
         return layer.cornerRadius
      }
      set {
         layer.cornerRadius = newValue
      }
   }
   @IBInspectable
   var borderWidth: CGFloat {
      get {
         return layer.borderWidth
      }
      set {
         layer.borderWidth = newValue
      }
   }
   @IBInspectable
   var borderColor: UIColor? {
      get {
         if let color = layer.borderColor {
            return UIColor(cgColor: color)
         }
         return nil
      }
      set {
         if let color = newValue {
            layer.borderColor = color.cgColor
         } else {
            layer.borderColor = nil
         }
      }
   }
}

它将在故事板的属性检查器中创建操作,你可以在其中直接编辑和访问结果。它应如下所示。

更新日期:2020 年 6 月 27 日

452 人查看

开启 职业生涯

完成课程获得认证

开始
广告
© . All rights reserved.