Titanium Mobileで作る! iPhone/Androidアプリ

第3回 TitaniumでTwitterクライアント──レイアウトの調整

この記事を読むのに必要な時間:およそ 6 分

前回の記事が公開された直後からTitaniumには大きなバージョンアップがあったので,今回はTwitterクライアントの続きを始める前に,そのお知らせから始めます。

Titanium Moble 1.5.1 リリース

前回までの記事は Titanium Mobile 1.4.2 で動作確認を行いながら執筆していたのですが,この度新バージョンの 1.5.1 がリリースされました。開発元のAppceleratorによると,この1.5系列によってAndroidでの開発はベータ版から正式版になったという扱いのようです。本連載ではまだAndroid開発について説明していませんが,Intent,Activity,Menuボタンからのメニュー表示といったAndroidらしい機能が使えるようになったので,Androidでの開発もいよいよ面白くなってきたと言えるでしょう。Android SDKのインストールなど開発環境の整備が少し難しいのですが,今までの連載のサンプルはAndroidでも動作しますので興味のある方は是非トライしてみてください。

また,iPhoneで開発を行っている方も,Titanium Mobile 1.5.1をダウンロードするように即すダイアログをTitanium上で見ているかもしれません。1.4.2から利用されている方は,現状のプロジェクトは設定を変えなければ1.4.2でコンパイルされ続けますし,1.5.1でも今までのコードは動作しますので,新しく始めた方や1.5.1に設定を変更された方もサンプルコードの動作にはまったく問題ありません。

ツイートを綺麗に表示しよう

さて前置きはこのぐらいで本題に入りましょう。前回は自分のツイートが一欄できるところまで実装しましたが,これではツイートの本文がただ並んでいるだけの状態です。Twitterからとれる情報には,ツイートした時間や,ユーザー名,ユーザーアイコンの情報も入っています。今回はこれらの情報を綺麗にレイアウトしていく方法を解説します。

では早速次のようにコードを変更してみましょう。前回作った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のタイムラインらしくなってきました。ではこのレイアウトの機能について一つ一つ解説していきましょう。

WindowとView

画面全体を覆っている一番下の部分のことをTitaniumでは「window」と呼んでいます。JavascriptのDOMにおけるWindowと考えてもよいですし,iOS SDKのUIWindowと同じようなものと考えてよいと思います。windowの上には複数のviewを配置することができます。また,viewの上に,さらにviewを重ねていくこともできます。前回までに説明したUITableViewもUITableViewRowも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の指定や,文字色についても同様に指定できます。

著者プロフィール

倉井龍太郎(くらいりゅうたろう)

株式会社はてな アプリケーションエンジニア。

スマートフォンアプリからSQLチューニングまで幅広く格闘中。好きな言語はRuby。

URLhttp://d.hatena.ne.jp/r_kurain/
Twitter@kurain

コメント

コメントの記入