วิธีการใช้ UIVisualEffectView เพื่อ Blur Image

ใครช่วยยกตัวอย่างการเบลอภาพให้บ้าง ฉันพยายามหารหัสมาพักหนึ่งแล้ว :( ยังใหม่อยู่ที่ obj c!

UIVisualEffectViewให้นามธรรมง่ายกว่าผลภาพที่ซับซ้อน ผลลัพธ์อาจส่งผลต่อเนื้อหาที่อยู่ด้านหลังมุมมองหรือเนื้อหาที่เพิ่มใน contentView ของมุมมอง

นำUIVisualEffectViewไปใช้กับมุมมองที่มีอยู่เพื่อใช้เอฟเฟกต์เบลอหรือความสั่นไหวให้กับมุมมองที่ออก หลังจากที่คุณเพิ่ม UIVisualEffectView เพื่อลำดับชั้นดูเพิ่ม subviews ใด ๆ ที่จะ contentView UIVisualEffectViewของ อย่าเพิ่มหัวข้อย่อยโดยตรงกับUIVisualEffectViewตัวเอง

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

เพียงแค่ใส่มุมมองเบลอนี้บน imageView นี่คือตัวอย่างใน Objective-C:

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

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

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

และรวดเร็ว:

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

visualEffectView.frame = imageView.bounds

imageView.addSubview(visualEffectView)

นี่คือวิธีใช้ UIVibrancyEffect และ UIBlurEffect กับ UIVisualEffectView

Objective-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];

สวิฟท์ 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)

คุณยังสามารถใช้ตัวสร้างส่วนต่อประสานเพื่อสร้างเอฟเฟกต์เหล่านี้ได้อย่างง่ายดายสำหรับสถานการณ์ที่เรียบง่าย เนื่องจากค่า z ของมุมมองจะขึ้นอยู่กับลำดับที่แสดงใน Document Outline คุณสามารถลาก a UIVisualEffectViewลงบนเค้าร่างเอกสารก่อนมุมมองที่คุณต้องการเบลอ นี้จะสร้างซ้อนกันUIViewซึ่งเป็นทรัพย์สินของที่กำหนดcontentView UIVisualEffectViewทำสิ่งต่าง ๆ ในมุมมองนี้ที่คุณต้องการให้ปรากฏบนเบลอ

นอกจากนี้คุณยังสามารถใช้ประโยชน์จากความสั่นสะเทือนUIVisualEffectซึ่งจะสร้างซ้อนกันโดยอัตโนมัติUIVisualEffectViewในโครงร่างเอกสารที่มีการเปิดใช้งานความสั่นสะเทือนตามค่าเริ่มต้น จากนั้นคุณสามารถเพิ่มป้ายกำกับหรือมุมมองข้อความให้กับองค์ประกอบซ้อนUIView(อีกครั้งcontentViewคุณสมบัติของUIVisualEffectView) เพื่อให้ได้ผลเช่นเดียวกับองค์ประกอบ UI "เลื่อนเพื่อปลดล็อค"

ฉันชอบสร้างเอฟเฟ็กต์ภาพผ่านสตอรีบอร์ด - ไม่ใช้รหัสในการสร้างหรือบำรุงรักษาองค์ประกอบ UI มันให้การสนับสนุนแนวนอนแบบเต็มเช่นกัน ฉันได้สาธิตการใช้ UIVisualEffects กับ Blur และ Vibrancy

การสาธิตเกี่ยวกับ Github

หากใครต้องการคำตอบใน 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!

อัปเดต:

ณ ตอนนี้มีให้บริการภายใต้ IB ดังนั้นคุณจึงไม่ต้องเขียนโค้ดอะไรเลย :)

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

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

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

สิ่งนี้ใช้เพื่อทำให้ฉากหลังเบลอไม่ว่าจะสว่างหรือมืดเพื่อให้สามารถวางข้อความได้ง่ายขึ้น คุณสามารถเลือกเปิดใช้งานการสั่นสะเทือนซึ่งเป็นสาเหตุให้ข้อความแสดงผลในสีที่สว่างและตัดกันพร้อมกับความพร่ามัว