Bagaimana cara membuat garis batas ganda di UIImage dengan Swift?

Dec 04 2020

Saya sudah mencoba mencari trik "double border" di Swift untuk membuatnya seperti ini. Saya merasa ini bisa seperti "perbatasan ganda" di UIImage.

Beri tahu saya jika Anda tahu kodenya. :)

Jawaban

1 AJ16 Dec 04 2020 at 14:27

Anda tinggal mengambil UIView dan menambahkan UIImageView di dalamnya. Hapus warna UIView hingga jelas.

Inilah yang telah saya lakukan dengan menggunakan papan cerita.

  1. Menambahkan UIView dan UIImageView di dalamnya, warna tampilan disetel menjadi jelas dan tampilan gambar berada di 15 titik dari semua sisi. Silakan ubah sesuai kebutuhan Anda (Lihat gambar 1).

  2. Ini adalah kode pengontrol tampilan (Lihat gambar 2).

  3. Output (Lihat gambar 3).

Catatan : Hanya ide dasar, meskipun Anda dapat mengubah warna dan lebar batas dll sesuai kebutuhan Anda.

Tata letak papan cerita

Lihat kode pengontrol

Keluaran

2 SumitJain Dec 04 2020 at 11:55

Anda perlu menambahkan borderColor (hitam) dan cornerRadius ke lapisan default UIImageView. Bersamaan dengan ini, Anda harus menambahkan sublayer lain di UIImageView dengan borderColor sebagai abu-abu.

imageView.layer.borderWidth = 4.0
imageView.layer.borderColor = UIColor.gray.cgColor
imageView.layer.cornerRadius = imageView.frame.width / 2

let borderLayer = CALayer()
borderLayer.frame = imageView.bounds
borderLayer.borderColor = UIColor.black.cgColor
borderLayer.borderWidth = 14.0
borderLayer.cornerRadius = borderLayer.frame.width / 2
imageView.layer.insertSublayer(borderLayer, above: imageView.layer)

Lihat demo taman bermain terlampir.

PeterDu Dec 04 2020 at 11:09

Saya pikir Anda dapat menambahkan 1 lingkaran (UIView) sebagai subview antara UIImageView dan UIImage. Misalnya, Anda bisa menginisialisasi UIImageView dengan graywarna untuk sudut luarRadius. Kemudian, Anda menambahkan lingkaran UIView dan terakhir UIImage.

Atau, alternatifnya bisa menambahkan UIImage sebelum lingkaran UIView (dengan background transparan).

Saya pikir Anda dapat menemukan kode serupa di sini: Tampilan Gambar Perbatasan Ganda