Bagaimana cara menggunakan UIVisualEffectView untuk Mengaburkan Gambar?

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

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)

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)

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.

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".

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

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 :)

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

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

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

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.