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

Làm thế nào để hiển thị hình ảnh có các góc tròn trên Ứng dụng iOS bằng Swift?


Để tạo một hình ảnh có các góc tròn hoặc để tạo bất kỳ chế độ xem hoặc nút nào hoặc bất kỳ phần tử giao diện người dùng nào có các góc tròn một cách nhanh chóng, chúng ta cần truy cập thuộc tính bán kính góc của lớp của nó. Mọi phần tử giao diện người dùng trong iOS đều dựa trên một lớp.

Trước hết, hãy thêm Đối tượng UIImageView vào bảng phân cảnh của chúng tôi. Hoặc hãy tạo một chương trình theo chương trình.

Dưới đây là một chức năng sẽ lập trình tạo chế độ xem hình ảnh và thêm hình ảnh vào đó.

func addImage(imageName img: String) {
   let imageView = UIImageView()
   imageView.frame = CGRect(x: 10, y: 20, width: 200, height: 200)
   imageView.contentMode = . scaleAspectFill
   if let newImage = UIImage(named: img) {
      imageView.image = newImage
   }
   self.view.addSubview(imageView)
}

Giả sử hình ảnh gốc mà chúng tôi muốn thêm vào ứng dụng của mình là -

Làm thế nào để hiển thị hình ảnh có các góc tròn trên Ứng dụng iOS bằng Swift?

trong viewDidLoad của chúng tôi, hãy gọi mã bên dưới để thêm hình ảnh này vào ứng dụng của chúng tôi.

Dưới đây là giao diện của nó mà không có bất kỳ thay đổi nào đối với thuộc tính góc của nó.

Làm thế nào để hiển thị hình ảnh có các góc tròn trên Ứng dụng iOS bằng Swift?

Bây giờ, hãy thêm thuộc tính bán kính góc vào mã hiện có của chúng tôi và xem nó trông như thế nào.

imageView.layer.cornerRadius = 10
imageView.clipsToBounds = true

Thêm hai dòng này trong hàm addImage, ngay phía trên phương thức addSubview. Khi chúng tôi chạy ứng dụng, đây là cách nó trông như bây giờ -

Làm thế nào để hiển thị hình ảnh có các góc tròn trên Ứng dụng iOS bằng Swift?

Chúng tôi cũng có thể tạo một phần mở rộng của UIImageView và sử dụng phần mở rộng như hình dưới đây, phần mở rộng này lại tạo ra kết quả tương tự.

extension UIImageView {
   func makeRoundCorners(byRadius rad: CGFloat) {
      self.layer.cornerRadius = rad
      self.clipsToBounds = true
   }
}


imageView.makeRoundCorners(byRadius: 20)