Titanium Mobile

# Titanium.UI.iOS.BlurView

A Titanium.UI.iOS.BlurView object gives you an easy way implement some complex visual effects. The blur effect is applied to every view the blur view is added to by default. You can also place the blur view above other views and all visible views layered under the blur view are blurred as well.

For more information on BlurView, please refer to the official Apple documentation. Note: Apple introduced two new constants BLUR_EFFECT_STYLE_REGULAR and BLUR_EFFECT_STYLE_PROMINENT in iOS 10. These are internally mapped to BLUR_EFFECT_STYLE_LIGHT and BLUR_EFFECT_STYLE_EXTRA_LIGHT.

Availability
5.4.0
9.2.0
Extends
Titanium.UI.View

# Examples

# Basic Blur View

The following example shows how to create a simple blur view:

var win = Ti.UI.createWindow({
    backgroundColor: "#fff"
});

// Reference image (or view)
var img = Ti.UI.createImageView({
    image: "/default_app_logo.png",
    top: 100,
    width: 300,
    height: 300
});

// Blur view
var blur = Ti.UI.iOS.createBlurView({
    width: Ti.UI.FILL,
    height: Ti.UI.FILL
});

img.add(blur);

// Effect controls
var tabs = Ti.UI.iOS.createTabbedBar({
    labels: ["Extra light", "Light", "Dark"],
    bottom: 100
});

// Available blur effects
var effects = [
    Ti.UI.iOS.BLUR_EFFECT_STYLE_EXTRA_LIGHT,
    Ti.UI.iOS.BLUR_EFFECT_STYLE_LIGHT,
    Ti.UI.iOS.BLUR_EFFECT_STYLE_DARK,
];

tabs.addEventListener("click", function(e) {
    blur.effect = effects[e.index];
});

win.add(tabs);
win.add(img);
win.open();

# Properties

# effect

Availability
5.4.0
9.2.0
effect :Number

The effect you provide for the view.

This API can be assigned the following constants:

Default: undefined (no effect is applied)

Contents