2011年9月7日水曜日

LinearLayout (動的に生成する)

前回はxml内にLinearLayoutを記述して画面レイアウトを静的に作成しました。機種によって画面のサイズは様々ですが、画面のサイズにあわせてxmlファイルを用意すれば、小さい画面用・大きい画面用のレイアウトを作ることができます。また画面サイズは同じでも、縦長用・横長用のレイアウトをそれぞれ作ることもできます。このあたりについてはまた別に機会にご紹介しましょう。

xmlを記述する方法とは別に、コードを記述して動的に画面レイアウトを作成する方法もあります。動的に作ることのメリットは、表示させたい内容や件数によってレイアウトを変更できるところでしょう。ターゲットの画面がQVGA・HVGA・WVGAの3種だとした場合、もちろんデザインにもよりますが、静的に作ると画面サイズ3種×縦横2種の計6種類のxmlファイルを用意する必要があるかもしれません。動的に作るのであれば、画面サイズをもとに座標や件数を計算して表示させることができます。

今回は動的にUIを生成する第一歩として、シンプルな例を挙げてみます。



動的に画面レイアウトを作成する

以下の例は、前回のLinearLayoutTest1cを動的に作るようにしてみました。画面を4分の1に区切って、それぞれの中央にテキストを表示します。

Androidプロジェクトの設定
プロジェクト名:LinearLayoutTest2
ビルドターゲット:Android 2.1-update1
アプリケーション名:LinearLayoutTest2
パッケージ名:jp.co.triware.samples.LinearLayoutTest2
アクティビティーの作成:LinearLayoutTest2
最小SDKバージョン:7
LinearLayoutTest2.java
package jp.co.triware.samples.LinearLayoutTest2;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.widget.LinearLayout;
import android.widget.TextView;

public class LinearLayoutTest2 extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        makeLinearLayoutTest2();
    }

    private void makeLinearLayoutTest2() {
        // 上段のLinearLayout
        LinearLayout.LayoutParams lpTop
            =   new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.FILL_PARENT,
                LinearLayout.LayoutParams.FILL_PARENT);
        lpTop.weight = 0.5f;
        LinearLayout llTop = new LinearLayout(this);
        llTop.setOrientation(LinearLayout.HORIZONTAL);
        llTop.setLayoutParams(lpTop);
        llTop.setGravity(Gravity.CENTER_VERTICAL);
        // 上段・左側のTextView
        LinearLayout.LayoutParams lpTopLeft
            =   new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.FILL_PARENT,
                LinearLayout.LayoutParams.WRAP_CONTENT);
        lpTopLeft.weight = 0.5f;
        TextView tvTopLeft = new TextView(this);
        tvTopLeft.setLayoutParams(lpTopLeft);
        tvTopLeft.setGravity(Gravity.CENTER);
        tvTopLeft.setText("左上");
        // 上段・右側のTextView
        LinearLayout.LayoutParams lpTopRight
            =   new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.FILL_PARENT,
                LinearLayout.LayoutParams.WRAP_CONTENT);
        lpTopRight.weight = 0.5f;
        TextView tvTopRight = new TextView(this);
        tvTopRight.setLayoutParams(lpTopRight);
        tvTopRight.setGravity(Gravity.CENTER);
        tvTopRight.setText("右上");

        // 下段のLienarLayout
        LinearLayout.LayoutParams lpBottom
            =   new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.FILL_PARENT,
                LinearLayout.LayoutParams.FILL_PARENT);
        lpBottom.weight = 0.5f;
        LinearLayout llBottom = new LinearLayout(this);
        llBottom.setOrientation(LinearLayout.HORIZONTAL);
        llBottom.setLayoutParams(lpBottom);
        llBottom.setGravity(Gravity.CENTER_VERTICAL);
        // 下段・左側のTextView
        LinearLayout.LayoutParams lpBottomLeft
            =   new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.FILL_PARENT,
                LinearLayout.LayoutParams.WRAP_CONTENT);
        lpBottomLeft.weight = 0.5f;
        TextView tvBottomLeft = new TextView(this);
        tvBottomLeft.setLayoutParams(lpBottomLeft);
        tvBottomLeft.setGravity(Gravity.CENTER);
        tvBottomLeft.setText("左下");
        // 下段・右側のTextView
        LinearLayout.LayoutParams lpBottomRight
            =   new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.FILL_PARENT,
                LinearLayout.LayoutParams.WRAP_CONTENT);
        lpBottomRight.weight = 0.5f;
        TextView tvBottomRight = new TextView(this);
        tvBottomRight.setLayoutParams(lpBottomRight);
        tvBottomRight.setGravity(Gravity.CENTER);
        tvBottomRight.setText("右下");

        // 上段と下段を縦に並べるためのLinearLayout
        LinearLayout llOutside = new LinearLayout(this);
        llOutside.setOrientation(LinearLayout.VERTICAL);
        llOutside.setLayoutParams(
            new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.FILL_PARENT,
                LinearLayout.LayoutParams.FILL_PARENT));

        // 配置
        llTop.addView(tvTopLeft);
        llTop.addView(tvTopRight);
        llBottom.addView(tvBottomLeft);
        llBottom.addView(tvBottomRight);
        llOutside.addView(llTop);
        llOutside.addView(llBottom);
        // 画面に表示
        setContentView(llOutside);
    }
}

基本的にはLinearLayoutTest1cのmain.xmlと同じことをしていますので、見比べてみてください。
 XML (プロパティ) 
 Java (メソッド/プロパティ) 
android:orientation setOrientation() 
android:layout_width setLayoutParams() 
android:layout_height setLayoutParams() 
android:layout_weight weight 
android:gravity setGravity() 
ひとつ気をつけなければいけないところは、weightの値です。android:layout_weightプロパティは整数で指定していましたが、LinearLayoutクラスのweightプロパティは小数で指定します。

実行結果

0 件のコメント:

コメントを投稿