Di aplikasi Musik iOS baru, kita dapat melihat sampul album di belakang tampilan yang mengaburkannya.
Bagaimana hal seperti itu dapat dicapai? Saya sudah membaca dokumentasi, tetapi tidak menemukan apa pun di sana.
ios
objective-c
graphics
filtering
core-image
kondratyevdev
sumber
sumber
Jawaban:
Anda dapat menggunakan
UIVisualEffectView
untuk mencapai efek ini. Ini adalah API asli yang telah disesuaikan untuk kinerja dan masa pakai baterai yang hebat, plus mudah diimplementasikan.Cepat:
Tujuan-C:
Jika Anda menghadirkan pengontrol tampilan ini secara digital untuk mengaburkan konten yang mendasarinya, Anda harus mengatur gaya presentasi modal menjadi Over Current Context dan mengatur warna latar belakang untuk menghapus untuk memastikan pengontrol tampilan yang mendasarinya akan tetap terlihat setelah ini ditampilkan di atas.
sumber
insertSubView:belowSubView:
komentar dalam kode ini, saya telah menggunakan yang berikut untuk mengatur blur sebagai latar belakang tampilan:view.insertSubview(blurEffectView, atIndex: 0)
UIAccessibilityIsReduceTransparencyEnabled()
.Gambar Inti
Karena gambar dalam tangkapan layar itu statis, Anda dapat menggunakan
CIGaussianBlur
dari Core Image (memerlukan iOS 6). Berikut ini contohnya: https://github.com/evanwdavis/Fun-with-Masks/blob/master/Fun%20with%20Masks/EWDBlurExampleVC.mPikiran Anda, ini lebih lambat daripada opsi lain di halaman ini.
Stack blur (Kotak + Gaussian)
Mempercepat Kerangka
Dalam sesi "Implementing Engaging UI di iOS" dari WWDC 2013 Apple menjelaskan cara membuat latar belakang kabur (pukul 14:30), dan menyebutkan metode yang
applyLightEffect
diterapkan dalam kode sampel menggunakan Accelerate.framework.GPUImage menggunakan shader OpenGL untuk membuat buram dinamis. Ini memiliki beberapa jenis blur: GPUImageBoxBlurFilter, GPUImageFastBlurFilter, GaussianSelectiveBlur, GPUImageGaussianBlurFilter. Bahkan ada GPUImageiOSBlurFilter yang "harus sepenuhnya meniru efek blur yang disediakan oleh panel kontrol iOS 7" ( tweet , artikel ). Artikel ini terperinci dan informatif.
Dari indieambitions.com: Lakukan blur menggunakan vImage . Algoritma ini juga digunakan di iOS-RealTimeBlur .
Dari Nick Lockwood: https://github.com/nicklockwood/FXBlurView Contoh ini menunjukkan blur pada tampilan gulir. Itu kabur dengan dispatch_async, kemudian disinkronkan untuk memanggil pembaruan dengan UITrackingRunLoopMode sehingga kabur tidak tertinggal ketika UIKit memberikan prioritas lebih ke gulir UIScrollView. Ini dijelaskan dalam buku Nick iOS Core Animation , yang bagus.
iOS-blur Ini mengambil lapisan kabur dari UIToolbar dan meletakkannya di tempat lain. Apple akan menolak aplikasi Anda jika Anda menggunakan metode ini. Lihat https://github.com/mochidev/MDBlurView/issues/4
Dari blog Evadne: LiveFrost: Fast, Synchronous UIView Snapshot Convolving . Kode yang bagus dan baca yang bagus. Beberapa ide dari pos ini:
Barang lainnya
Andy Matuschak mengatakan di Twitter: "Anda tahu, banyak tempat di mana kita melakukannya secara real time, statis dengan trik-trik pintar."
Di doubleencore.com mereka mengatakan "kami telah menemukan bahwa radius 10 pt blur ditambah peningkatan 10 pt pada saturasi terbaik meniru efek blur iOS 7 dalam sebagian besar keadaan".
Mengintip header pribadi SBFProceduralWallpaperView Apple .
Akhirnya, ini bukan blur nyata, tapi ingat Anda dapat mengatur rasterizationScale untuk mendapatkan gambar pixelated: http://www.dimzzy.com/blog/2010/11/blur-effect-for-uiview/
sumber
UIImage
sebaliknya itu akan terlihat terlalu besar pada perangkat Retina ...Saya memutuskan untuk mengirim versi Objective-C tertulis dari jawaban yang diterima hanya untuk memberikan lebih banyak opsi dalam pertanyaan ini ..
Kendala bisa dihapus jika Anda ingin memetikan jika Anda hanya mendukung mode potret atau saya hanya menambahkan bendera ke fungsi ini untuk menggunakannya atau tidak ..
sumber
Saya tidak berpikir saya diperbolehkan memposting kode, tetapi posting di atas yang menyebutkan kode sampel WWDC sudah benar. Ini tautannya: https://developer.apple.com/downloads/index.action?name=WWDC%202013
File yang Anda cari adalah kategori pada UIImage, dan metode ini adalah applyLightEffect.
Seperti yang saya catat di atas dalam komentar, Apple Blur memiliki saturasi dan hal-hal lain yang terjadi selain blur. Pengaburan yang sederhana tidak akan berhasil ... jika Anda ingin meniru gaya mereka.
sumber
Saya pikir solusi termudah untuk ini adalah dengan menimpa UIToolbar, yang mengaburkan segalanya di belakangnya di iOS 7. Ini cukup licik, tetapi sangat mudah bagi Anda untuk menerapkannya, dan cepat!
Anda dapat melakukannya dengan tampilan apa pun, cukup buat subkelas
UIToolbar
alih-alihUIView
. Anda bahkan dapat melakukannya denganUIViewController
'sview
properti, misalnya ...1) buat kelas baru yang merupakan "Subkelas"
UIViewController
dan centang kotak "Dengan XIB untuk antarmuka pengguna".2) Pilih View dan pergi ke inspektur identitas di panel sebelah kanan (alt-command-3). Ubah "Kelas" menjadi
UIToolbar
. Sekarang pergi ke inspektur atribut (alt-command-4) dan ubah warna "Background" menjadi "Clear Color".3) Tambahkan subview ke tampilan utama dan hubungkan ke IBOutlet di antarmuka Anda. Sebut saja
backgroundColorView
. Akan terlihat seperti ini, sebagai kategori pribadi dalam file implementasi (.m
).4) Buka file view controller implementation (
.m
) dan ubah-viewDidLoad
metodenya, menjadi seperti berikut:Ini akan memberi Anda tampilan abu-abu gelap, yang mengaburkan segalanya di belakangnya. Tidak ada bisnis yang lucu, tidak ada gambar inti yang lambat yang kabur, menggunakan semua yang ada di ujung jari Anda yang disediakan oleh OS / SDK.
Anda dapat menambahkan tampilan pengontrol tampilan ini ke tampilan lain, sebagai berikut:
Beri tahu saya jika ada yang tidak jelas, saya akan dengan senang hati membantu!
Edit
UIToolbar telah diubah di 7.0.3 untuk memberikan efek yang mungkin tidak diinginkan saat menggunakan blur berwarna.
Kami dulu dapat mengatur warna menggunakan
barTintColor
, tetapi jika Anda melakukan ini sebelumnya, Anda perlu mengatur komponen alfa menjadi kurang dari 1. Jika tidak, UIToolbar Anda akan menjadi warna yang benar-benar buram - tanpa blur.Ini dapat dicapai sebagai berikut: (mengingat
self
adalah subkelas dariUIToolbar
)Ini akan memberi warna biru pada tampilan kabur.
sumber
self.backgroundColorView.opaque = NO;
self.backgroundColorView.alpha = 0.5;
self.backgroundColorView.backgroundColor = [UIColor colorWithWhite:0.3 alpha:1];
Tapi latar belakangnya tidak kabur, cukup buat efek yang bagus. Bagaimanapun, terima kasih!Berikut ini adalah implementasi cepat di Swift menggunakan CIGaussianBlur:
sumber
Skala blur khusus
Anda dapat mencoba
UIVisualEffectView
dengan pengaturan khusus sebagai -Output: - untuk
blurEffect.setValue(1...
&blurEffect.setValue(2..
sumber
(NSClassFromString("_UICustomVibrancyEffect") as! UIVibrancyEffect.Type).init()
Sangat menghargai bantuan!Berikut cara mudah untuk menambahkan blur khusus tanpa tawar-menawar dengan API pribadi menggunakan UIViewPropertyAnimator :
Pertama, deklarasikan properti kelas:
Kemudian atur tampilan blur Anda di
viewDidLoad()
:Catatan: Solusi ini tidak cocok untuk
UICollectionView
/UITableView
selsumber
Dari Xcode Anda dapat melakukannya dengan mudah. Ikuti langkah-langkah dari xcode. Drage tampilan efek visual pada tampilan tampilan atau gambar Anda.
Selamat Coding :)
sumber
Jawaban yang diterima benar tetapi ada langkah penting yang hilang di sini, jika pandangan ini - yang Anda inginkan latar belakangnya kabur - disajikan menggunakan
[self presentViewController:vc animated:YES completion:nil]
Secara default, ini akan meniadakan blur karena UIKit menghapus tampilan presenter, yang sebenarnya Anda kabur. Untuk menghindari penghapusan itu, tambahkan baris ini sebelum yang sebelumnya
vc.modalPresentationStyle = UIModalPresentationOverFullScreen;
Atau gunakan
Over
gaya lain .sumber
TUJUAN-C
SWIFT 3.0
dari: https://stackoverflow.com/a/24083728/4020910
sumber
Menggunakan UIImageEffects
Untuk orang-orang yang ingin lebih banyak kontrol, Anda dapat menggunakan
UIImageEffects
kode sampel Apple .Anda dapat menyalin kode
UIImageEffects
dari Perpustakaan Pengembang Apple: Memburamkan dan Mewarnai GambarDan inilah cara menerapkannya:
sumber
sumber
Menemukan ini secara tidak sengaja, memberi saya hasil yang sangat bagus (hampir duplikat dengan Apple) dan menggunakan kerangka Akselerasi. - http://pastebin.com/6cs6hsyQ * Tidak ditulis oleh saya
sumber
Jawaban ini didasarkan pada jawaban Mitja Semolic yang sangat baik sebelumnya . Saya telah mengonversinya menjadi swift 3, menambahkan penjelasan tentang apa yang terjadi di coments, menjadikannya perpanjangan dari UIViewController sehingga setiap VC dapat memanggilnya sesuka hati, menambahkan tampilan yang tidak jelas untuk menampilkan aplikasi selektif, dan menambahkan blok penyelesaian sehingga pengendali tampilan panggilan dapat melakukan apa pun yang diinginkannya pada penyelesaian blur.
Saya telah mengkonfirmasi bahwa ia bekerja dengan iOS 10.3.1 dan iOS 11
sumber
Suplemen penting untuk jawaban @ Joey
Hal ini berlaku untuk situasi di mana Anda ingin menyajikan kabur-latar belakang
UIViewController
denganUINavigationController
.Nikmati!
sumber
Swift 3 Versi dari jawaban Kev untuk mengembalikan gambar buram -
sumber
Kode 2019
Inilah contoh yang lebih lengkap dengan menggunakan teknik @AdamBardon yang menakjubkan.
{Aside: sebagai masalah umum rekayasa iOS,
didMoveToWindow
mungkin lebih cocok untuk Anda daripadadidMoveToSuperview
. Kedua, Anda dapat menggunakan beberapa cara lain untuk melakukan teardown, tetapi teardown adalah dua baris kode yang ditunjukkan di sana.}BlurryBall
hanya aUIVisualEffectView
. Perhatikan init untuk tampilan efek visual. Jika Anda membutuhkan sudut bulat atau apa pun, lakukan di kelas ini.sumber
Apple telah memberikan ekstensi untuk kelas UIImage yang disebut UIImage + ImageEffects.h. Di kelas ini Anda memiliki metode yang diinginkan untuk mengaburkan pandangan Anda
sumber
Berikut adalah kode Swift 2.0 untuk solusi yang telah disediakan dalam jawaban yang diterima :
sumber
Jika menambahkan tampilan buram gelap untuk tableView, ini akan membuatnya dengan indah:
sumber
Anda dapat langsung membuat Background Blur Anda menggunakan "Visual Effect View with Blur" dan "Visual Effect View with Blur and Vibrancy".
Yang harus Anda lakukan untuk membuat Blur Background di Aplikasi iOS adalah ...
Langkah 1 Gambar
Langkah 2 Gambar
Tata Letak Aplikasi sebelum mengklik Tombol apa saja!
Tampilan Aplikasi Setelah Mengklik Tombol yang membuat seluruh latar belakang aplikasi Buram!
sumber
Dalam hal ini membantu siapa pun, berikut adalah ekstensi cepat yang saya buat berdasarkan jawaban oleh Jordan H. Itu ditulis dalam Swift 5 dan dapat digunakan dari Objective C.
CATATAN: Jika Anda ingin mengaburkan latar belakang UILabel tanpa memengaruhi teks, Anda harus membuat wadah UIView, tambahkan UILabel ke wadah UIView sebagai subview, setel latar belakang UILabel ke UIColor.clear, lalu panggil blurBackground (gaya : UIBlurEffect.Style, fallbackColor: UIColor) pada wadah UIView. Berikut adalah contoh cepat dari ini yang ditulis dalam Swift 5:
sumber
Swift 4:
Untuk menambahkan overlay, atau tampilan sembulan Anda juga dapat menggunakan Tampilan Penampung yang dengannya Anda mendapatkan Pengontrol Tampilan gratis (Anda mendapatkan Tampilan Penampung dari palet / pustaka objek biasa)
Langkah:
Miliki Tampilan (ViewForContainer dalam pic) yang menampung Tampilan Kontainer ini, untuk meredupkannya ketika konten Tampilan Kontainer ditampilkan. Hubungkan outlet di dalam View Controller pertama
Sembunyikan tampilan ini saat VC pertama dimuat
Tampil saat Tombol diklik masukkan deskripsi gambar di sini
Untuk meredupkan Tampilan ini saat konten Tampilan Kontainer ditampilkan, atur Tampilan Latar Belakang ke Hitam dan opacity menjadi 30%
Saya telah menambahkan jawaban untuk penciptaan tampilan popview di pertanyaan Stackoverflow lainnya https://stackoverflow.com/a/49729431/5438240
sumber
Jawaban sederhana adalah Tambahkan subview dan ubah alfa-nya.
sumber