CODEWITHSUNDEEP
iosuiviewios7uinavigationbar
SukruK
SukruK

Reputation: 560

How to make translucent to UIView in iOS7

In navigation bar, i can make translucent navigation bar style. But i can not make in UIView like that. How can I make translucent style in UIView?

Upvotes: 9

Views: 12995

Answers (4)

Axel Guilmin
Axel Guilmin

Reputation: 11746

Solution in Swift, compatible with Interface Builder

Create a file named BlurView.swift in your Xcode project :

import UIKit
@IBDesignable class BlurView : UIView {
    // Use the following property to set the tintColor. Set it to nil to reset.
    @IBInspectable var blurTintColor: UIColor! {
        set {
            toolbar.barTintColor = blurTintColor
        }
        get {
            return toolbar.barTintColor
        }
    }
    lazy var toolbar:UIToolbar = {
        // If we don't clip to bounds the toolbar draws a thin shadow on top
        self.clipsToBounds = true
        
        let toolbar = UIToolbar(frame: self.bounds)
        toolbar.translatesAutoresizingMaskIntoConstraints = false
        self.insertSubview(toolbar, atIndex: 0)
        let views = ["toolbar": toolbar]
        self.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[toolbar]|", options: [], metrics: nil, views: views))
        self.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[toolbar]|", options: [], metrics: nil, views: views))
        
        return toolbar
    }()
}

Then you can use it programmatically or directly in IB.

Programmatically

Create and use a BlurView the same way you use any UIVIew.

var myView:BlurView // ...

// Activate the translucent effect by setting `blurTintColor`
myView.blurTintColor = UIColor.redColor() // Or any color
// If you need to desactivate the effect later
// myView.blurTintColor = nil

##With Interface Builder Add a UIView and set its custom view to BlurView :
enter image description here
Then you can set the Blur Tint Color to activate the translucent effect :
enter image description here
Note: the blur will only appear at runtime.

##Result

BlurView

Inspired by https://github.com/JagCesar/iOS-blur

Upvotes: 14

rule
rule

Reputation: 5677

I recommend this one: https://github.com/ivoleko/ILTranslucentView It provides native iOS 7+ blur (translucent) effect

Upvotes: 2

Durican Radu
Durican Radu

Reputation: 1337

A hack would be using a UIToolBar just like you would use a normal UIView, since in iOS 7 it does the blur for you, better than any other attempts of a blur effect custom UIView. (This will only work in iOS7, for iOS 6 just add a normal alpha)

 UIToolbar *toolBar = [[UIToolBar alloc] init];
 [toolBar setFrame:kYourFrame];
 if (floor(NSFoundationVersionNumber) <= NSFoundationVersionNumber_iOS_6_1) {
      [toolBar setAlpha:0.9];
 }
 [self.view addSubview:toolBar];

Upvotes: 12

Yong Li
Yong Li

Reputation: 266

You can add a blur layer from UIToolBar to the view which you want it to be translucent.

Look at this open source project:https://github.com/JagCesar/iOS-blur

Upvotes: 6

Related Questions