UI FeedBack

Vibration

Vibration enables haptics enhance interactions and convey useful information to users through the sense of touch. Haptic effect simulates physical vibrates when an action triggered. On iOS vibrate which has three level as high, medium and low works on only on iPhone7 and above. Android Vibration Effect's time can be managed depending given value.
TypeScript
1
import PageSampleDesign from 'generated/pages/page1';
2
import FlexLayout from '@smartface/native/ui/flexlayout';
3
import Application from '@smartface/native/application';
4
import Button from '@smartface/native/ui/button';
5
import System from '@smartface/native/device/system';
6
import Invocation from '@smartface/native/util/iOS/invocation';
7
8
//You should create new Page from UI-Editor and extend with it.
9
export default class Sample extends PageSampleDesign {
10
11
myButton: Button;
12
13
constructor() {
14
super();
15
// Overrides super.onShow method
16
this.onShow = onShow.bind(this, this.onShow.bind(this));
17
// Overrides super.onLoad method
18
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
19
20
this.layout.flexDirection = FlexLayout.FlexDirection.COLUMN;
21
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
22
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
23
}
24
}
25
26
/**
27
* @event onShow
28
* This event is called when a page appears on the screen (everytime).
29
* @param {function} superOnShow super onShow function
30
* @param {Object} parameters passed from Router.go function
31
*/
32
function onShow(superOnShow: () => void) {
33
const { headerBar } = this;
34
superOnShow();
35
Application.statusBar.visible = false;
36
headerBar.visible = false;
37
}
38
39
/**
40
* @event onLoad
41
* This event is called once when page is created.
42
* @param {function} superOnLoad super onLoad function
43
*/
44
function onLoad(superOnLoad: () => void) {
45
superOnLoad();
46
47
this.myButton = new Button({
48
text: "Vibrate",
49
onPress: () => {
50
//Android
51
if (System.OS === System.OSType.ANDROID) {
52
System.vibrate({ millisecond: 50 });
53
}
54
//iOS
55
if (System.OS === System.OSType.ANDROID) {
56
//@ts-ignore
57
let feedbackAlloc = Invocation.invokeClassMethod("UIImpactFeedbackGenerator", "alloc", [], "id");
58
// 0: Light , 1: Medium , 2: Heavy
59
//@ts-ignore
60
let argStyle = new Invocation.Argument({
61
type: "NSInteger",
62
value: 0
63
});
64
//@ts-ignore
65
let feedbackGenerator = Invocation.invokeInstanceMethod(feedbackAlloc, "initWithStyle:", [argStyle], "NSObject");
66
//@ts-ignore
67
Invocation.invokeInstanceMethod(feedbackGenerator, "prepare", []);
68
//@ts-ignore
69
Invocation.invokeInstanceMethod(feedbackGenerator, "impactOccurred", []);
70
feedbackGenerator = undefined;
71
feedbackAlloc = undefined;
72
}
73
}
74
});
75
this.layout.addChild(this.myButton, "myButton", ".sf-button", {
76
width: 100,
77
height: 50,
78
textColor: "#000000",
79
backgroundColor: "#00A1F1"
80
});
81
82
}
83
Copied!

Using Vibrate Effect With Notifications

When a notification is received vibrate effect can be used all the way.
TypeScript
1
import System from '@smartface/native/ui/system';
2
Notifications.onNotificationReceive = function(e): void {
3
//Android
4
if (System.OS === System.OSType.ANDROID) {
5
System.vibrate({ millisecond: 50 });
6
}
7
//iOS
8
if (System.OS === System.OSType.IOS) {
9
var feedbackAlloc = Invocation.invokeClassMethod("UIImpactFeedbackGenerator", "alloc", [], "id");
10
// 0: Light , 1: Medium , 2: Heavy
11
var argStyle = new Invocation.Argument({
12
type: "NSInteger",
13
value: 0
14
});
15
var feedbackGenerator = Invocation.invokeInstanceMethod(feedbackAlloc, "initWithStyle:", [argStyle], "NSObject");
16
Invocation.invokeInstanceMethod(feedbackGenerator, "prepare", []);
17
Invocation.invokeInstanceMethod(feedbackGenerator, "impactOccurred", []);
18
feedbackGenerator = undefined;
19
feedbackAlloc = undefined;
20
}
21
}
Copied!
Last modified 2mo ago