我正在尝试模仿当您在照片上单击更多时在 iphone 上弹出的钛合金屏幕。我认为这是一个“模态窗口”。目前,我已经尝试创建了一个只有几个按钮的模态窗口。稍后我会介绍图标。但是模态窗口占据了整个屏幕,我试图调整它的大小但是没有用。非常感谢任何关于如何重现左侧屏幕的建议: http://9to5mac.files.wordpress.com/2012/08/screen-shot-2012-08-09-at-12-24-18-pm.png 我也想尝试在 Android 中重现类似的东西。我的原始代码如下:
var ModalWindow = Ti.UI.createWindow({
title:'modal window',
backgroundColor:'black',
height: "80%",
width: '200dp'
});
var PlayStoreBtn= Titanium.UI.createButton({
title: 'Play Store',
top: '10%'
});
var youTubeBtn= Titanium.UI.createButton({
title: 'YouTube',
top: '20%'
});
var facebookBtn= Titanium.UI.createButton({
title: 'Facebook',
top: '30%'
});
var mySpaceBtn= Titanium.UI.createButton({
title: 'MySpace',
top: '40%'
});
var twitterBtn= Titanium.UI.createButton({
title: 'Twitter',
top: '50%'
});
var deleteBtn= Titanium.UI.createButton({
title: 'Delete',
top: '60%'
});
var cancelBtn= Titanium.UI.createButton({
title: 'Cancel',
top: '70%'
});
cancelBtn.addEventListener("click", function (e){
ModalWindow.close();
})
ModalWindow.add(PlayStoreBtn);
ModalWindow.add(youTubeBtn);
ModalWindow.add(facebookBtn);
ModalWindow.add(mySpaceBtn);
ModalWindow.add(twitterBtn);
ModalWindow.add(deleteBtn);
ModalWindow.add(cancelBtn);
ModalWindow.open({modal:true});
});
最佳答案
要制作不占满整个屏幕的模态窗口,请不要使用 Ti.UI.Window 组件!这些都是重量级的方式。使用 Ti.UI.View。
这是一个跨平台的 View ,它会弹出一个模态窗口,它只占高度的 80,嵌套在屏幕的底部,它还会阻止所有低于模态的输入:
module.exports = function() {
var background = Ti.UI.createView({
backgroundColor : '#000',
opacity : 0.4,
width : Ti.UI.FILL,
height : Ti.UI.FILL
});
var container = Ti.UI.createView({
width : Ti.UI.FILL,
height : Ti.UI.FILL
});
// This is the view that contains all the buttons and shows up
// It lays on top of the transparent background
var modal =Ti.UI.createView({
width : Ti.UI.FILL,
height : 80%,
bottom : 0,
background : '#555,
borderColor : '#888',
borderRadius : 8,
borderWidth : 8,
...More styling, maybe even a background image...
});
...Add your buttons to the modal here...
container.add(background);
container.add(modal);
return container;
};
像这样使用它,假设它在一个名为 Modal.js 的文件中。
var Modal = require('Modal');
var modalView = new Modal();
关于android - 创建一个非全屏模式窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18589531/