titanium.cookbook-01-01-创建并理解window与view

最新推荐文章于 2025-09-10 20:47:27 发布

转载最新推荐文章于 2025-09-10 20:47:27 发布 · 66 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaozhanga4/archive/2012/04/06/2434453.html

文章标签：

#ui

window相当于一块屏幕，view相当于一个div层。window拥有全屏和模态化属性，view则没有这2个属性。

Titanium与Ti是一样效果的命名空间。

最终效果：

实现思路：

1、创建一个window作为我们的APP的屏幕，之后我们将添加其他元素来丰富我们的界面

创建window的语法：

var 变量名 = Ti.UI.createWindow({

　　属性: 值

})

2、创建一个view作为UI的一个显示层，你可以创建多个view，比如顶部的导航栏作为一个view，中部区域作为一个view，底部控制条作为一个view等等。

创建view的语法：

var 变量名 = Ti.UI.createView({

　　属性：值

})

3、单独定义一个变量，作为logo的左边距

var 变量 = (view.宽度 - 253) / 2;

可以看出，我们获取到view的宽度再作计算的。

4、创建一个imageview，用来显示我们的logo，在2中我们说到，一个window上可以同时具有多个view，用来显示不同的元素。

创建imageView的语法：

var 变量名 = Ti.UI.createImageView({

　　属性：值

});

5、添加imageview到view即添加logo到view

6、添加view到window

7、在程序中打开window

源代码：

app.js

//创建window对象
//var 变量 = Ti.UI.createWindow({window属性})
var win1 = Ti.UI.createWindow({
    width:320,
    height:480,
    top:0,
    left:0,
    backgroundImage:'background.png'
});
//创建view
var view = Ti.UI.createView({
   width:300,
   height:win1.height - 40,
   left:10,
   top:10,
   backgroundColor:'#fff',
   borderRadius:5 
});
//
var _logoMarginLeft = (view.width - 253) / 2 ;
//
var logo = Ti.UI.createImageView({
   image:'logo.png',
   width:253,
   height:96,
   left:_logoMarginLeft,
   top:0 
});
//
view.add(logo);
//
win1.add(view);
//
win1.open({fullscreen:true});