如何在 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.