Saya ingin kebiasaan UIView
...: Saya hanya ingin tampilan putih kosong dengan sudut bulat dan bayangan setetes cahaya (tanpa efek pencahayaan). Saya dapat melakukan masing-masing satu per satu tetapi yang biasa terjadi clipToBounds
/ maskToBounds
konflik.
iphone
ios
cocoa-touch
uiview
rounded-corners
Aditya Vaidyam
sumber
sumber
Jawaban:
Cuplikan kode berikut menambahkan perbatasan, radius perbatasan, dan drop shadow ke
v
, aUIView
:Anda dapat menyesuaikan pengaturan sesuai dengan kebutuhan Anda.
Juga, tambahkan kerangka kerja QuartzCore ke proyek Anda dan:
Lihat jawaban saya yang lain tentang
masksToBounds
.Catatan
Ini mungkin tidak berfungsi dalam semua kasus. Jika Anda menemukan bahwa metode ini mengganggu operasi gambar lain yang sedang Anda lakukan, silakan lihat jawaban ini .
sumber
Cepat
Menjelajahi opsi
Masalah 1: Bayangan terpotong
Bagaimana jika ada sublayers atau subview (seperti gambar) yang isinya ingin kita klip ke batas tampilan kita?
Kita bisa menyelesaikan ini dengan
(Atau,
blueView.clipsToBounds = true
berikan hasil yang sama .)Tapi, oh tidak! Bayangan itu juga terpotong karena berada di luar batas! Apa yang harus dilakukan? Apa yang harus dilakukan?
Larutan
Gunakan tampilan terpisah untuk bayangan dan perbatasan. Tampilan dasar transparan dan memiliki bayangan. Tampilan perbatasan klip setiap subkonten lain yang ada di perbatasannya.
Ini memberikan hasil sebagai berikut:
Masalah 2: Performa buruk
Menambahkan sudut bulat dan bayangan bisa menjadi hit kinerja. Anda dapat meningkatkan kinerja dengan menggunakan jalur yang telah ditentukan untuk bayangan dan juga menentukan bahwa itu akan di-raster. Kode berikut dapat ditambahkan pada contoh di atas.
Lihat posting ini untuk lebih jelasnya. Lihat di sini dan di sini juga.
Jawaban ini diuji dengan Swift 4 dan Xcode 9.
sumber
baseView.backgroundColor = UIColor.clear
menghapus bayangan. Hanya jika Anda mengatur warna latar belakang Anda akan melihatnya.Salah satu cara untuk melakukan ini adalah menempatkan tampilan dengan sudut bulat dalam tampilan dengan drop shadow.
Kemudian Anda dapat menambahkan shadowView di mana pun Anda inginkan.
sumber
Lihat contoh proyek di GitHub untuk memastikan Anda menggunakan komponen dengan benar.
Solusi Simple Swift 5 tanpa subview atau subclassing tambahan:
Perhatikan bahwa Anda harus mengatur tampilan Anda dengan jari-jari sudut dan properti lainnya sebelum memanggil
addShadow
.Setelah itu, panggil saja ini dari
viewDidLoad
seperti ini:Hasil akhir:
Sangat mudah dan sederhana!
sumber
layer.shadowPath = UIBezierPath.init(roundedRect: layer.bounds, cornerRadius: layer.cornerRadius).cgPath
. Tidak dapat menjelaskan mengapa, apakah seseorang memiliki penjelasan untuk itu?Ini berhasil untuk saya. Triknya adalah memindahkan warna latar belakang dari tampilan utama ke layer.
sumber
UIView extension
sini - stackoverflow.com/a/43295741/1313939 terima kasih atas inspirasinya!Saya memecahkan masalah menggunakan trik berikut saat menetapkan jalur bayangan untuk tampilan wadah:
Perhatikan bahwa jalur yang diberikan ke bayangan adalah persegi panjang bulat dengan jari-jari sudut yang sama dengan latar belakang sel:
sumber
Jika Anda berjuang karena dibulatkan
corners
vssubviews
vsmasksToBounds
, maka coba gunakan fungsi saya:sebut saja pada pandangan Anda. apakah sudut pandang Anda membulat, tidak peduli ukurannya, bentuknya - bayangan yang bagus akan digambar.
Simpan saja nilai pengembalian fungsi sehingga Anda dapat merujuknya saat Anda ingin menghapus tabel (atau misalnya digunakan
insertSubview:aboveView:
)sumber
shadow.userInteractionEnabled = NO; // Modify this if needed
garis? Jadi ini adalah kasus di mana dibutuhkan.userInteractionEnabled
adalah properti dasar dan populer yang harus Anda kenal :-)Menggunakan Swift 4 dan Xcode 9 , ini adalah contoh yang berhasil dari pembulatan
ImageView
dengan drop shadow, dan perbatasan.Jika Anda ingin gambar menjadi lingkaran: (dan ditampilkan tanpa batas)
sumber
Saya telah membuat pembantu di UIView
Anda bisa menyebutnya seperti ini
Inilah implementasinya
sumber
Setelah satu hari penuh meneliti tampilan sudut bulat dengan bayangan, saya senang memposting kelas uiview kebiasaan saya di sini, berharap untuk mengakhiri pertanyaan ini:
RoundCornerShadowView.h
RoundCornerShadowView.m
jadi, TIDAK perlu menambahkan tampilan subview atau di bawah ini dalam tampilan target, cukup tambahkan satu layer dalam tampilan saat ini, dan lakukan 3 langkah untuk menyelesaikannya!
perhatikan komentar di dalam kode, sangat membantu untuk memahami komponen!
sumber
Sesuatu yang cepat diuji dalam Swift 4
Menghasilkan
Jika Anda mengaktifkannya di Inspektur seperti ini:
Ini akan menambahkan Atribut Runtime yang Ditentukan Pengguna, menghasilkan:
(Saya menambahkan sebelumnya
cornerRadius = 8
):)
sumber
Anda harus menggunakan gunakan
shadowView
danroundView
shadowView
roundView
shadowView
sedikit di dalam, dan bayangannya perlu menyala. Sesuaikaninsets
sehinggashadowView
benar-benar tidak terlihat di belakangroundView
roundView
Kode
Atau Anda bisa melakukan di bawah ini tanpa menentukan
clipToBounds/maskToBounds
sumber
Solusi Swift 3 & IBInspectable:
Terinspirasi oleh solusi Ade
Pertama, buat ekstensi UIView:
Kemudian, cukup pilih UIView Anda di pengaturan antarmuka, bayangan, ON, dan radius sudut , seperti di bawah ini:
Hasil!
sumber
Inilah solusi untuk masalah konflik masksToBounds, ini berhasil untuk saya.
Setelah Anda mengatur corderRadius / borderColor / shadow dan sebagainya, atur masksToBounds sebagai NO:
sumber
Shadow + Border + Radius Pojok
sumber
Ini adalah versi saya di Swift 3 untuk UIView
sumber
Swift 4: Buat Subclass dari UIView
Menggunakan ..
sumber
Jika Anda tidak ingin mengubah nib dan melihat hierarki seperti yang disarankan David C. metode ini akan melakukannya untuk Anda. Untuk menambahkan sudut bulat dan bayangan ke UIImageView Anda, cukup gunakan metode ini, misalnya:
(!) Untuk alasan kinerja, saya rasa ini bukan ide yang baik untuk menggunakan kode ini dalam sesuatu seperti UITableView, karena kode ini mengubah hierarki tampilan. Jadi saya akan menyarankan untuk mengubah pena Anda dan menambahkan tampilan wadah untuk efek bayangan dan menggunakan kode Davic C.
sumber
Utas lama masih berlaku ...
Saya telah mengedit metode Daniel Gindi untuk memungkinkannya menggunakannya dengan tombol dll. Jika ada yang membutuhkan sudut bulat atau ingin menggabungkan sudut bulat dan perbatasan, maka harus ditetapkan pada layer view yang dilewatkan ke metode ini. Saya juga mengatur rasterisasi untuk mempercepatnya sedikit.
sumber
Berikut ini bekerja paling baik untuk saya (kode ini terletak pada ekstensi UIView, jadi self menunjukkan beberapa UIView yang harus kita tambahkan bayangan dan sudut bundar)
Perbedaan utama antara ini dan contoh kode lainnya adalah bahwa ini menambahkan tampilan bayangan sebagai tampilan saudara (dibandingkan dengan menambahkan tampilan saat ini sebagai subview tampilan bayangan), sehingga menghilangkan kebutuhan untuk mengubah hierarki tampilan yang ada dengan cara apa pun.
sumber
Jawaban daniel.gindi di atas telah membantu saya! (+1 daniel) Namun, saya harus melakukan sedikit penyesuaian - ubah ukuran shadowFrame menjadi sama dengan ukuran bingkai tampilan, dan aktifkan interaksi pengguna. Berikut kode yang diperbarui:
Saya ingin menambahkan bahwa dalam kasus saya, saya mencoba untuk menambahkan ini ke pengontrol tampilan pihak ke-3, yaitu saya tidak memiliki kontrol langsung atas kode. Jadi, inilah cara saya menggunakan fungsi di atas:
sumber
Saya membuat beberapa perubahan pada kode daniel.gindi
Ini semua yang Anda butuhkan untuk membuatnya bekerja.
sumber
Anda perlu menggunakan dua
UIViews
untuk mencapai ini. SatuUIView
akan bekerja seperti bayangan dan yang lainnya akan bekerja untuk perbatasan bulat.Berikut ini cuplikan kode a
Class Method
dengan bantuanprotocol
:Dalam kode di atas
btnCompose_click:
akan menjadi@required
metode delegasi yang akan diaktifkan pada klik tombol.Dan di sini saya menambahkan tombol ke saya
UIViewController
seperti ini:Hasilnya akan terlihat seperti ini:
sumber
Saya telah mencoba banyak solusi dari posting ini dan berakhir dengan solusi di bawah ini. Ini adalah solusi penuh bukti kecuali Anda perlu menjatuhkan bayangan pada tampilan warna yang jelas .
sumber
Inilah solusi yang pasti akan berhasil!
Saya telah membuat ekstensi UIView dengan tepi yang diperlukan untuk menerapkan bayangan seperti di bawah ini
Akhirnya, Anda dapat memanggil fungsi bayangan seperti di bawah ini untuk setiap subkelas UIView Anda, Anda juga dapat menentukan tepi untuk menerapkan bayangan pada, coba berbagai variasi sesuai kebutuhan Anda mengubah parameter panggilan metode di bawah ini.
Gambar hasil
sumber
Jawaban yang diberikan oleh Evan Mulawski akan bekerja dengan sempurna. Tangkapannya adalah Anda harus mengatur warna latar belakang agar tampilan menjadi clearColor dan properti masksToBounds menjadi NO.
Anda dapat mengatur warna apa pun yang Anda inginkan untuk tampilan, mengaturnya seperti
Semoga ini membantu..
sumber
Ini adalah bagaimana Anda melakukannya, dengan sudut bulat dan bayangan bulat tanpa repot dengan jalan.
Tampilan dengan konten, dalam kasus saya sebuah UIImageView, memiliki jari-jari sudut dan karenanya harus ditutup-tutupi.
Kami membuat tampilan berukuran sama lain untuk bayangan, mengatur maskToBounds menjadi NO dan kemudian menambahkan tampilan konten ke tampilan wadah (mis. ShadowContainer).
sumber
Saya menulis metode kategori UIView ini untuk menyelesaikan masalah ini, menggunakan tampilan terpisah untuk bayangan dan radius sudut.
sumber
Swift 4 Solusi untuk membuat UICollectionViewCell putaran dan menambahkan Shadows , tanpa ekstensi dan komplikasi :)
Catatan: Untuk tampilan sederhana mis. Tombol. Lihat Jawaban @ suragch di pos ini. https://stackoverflow.com/a/34984063/7698092 . Diuji berhasil untuk tombol
Seandainya ada orang yang masih berjuang untuk berbelok di tikungan dan menambahkan bayangan pada saat yang sama. Meskipun solusi ini berfungsi dengan UICollectionViewCell, solusi ini dapat digeneralisasikan ke semua tampilan.
Teknik ini bekerja untuk saya tanpa membuat ekstensi dan semua hal yang rumit. Saya bekerja dengan storyBoard.
Teknik
Anda harus menambahkan UIView (katakanlah "containerView") di dalam UICollectionViewCell Anda di storyBoard dan tambahkan semua tampilan yang diperlukan (tombol, gambar, dll.) Di dalam containerView ini. Lihat Screenshot.
Hubungkan outlet untuk containerView. Tambahkan baris kode berikut dalam fungsi delegasi CellforItemAtIndexPath.
Keluaran
Lihat Screenshot simulator
sumber
sumber