CODEWITHSUNDEEP
iosuser-interfacetransparency
Alex Terreaux
Alex Terreaux

Reputation: 1941

Achieving transparent look in iOS

Take a look at the following screenshots. I would like to know how to obtain the translucent look in the user interface. How can I get started to make my UI look similar?

Example

enter image description here

Upvotes: 1

Views: 1815

Answers (1)

Ryan
Ryan

Reputation: 3993

This is a new API introduced in iOS 8. Apple's documentation lives here, and this question contains some sample code. Note - I've been having difficulty with it in the last two betas, so be prepared for some visual bugs.

For iOS 7, there is a simple (and tolerated) hack that lets you manipulate a UIToolBar to achieve a similar effect, although with less control. There's an open-source project here that abstracts this a bit.

edit - Here's some sample code if you're using Swift:

    // change .ExtraLight to .Light or .Dark to change the color of the blurred view
    let blurEffect = UIBlurEffect(style: .ExtraLight)
    let backgroundView = UIVisualEffectView(effect: blurEffect)
    backgroundView.frame = self.bounds
    backgroundView.autoresizingMask = .FlexibleWidth | .FlexibleHeight
    self.addSubview(backgroundView)

    let vibrancyView = UIVisualEffectView(effect: UIVibrancyEffect(forBlurEffect: blurEffect))
    vibrancyView.frame = self.bounds
    vibrancyView.autoresizingMask = .FlexibleWidth | .FlexibleHeight
    backgroundView.contentView.addSubview(vibrancyView)

    // Now, add your subviews to the vibrancyView.contentView
    // The effects are a bit tricky to get right with the color of your subviews, but here's how it's supposed to work:
    // - UIColor.whiteColor() shows up as pure, solid, (non-translucent) white
    // - UIColor.grayColor() shows up as essentially no change in the brightness of the underlying view, just blurred and vibrant

Upvotes: 1

Related Questions