使用Titanium Mobile开发iPhone/Android应用（03）- Twitter客户端之页面调整

美化Twitter客户端

上回中，我们坐了一个把自己的Tweeter表示出来的页面，这只仅仅是把Tweet的正文并排放在页面上而已，这回我们要把从Twitter取的情报中的Tweeter时间，用户名，用户头像信息也表示出来。这篇中我们要说或如何将页面美化。

那么我们就尽早进入修改代码，修改前回做好的updateTimeLine函数。首先，在做成的页面功能的基础上，确认各个技能。

function updateTimeline (timeline) {
    var currentData = [];
    for (var i=0;i<timeline.length;i++) {
        var tweet = timeline[i];
        //变更开始
        var row = Ti.UI.createTableViewRow(
            {
                height: 150,
                layout: 'absolute'
            }
        );

        var imageView = Ti.UI.createImageView(
            {
                image: tweet.user.profile_image_url,
                width: 48,
                height: 48,
                top: 5,
                left: 5
            }
        );
        row.add(imageView);

        var nameLabel = Ti.UI.createLabel(
            {
                width: 120,
                height: 12,
                left: 58,
                top: 5,
                fontSize: 6,
                fontWeight: 'bold',
                color: '#2b4771'
            }
        );
        nameLabel.text = tweet.user.screen_name;
        row.add(nameLabel);

        var commentLabel = Ti.UI.createLabel(
            {
                width: 257,
                left: 58,
                top: 18,
                height: 100,
                fontSize: 8
            }
        );
        commentLabel.text = tweet.text;
        row.add(commentLabel);

        var dateLabel = Ti.UI.createLabel(
            {
                width: 200,
                height: 12,
                left: 58,
                bottom: 8,
                fontSize: 6
            }
        );
        dateLabel.text = tweet.created_at;
        row.add(dateLabel);
        //变更结束

        currentData.push(row);
    }
    tableView.setData(currentData);
}

启动Titanium的开发环境就能看到以下页面。



还不是特别的好，初步表示出了Twitter的TimeLine。那么页面机能部分我们一点点的说明一下。

Window和View

在Titanium中，把盖住整个页面的对象叫：“window”，可以考虑成Javascript的DOM中的Window，也可以作为iOS SDK的UIWindow考虑。在window上还可以放置多个view，而且在view上还可以在重叠放置view，上回我们说的Ti.UI.TableView和Ti.UI.TableViewRow也都是view的一种。这个view跟iOS SDK中的UIView基本相同。

关于view的布局，跟使用CSS调整HTML布局很相似，也能设定Titanium的view的布局。

var nameLabel = Ti.UI.createLabel(
    {
        width: 120,
        height: 12,
        left: 58,
        top: 5,
        fontSize: 6,
        fontWeight: 'bold',
        color: '#2b4771'
    }
);

可以通过width和hight来指定view的大小，通过top, buttom, right, left来指定view的位置，以及font的指定，文件颜色的设置等都可以同样设置。

布局基准

使用CSS对HTML进行布局调整，能够选择使用static, relative等来指定position的基准。同样，Titanium中基准位置，view的放置方法也有2中可以选择。

（1）什么也没有设置的时候

默认的处理是，把父view作为Ti.UI.TableViewRow的坐标基准， 明确指定的话，需要设置为：layout: 'absolute'。设置top的属性值，可以指定计算TableViewRow从上部往下的像素数，right, left, bottom分别是右端，左端，下部的像素数。

vertical

layout参数中设成vertical的话，并不是绝对位置的意思，而是设定了往TableViewRow中追加view的基准。

刚才的代码我们试着变一下：

function updateTimeline (timeline) {
    var currentData = [];
    for (var i=0;i<timeline.length;i++) {
        var tweet = timeline[i];
        //再次这里开始
        var row = Ti.UI.createTableViewRow(
            {
                height: 150,
                layout: 'vertical'
            }
        );

        var imageView = Ti.UI.createImageView(
            {
                image: tweet.user.profile_image_url,
                width: 48,
                height: 48,
                top: 5,
                left: 5
            }
        );
        row.add(imageView);

        var nameLabel = Ti.UI.createLabel(
            {
                width: 120,
                height: 12,
                left: 58,
                top: -48,
                fontSize: 6,
                fontWeight: 'bold',
                color: '#2b4771'
            }
        );
        nameLabel.text = tweet.user.screen_name;
        row.add(nameLabel);

        var commentLabel = Ti.UI.createLabel(
            {
                width: 257,
                left: 58,
                top: 1,
                height: 100,
                fontSize: 8
            }
        );
        commentLabel.text = tweet.text;
        row.add(commentLabel);

        var dateLabel = Ti.UI.createLabel(
            {
                width: 200,
                height: 12,
                left: 58,
                top: 5,
                fontSize: 6
            }
        );
        dateLabel.text = tweet.created_at;
        row.add(dateLabel);

        //修改结束
        currentData.push(row);
    }
    tableView.setData(currentData);
}

变成这样的代码后，大眼一看是没什么变化的。但是在设定vertical之间追加指定了view的top基准。top中也可以设置成负数，使用vertical可以做很细微的页面的调整。不要考虑计算各个view的绝对位置就能够布局页面，指定vertical就能够很方便的修改页面布局了。

（2）设置成auto

当height中设置成 'auto' 的时候，他也能自动调整高度把表示内容全部显示出来。上面的例子中height参数的值全部设置成'auto'（但是ImageView的height除外）之后，将会看到一下页面：



这种也是很方便的布局调整方法。

显示图像

使用ImageView来表示Twitter的用户头像部分。ImageView是很方便的一个View，只需要指定url后就能显示出来图像。不是是表示http开始的网络图像，Project内部保存的图像也能显示。下边的代码就是显示Project中图像的例子。

var imageView = Ti.UI.createImageView(
    {
       image: 'iphone/appicon.png',
       //文件名是相对于Project的Resorces文件夹
       width: 48,
       height: 48,
       top: 5,
       left: 5
    }
);
row.add(imageView);

分割代码

直到这里我们编写的所有代码就集中在一个文件中，这样文件就变得很长。很长大代码集中在一个文件中，不只是看起来不好，调试也变的很困难，我们需要分割文件。

Titanium中有好几种分割文件的方法，这里我们说一下指定文件做成window并且打开的方法。以window为单位能够把代码分割开来，也能很简单的按照机能把代码分割。

截止到编写的app.js我们分割成以下两个文件。

app.js

Titanium.UI.setBackgroundColor('#000');

var tabGroup = Titanium.UI.createTabGroup({});

var win1 = Titanium.UI.createWindow({
    url: 'table_view.js',
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
    window:win1
}); 

win1.hideTabBar();

tabGroup.addTab(tab1);  
tabGroup.open();

table_view.js

var win = Ti.UI.currentWindow;
var data = [];
var tableView = Ti.UI.createTableView({
    data:data
});

function updateTimeline (timeline) {
    var currentData = [];
    for (var i=0;i<timeline.length;i++) {
        var tweet = timeline[i];
        var row = Ti.UI.createTableViewRow(
            {
                height: 150,
                layout: 'vertical'
            }
        );

        var imageView = Ti.UI.createImageView(
            {
                image: 'iphone/appicon.png',
                width: 48,
                height: 48,
                top: 5,
                left: 5
            }
        );
        row.add(imageView);

        var nameLabel = Ti.UI.createLabel(
            {
                width: 120,
                height: 12,
                left: 58,
                top: -48,
                fontSize: 6,
                fontWeight: 'bold',
                color: '#2b4771'
            }
        );
        nameLabel.text = tweet.user.screen_name;
        row.add(nameLabel);

        var commentLabel = Ti.UI.createLabel(
            {
                width: 257,
                left: 58,
                top: 1,
                height: 100,
                fontSize: 8
            }
        );
        commentLabel.text = tweet.text;
        row.add(commentLabel);

        var dateLabel = Ti.UI.createLabel(
            {
                width: 200,
                height: 12,
                left: 58,
                top: 5,
                fontSize: 6
            }
        );
        dateLabel.text = tweet.created_at;
        row.add(dateLabel);

        currentData.push(row);
    }
    tableView.setData(currentData);
}

var xhr = Ti.Network.createHTTPClient();
var user = 'hatenatech';
var url = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=" + user;
xhr.open('GET', url);
xhr.onload = function() {
    var timeline = JSON.parse(this.responseText);
    updateTimeline(timeline);
};
xhr.send();

win.add(tableView);

app.js的内容还原到最初的例子代码，画表格的机能移到新作的table_view.js当中。需要主要看的一点是，app.js的createWindow的参数中，url的指定方法。使用这个方法可以在新的window中打开指定的JavaScript文件。

var win1 = Titanium.UI.createWindow({
    url: 'table_view.js', //注意这里!
    title:'Tab 1',
    backgroundColor:'#fff'
});

还有一个需要注意的是，在新作的table_view.js文件中，

var win1 = Ti.UI.currentWindow;

这段代码是追加到最开始的。分割前的代码中，我们可以看到是把view追加到了全局变量为win1的window中。然后分割后的代码就不在使用这个变量了。在使用createWindow指定的文件的代码中，打开window的父文件中的变量是不能使用的。具体来说就是，在table_view.js中是不能访问app.js中定义的变量的。

在那里，需要改变成，使用currentWindow参数来获取当前window，然后追加view。

其他文件当中的变量不能使用的话，也就是说scope发生了改变。分离每个window当中的变量是很方便的结构。那么从一个window到一个window数据的传递就需要费点儿事了。这个基本上没有什么大的问题，从此以后开发过程中，做成新的window的时候要积极地分割成多个文件。

总结

这回我们说了一下Window和View的关系以及布局的调整方法。而且在后半部分还说了一下开发过程中把文件分割成多个文件的方法。下一回我们将说一下使用OAuth来调用API，朝着做一个像样的Twitter客户端方向编写代码。