Erstellen einer verschwommenen Überlagerungsansicht

Question

In der Musik-App des neuen iOS sehen wir ein Albumcover hinter einer Ansicht, die es verwischt.

Wie kann so etwas erreicht werden? Ich habe die Dokumentation gelesen, aber dort nichts gefunden.

Answer 1

Du kannst UIVisualEffectView verwenden, um diesen Effekt zu erzielen. Dies ist eine natürliche API, die für Leistung und gute Akkulaufzeit optimiert wurde und außerdem einfach zu implementieren ist.

Swift:

//wende den Blur-Effekt nur an, wenn der Benutzer die Transparenzeffekte nicht deaktiviert hat
if !UIAccessibility.isReduceTransparencyEnabled {
    view.backgroundColor = .clear

    let blurEffect = UIBlurEffect(style: .dark)
    let blurEffectView = UIVisualEffectView(effect: blurEffect)
    //immer den gesamten Bildschirm ausfüllen
    blurEffectView.frame = self.view.bounds
    blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

    view.addSubview(blurEffectView) //wenn du mehr UIViews hast, verwende eine insertSubview-API, um sie dort zu platzieren, wo sie benötigt werden
} else {
    view.backgroundColor = .black
}

Objective-C:

//wende den Blur-Effekt nur an, wenn der Benutzer die Transparenzeffekte nicht deaktiviert hat
if (!UIAccessibilityIsReduceTransparencyEnabled()) {
    self.view.backgroundColor = [UIColor clearColor];

    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
    UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    //immer den gesamten Bildschirm ausfüllen
    blurEffectView.frame = self.view.bounds;
    blurEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;

    [self.view addSubview:blurEffectView]; //wenn du mehr UIViews hast, verwende eine insertSubview-API, um sie dort zu platzieren, wo sie benötigt werden
} else {
    self.view.backgroundColor = [UIColor blackColor];
}

Wenn du diesen Ansichtscontroller modal präsentierst, um den Hintergrundinhalt zu verwischen, musst du den Modalpräsentationsstil auf Über aktuellen Kontext setzen und die Hintergrundfarbe auf transparent setzen, um sicherzustellen, dass der darunterliegende Ansichtscontroller sichtbar bleibt, sobald dieser darüber präsentiert wird.

Answer 2

Hier ist eine einfache Möglichkeit, benutzerdefinierten Unschärfe hinzuzufügen, ohne mit privaten APIs zu kämpfen, indem UIViewPropertyAnimator verwendet wird:

Als Erstes deklarieren Sie eine Klassenproperty:

var blurAnimator: UIViewPropertyAnimator!

Dann setzen Sie Ihre Unschärfe-Ansicht in viewDidLoad():

let blurEffectView = UIVisualEffectView()
blurEffectView.backgroundColor = .clear
blurEffectView.frame = view.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(blurEffectView)

blurAnimator = UIViewPropertyAnimator(duration: 1, curve: .linear) { [blurEffectView] in
    blurEffectView.effect = UIBlurEffect(style: .light)
}

blurAnimator.fractionComplete = 0.15 // legen Sie die Unschärfe-Intensität fest.    

Hinweis: Diese Lösung ist nicht für UICollectionView/UITableView-Zellen geeignet

Answer 3

Ich habe mich entschieden, eine in Objective-C geschriebene Version der akzeptierten Antwort zu veröffentlichen, um in dieser Frage mehr Optionen anzubieten..

- (UIView *)applyBlurToView:(UIView *)view withEffectStyle:(UIBlurEffectStyle)style andConstraints:(BOOL)addConstraints
{
  // wenden Sie den Weichzeichnungseffekt nur an, wenn der Benutzer die Transparenzeffekte nicht deaktiviert hat
  if(!UIAccessibilityIsReduceTransparencyEnabled())
  {
    UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:style];
    UIVisualEffectView *blurEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    blurEffectView.frame = view.bounds;

    [view addSubview:blurEffectView];

    if(addConstraints)
    {
      // fügen Sie Auto-Layout-Einschränkungen hinzu, damit der Weichzeichnungseffekt den Bildschirm beim Drehen des Geräts ausfüllt
      [blurEffectView setTranslatesAutoresizingMaskIntoConstraints:NO];

      [view addConstraint:[NSLayoutConstraint constraintWithItem:blurEffectView
                                                       attribute:NSLayoutAttributeTop
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:view
                                                       attribute:NSLayoutAttributeTop
                                                      multiplier:1
                                                        constant:0]];

      [view addConstraint:[NSLayoutConstraint constraintWithItem:blurEffectView
                                                       attribute:NSLayoutAttributeBottom
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:view
                                                       attribute:NSLayoutAttributeBottom
                                                      multiplier:1
                                                        constant:0]];

      [view addConstraint:[NSLayoutConstraint constraintWithItem:blurEffectView
                                                       attribute:NSLayoutAttributeLeading
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:view
                                                       attribute:NSLayoutAttributeLeading
                                                      multiplier:1
                                                        constant:0]];

      [view addConstraint:[NSLayoutConstraint constraintWithItem:blurEffectView
                                                       attribute:NSLayoutAttributeTrailing
                                                       relatedBy:NSLayoutRelationEqual
                                                          toItem:view
                                                       attribute:NSLayoutAttributeTrailing
                                                      multiplier:1
                                                        constant:0]];
    }
  }
  else
  {
    view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.7];
  }

  return view;
}

Die Einschränkungen könnten entfernt werden, wenn Sie möchten, falls Sie nur den Hochformatmodus unterstützen oder ich füge einfach eine Option zu dieser Funktion hinzu, um sie zu verwenden oder nicht..

Answer 4

Mit Xcode können Sie es leicht tun. Befolgen Sie die Schritte von Xcode. Ziehen Sie den visuellen Effektview auf Ihre UIView oder Ihr ImageView.

Viel Spaß beim Codieren :)

Answer 5

Ich glaube nicht, dass ich den Code posten darf, aber der obige Beitrag, der den WWDC-Beispielcode erwähnt, ist korrekt. Hier ist der Link: https://developer.apple.com/downloads/index.action?name=WWDC%202013

Die Datei, nach der du suchst, ist die Kategorie auf UIImage und die Methode ist applyLightEffect.

Wie ich oben in einem Kommentar angemerkt habe, hat der Apple Blur Sättigung und andere Effekte neben dem Blur. Ein einfacher Blur wird nicht ausreichen, wenn du ihren Stil nachahmen möchtest.