BlurView

API Reference: BlurView

BlurView lets you blur the underlying object. The common use-case is to blur full screen layouts by adding BlurView on top of the layout.

scripts/page1.ts
import Page1Design from 'generated/pages/page1';
import BlurView from 'sf-core/ui/blurview';
import FlexLayout from 'sf-core/ui/flexlayout';
import ImageView from 'sf-core/ui/imageview';
import Screen from 'sf-core/device/screen';
import Image from 'sf-core/ui/image';
import Button from 'sf-core/ui/button';
export default class Page1 extends Page1Design {
router: any;
private imgSmartface: ImageView;
private myButton: Button;
private myBlurView: BlurView;
private isShown = false;
constructor() {
super();
this.onShow = onShow.bind(this, this.onShow.bind(this));
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
}
initImageView() {
const imgSmartface = new ImageView({
top: 0,
right: 0,
left: 0,
bottom: Screen.height / 2,
imageFillType: ImageView.FillType.ASPECTFIT
});
//@ts-ignore
this.layout.addChild(imgSmartface, 'imgSmartface', '.sf-imageview');
imgSmartface.image = Image.createFromFile('images://smartface.png');
this.imgSmartface = imgSmartface;
}
initBlurView() {
const myBlurView = new BlurView({
top: 0,
right: 0,
left: 0,
bottom: Screen.height / 2,
positionType: FlexLayout.PositionType.ABSOLUTE
});
myBlurView.android.rootView = this.layout;
this.myBlurView = myBlurView;
//@ts-ignore
this.layout.addChild(myBlurView, 'myBlurView');
}
initButton() {
const myButton = new Button({
text: "Show"
});
this.myButton = myButton;
//@ts-ignore
this.layout.addChild(myButton, 'myButton', '.sf-button');
myButton.onPress = () => {
this.layout.removeChild(this.myBlurView);
if (this.isShown) {
//@ts-ignore
this.layout.addChild(this.myBlurView, 'myBlurView');
}
this.myButton.text = this.isShown ? "Show" : "Hide";
this.isShown = !this.isShown;
this.layout.applyLayout();
};
}
}
function onShow(superOnShow) {
superOnShow();
}
function onLoad(superOnLoad) {
superOnLoad();
this.initImageView();
this.initBlurView();
this.initButton();
}