constructor() {
super('Hit Testing and Hiding');
this.outerView = new View();
this.outerView.backgroundColor = '#78aafd';
this.outerView.userInteractionEnabled = true;
this.outerView.on('tap', () => {
this.infoLabel.text = 'Tapped outer view';
this.selectedView = this.outerView;
});
this.addSubview(this.outerView);
this._selectedView = null;
this.innerView = new View();
this.innerView.backgroundColor = '#0078fd';
this.outerView.addSubview(this.innerView);
this.innerView.userInteractionEnabled = true;
this.innerView.on('tap', () => {
this.infoLabel.text = 'Tapped inner view 1';
this.selectedView = this.innerView;
});
this.innerView2 = new View();
this.innerView2.backgroundColor = '#78fd00';
this.outerView.addSubview(this.innerView2);
this.innerView2.userInteractionEnabled = true;
this.innerView2.on('tap', () => {
this.infoLabel.text = 'Tapped inner view 2';
this.selectedView = this.innerView2;
});
this.infoLabel = new Label();
this.addSubview(this.infoLabel);
this.hideSelectedButton = new Button('Toggle Hidden State');
this.addSubview(this.hideSelectedButton);
this.hideSelectedButton.hidden = true;
this.hideSelectedButton.on('tap', () => {
this._selectedView.hidden = !this._selectedView.hidden;
});
this.resetButton = new Button('Reset');
this.addSubview(this.resetButton);
this.resetButton.on('tap', () => {
this.outerView.hidden = this.innerView.hidden = this.innerView2.hidden = false;
this.infoLabel.text = null;
this.selectedView = null;
this.hideSelectedButton.hidden = true;
this.resetButton.hidden = true;
});
this.resetButton.hidden = true;
}
constructor() {
super('Views can be scaled');
this.orangeView = new View();
this.orangeView.backgroundColor = 'orange';
this.addSubview(this.orangeView);
this.blueView = new View();
this.blueView.backgroundColor = 'blue';
this.blueView.size.set(50, 50);
this.orangeView.addSubview(this.blueView);
this.button = new Button('Scale It');
this.button.insets.setAll(10);
this.addSubview(this.button);
this.button.on('tap', () => {
// blueView will be scaled as well without explicitly doing so
let newScale = this.orangeView.scale.x === 1 ? 0.5 : 1;
this.orangeView.scale.set(newScale, newScale);
});
}