Bagaimana cara menggunakan UIVisualEffectView untuk Mengaburkan Gambar?


208

Bisakah seseorang memberi contoh kecil menerapkan blur pada gambar? Saya sudah mencoba mencari tahu kode untuk sementara waktu sekarang :( masih baru di obj c!

Ini UIVisualEffectViewmemberikan abstraksi sederhana atas efek visual yang kompleks. Bergantung pada efek yang diinginkan, hasilnya dapat memengaruhi konten yang berlapis di belakang tampilan atau konten yang ditambahkan ke konten tampilan.

Terapkan a UIVisualEffectViewke tampilan yang ada untuk menerapkan efek blur atau semangat ke tampilan yang keluar. Setelah Anda menambahkan UIVisualEffectView ke hierarki tampilan, tambahkan subview apa pun ke contentView dari UIVisualEffectView. Jangan menambahkan subview langsung ke UIVisualEffectViewitu sendiri.

https://developer.apple.com/documentation/uikit/uivisualeffectview#//apple_ref/occ/instp/UIVisualEffectView/contentView


1
Hati-hati untuk menambahkan pandangan untuk UIVisualEffectView's contentView github.com/onmyway133/blog/issues/124
onmyway133

Juga jika Anda menambahkannya ke subview dan mengatur frame-nya jangan lupa untuk memperbarui frame di viewDidLayoutSubviews untuk memastikan rotasi berfungsi.
Steve Moser

Jawaban:


415

Letakkan tampilan kabur ini di imageView. Berikut adalah contoh dalam Objective-C:

UIVisualEffect *blurEffect;
blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];

UIVisualEffectView *visualEffectView;
visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];

visualEffectView.frame = imageView.bounds;
[imageView addSubview:visualEffectView];

dan Swift:

var visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))    

visualEffectView.frame = imageView.bounds

imageView.addSubview(visualEffectView)

3
Terima kasih banyak! Saya lupa tentang mengatur frame :( Tidak ada di Google untuk visual, jadi ini harus menjadi istilah pencarian pertama :)
cNoob

1
Lebih baik berharap API tidak berubah! Itulah salah satu alasan membahas Apple API yang belum dirilis bisa jadi rumit. Misalnya, beberapa API UIKit Dynamics berubah sedikit antara beta dan rilis. Tidak ada yang besar, tetapi mereka akan merusak kode sampel apa pun yang ditulis terhadap API asli.
Zev Eisenberg

5
Apakah ada cara untuk menghidupkan kabur?
Ruben Martinez Jr.

3
@ B Anda dapat menghidupkan alfa dari tampilan efek visual. Ledakan.
Maciej Trybiło

2
UIBlurEffect luar biasa, tetapi perhatikan itu tidak bekerja pada perangkat yang lebih tua seperti iPad2 - Saya menghabiskan waktu berjam-jam untuk mencari tahu mengapa itu hanya menempatkan lapisan transparan di layar saya dan tidak kabur - itu semua karena saya menguji pada perangkat yang lebih tua
Keith

135

Berikut ini cara menggunakan UIVibrancyEffect dan UIBlurEffect dengan UIVisualEffectView

Tujuan-C:

// Blur effect
UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
[blurEffectView setFrame:self.view.bounds];
[self.view addSubview:blurEffectView];

// Vibrancy effect
UIVibrancyEffect *vibrancyEffect = [UIVibrancyEffect effectForBlurEffect:blurEffect];
UIVisualEffectView *vibrancyEffectView = [[UIVisualEffectView alloc] initWithEffect:vibrancyEffect];
[vibrancyEffectView setFrame:self.view.bounds];

// Label for vibrant text
UILabel *vibrantLabel = [[UILabel alloc] init];
[vibrantLabel setText:@"Vibrant"];
[vibrantLabel setFont:[UIFont systemFontOfSize:72.0f]];
[vibrantLabel sizeToFit];
[vibrantLabel setCenter: self.view.center];

// Add label to the vibrancy view
[[vibrancyEffectView contentView] addSubview:vibrantLabel];

// Add the vibrancy view to the blur view
[[blurEffectView contentView] addSubview:vibrancyEffectView];

Swift 4:

    // Blur Effect
    let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    blurEffectView.frame = view.bounds
    view.addSubview(blurEffectView)

    // Vibrancy Effect
    let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)
    let vibrancyEffectView = UIVisualEffectView(effect: vibrancyEffect)
    vibrancyEffectView.frame = view.bounds

    // Label for vibrant text
    let vibrantLabel = UILabel()
    vibrantLabel.text = "Vibrant"
    vibrantLabel.font = UIFont.systemFont(ofSize: 72.0)
    vibrantLabel.sizeToFit()
    vibrantLabel.center = view.center

    // Add label to the vibrancy view
    vibrancyEffectView.contentView.addSubview(vibrantLabel)

    // Add the vibrancy view to the blur view
    blurEffectView.contentView.addSubview(vibrancyEffectView)

1
Solusinya bekerja bahkan tanpa subclassing, cukup tentukanextension UILabel { override func tintColorDidChange() { textColor = tintColor; super.tintColorDidChange() } }
Palimondo

1
Apple tampaknya telah memperbaiki bug. Solusi subclass / ekstensi tidak lagi diperlukan di iOS 8 beta 2.
Benjamin Mayo

2
Terima kasih. Saya telah menguji dan mengkonfirmasi perbaikan bug dan mengedit jawabannya.
Matt Rundle

1
Saya mencoba menambahkan ini ke tampilan saya tetapi setiap kali saya menyajikan tampilan, itu menjadi kabur berulang-ulang sampai saya mendapatkan latar belakang putih ... Saya menghapus tampilan dengan removeFromSuperView setelah saya mengabaikannya tetapi saya mendapatkan hasil yang sama .. .. ada ide?
George Asda

@ GeorgeAsda bagaimana kalau alih-alih menelepon removeFromSuperView, Anda membuat [self.visualEffectView setHidden:NO];? Mengalokasikan dan menambahkan ke tampilan adalah operasi yang mahal daripada menyembunyikan atau menampilkan.
Yoon Lee

46

Anda juga dapat menggunakan pembuat antarmuka untuk membuat efek ini dengan mudah untuk situasi sederhana. Karena nilai-z dari tampilan akan tergantung pada urutan yang tercantum dalam Garis Besar Dokumen, Anda dapat menyeret UIVisualEffectViewke garis besar dokumen sebelum tampilan yang ingin Anda blur. Ini secara otomatis membuat bersarang UIView, yang merupakan contentViewproperti yang diberikan UIVisualEffectView. Sarang hal-hal dalam tampilan ini yang ingin Anda tampilkan di atas blur.

XCode6 beta5

Anda juga dapat dengan mudah memanfaatkan vibrancy UIVisualEffect, yang secara otomatis akan membuat sarang lain UIVisualEffectViewdalam garis besar dokumen dengan vibrancy diaktifkan secara default. Anda kemudian dapat menambahkan tampilan label atau teks ke elemen bersarang UIView(sekali lagi, contentViewproperti dari UIVisualEffectView), untuk mencapai efek yang sama dengan elemen UI "> slide to unlock".

masukkan deskripsi gambar di sini


Bisakah Anda mengonfirmasi bahwa apa yang terlihat benar-benar kabur? Gambar saya (apa yang Anda sebut "BackgroundPhoto" dalam hierarki Anda) hanya diredupkan di bawah Gaya Buram: Tampilan tembus gelap. (Versi rilis Xcode 6.01 dan menggunakan Simulator iOS)
tobinjim

Apa maksudmu 'hanya redup'? Anda tidak berpikir itu kabur?
ohhh

Oke, saya akan memeriksanya dalam beberapa jam.
ohhh

Terima kasih! Anda memiliki hierarki tampilan pada BackgroundPhoto Anda yang diciutkan dalam tangkapan layar ... Saya baru saja menggunakan UIImageView dan memberikan foto padanya (anjing berwarna terang dengan latar belakang hijau - definisi tajam antara kaki putih dan rumput hijau adalah sama tajamnya ketika ditutupi oleh tampilan efek visual seperti saat tidak).
tobinjim

1
Saya telah melihat bahwa mengubah jenis blur menjadi Dark, labelnya menjadi warna putih ...
Daniel

8

Saya lebih suka membuat Efek Visual melalui Storyboard - tidak ada kode yang digunakan untuk membuat atau memelihara Elemen UI. Ini memberi saya dukungan lansekap penuh juga. Saya telah membuat sedikit demo menggunakan UIVisualEffects dengan Blur dan juga Vibrancy.

Demo di Github


8

Jika ada yang mau jawabannya di Swift:

var blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark) // Change .Dark into .Light if you'd like.

var blurView = UIVisualEffectView(effect: blurEffect)

blurView.frame = theImage.bounds // 'theImage' is an image. I think you can apply this to the view too!

Perbarui:

Sampai sekarang, ini tersedia di bawah IB sehingga Anda tidak perlu kode apa pun untuk itu :)


2
-(void) addBlurEffectOverImageView:(UIImageView *) _imageView
{
    UIVisualEffect *blurEffect;
    blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];

    UIVisualEffectView *visualEffectView;
    visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];

    visualEffectView.frame = _imageView.bounds;
    [_imageView addSubview:visualEffectView];
}

Tambahkan beberapa teks dengan jawaban untuk bagaimana jawaban Anda membantu OP dalam memperbaiki masalah yang diposting
ρяσѕρєя K

0

Ini digunakan untuk mengaburkan latar belakang, baik terang atau gelap, sehingga teks dapat ditapis lebih mudah. Anda secara opsional dapat mengaktifkan vibrancy, yang menyebabkan teks ditampilkan dalam warna yang cerah dan kontras di samping blur.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.