Computer >> Máy Tính >  >> Lập trình >> IOS

Làm cách nào để tạo Đường viền, Bán kính đường viền và bóng đổ cho UIView trong iPhone / iOS?


Trong bài viết này, chúng ta sẽ học cách tạo đường viền và bóng đổ. Chúng tôi sẽ làm điều đó theo hai cách, một bằng cách mã hóa trực tiếp và một bằng cách làm cho nó có thể chỉ định và một phần mở rộng của UIView, có thể được chỉnh sửa trực tiếp trong bảng phân cảnh.

Hãy xem cách sử dụng đường viền trong iOS -

Phương pháp 1 - Tạo đường viền bằng mã hóa đơn giản -

Đường viền là thuộc tính của lớp, trên đó Chế độ xem được vẽ, đường viền có các thuộc tính sau, Màu đường viền, độ rộng đường viền.

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

Để tạo bán kính góc của một chế độ xem, chúng ta có thể sử dụng

self.view.layer.cornerRadius = 5

Đây là kết quả của đoạn mã trên khi chạy trên trình mô phỏng.

Làm cách nào để tạo Đường viền, Bán kính đường viền và bóng đổ cho UIView trong iPhone / iOS?

Để tạo bóng, chúng ta có thể sử dụng các thuộc tính khác như shadowPath, shadowColor, shadowOffSet, shadowOpactiy và shadowRadius.

Phương pháp 2 - Sử dụng Designable, chúng ta có thể chỉnh sửa các thuộc tính này từ bảng phân cảnh. Hãy xem một ví dụ về chơi xung quanh các đường viền bằng cách sử dụng các thiết bị chỉ định.

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
         }
      }
   }
}

Điều này sẽ tạo các hành động trong Trình kiểm tra thuộc tính của bảng phân cảnh từ đó bạn có thể trực tiếp chỉnh sửa và truy cập kết quả. Nó sẽ giống như bên dưới.

Làm cách nào để tạo Đường viền, Bán kính đường viền và bóng đổ cho UIView trong iPhone / iOS?