Android コーディングレイアウトとxmlレイアウト

Android Eclipseでの新規作成プロジェクトを読み解いてみる のエントリの Eclipse で生成したデフォルトプロジェクトをベースに、レイアウトについて学んでみる。

xml レイアウトをコーディングで再現する

生成されたアプリは、前回読み解いたように、res/layout/main.xml での定義からビューを生成していた。

これらのビューはオブジェクトを new したり、プロパティをセットすることで同じビューを再現することが出来る。

両者の違いは、xml 定義は GUI エディタなどでも編集が可能、コードとの分離、記述の簡便さ、あらかじめ表示したいレイアウトを構成するには都合がよいです。

コーディングによるビューの生成は、動的に生成したり、値を変更などの操作が可能になります。

もちろん xml で定義したオブジェクトに対して、コードでアクセスして、プロパティを変更したりすることもできる。

デフォルトのアプリの場合は、画面上に、文字列を表示した TextView が表示される、というのがこのアプリの機能なので、xml による定義のほうが理にかなっていますが、あえて再現してみます。

LinearLayout を配置する

xml 定義では LinearLayout がルート要素として配置され、その子要素として TextView が配置されていました。

まずはonCreate() で LinearLayout を配置します。

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        LinearLayout ll = new LinearLayout(this);
        setContentView(ll);
    }

LinearLayout クラスのインスタンスを生成して、それをビューとしてセットするように変更しました。

ここでいったん実行してみても、真っ黒な画面が出るだけなので、TextView を配置してみます。

TextView を配置する

xml 定義では LinearLayout の子要素として、TextView が配置されていました。

LinearLayout の子要素として、ビューを追加するには、addView() を使います。

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        LinearLayout ll = new LinearLayout(this);
        setContentView(ll);
        TextView tv = new TextView(this);
        tv.setText(R.string.hello);
        ll.addView(tv);
    }

まず、TextView インスタンスをつくり、テキストとして、R.string.hello (Hello World, Table_layoutActivity! のxml定義済み文字列) を setText() でセットします。

文字列を持った TextView インスタンスを生成できたので、これを LinearLayout インスタンスの addView() で子要素として追加します。

ここで実行すると、見たところ、まったく同じ表示になりました。

このアプリの仕様としてはこれで完成としてもよさそうですが、あと少しだけ深入りして、さらなる再現を目指します。

LinearLayout の属性

ぱっと見たところ、表示が同じなので、再現しきったようにみえますが、LinearLayout インスタンスのデフォルトの並べる方向が横方向なので、2個以上 TextView を並べてみると違いがわかります。

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        LinearLayout ll = new LinearLayout(this);
        setContentView(ll);
        TextView tv1 = new TextView(this);
        tv1.setText(R.string.hello);
        ll.addView(tv1);
        TextView tv2 = new TextView(this);
        tv2.setText(R.string.hello);
        ll.addView(tv2);
    }

単純に、二つのインスタンスを生成して、両方とも addView() しただけです。

ここで実行すると、一つ目の TextView の右隣に二つ目の TextView が配置され、端末が縦表示になっていると、折り返されて窮屈な感じになっているかと思います。

xml 定義のとき、TextView を二つ作ると、一つ目の TextView の下に二つ目の TextView が配置され、縦表示であればきれいに収まっていたかと思います。

では、LinearLayout の並べる方向を指定します。

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        LinearLayout ll = new LinearLayout(this);
        ll.setOrientation(LinearLayout.VERTICAL); // 追加
        setContentView(ll);
        TextView tv1 = new TextView(this);
        tv1.setText(R.string.hello);
        ll.addView(tv1);
        TextView tv2 = new TextView(this);
        tv2.setText(R.string.hello);
        ll.addView(tv2);
    }

setOrientation(LinearLayout.VERTICAL); を呼びました。

引数の LinearLayout.VERTICAL は縦方向を指定するための定数で、その名の通り、縦方向に並べます。

横方向を意味する、LinearLayout.HORIZONTAL も指定することが出来ます。

ここで実行すると、縦方向の並びを指定したので、二つ目の TextView は一つ目の下に配置されるようになったはずです。

xml で宣言した LinearLayout の属性として、android:orientation=”vertical” を指定することは、setOrientation(LinearLayout.VERTICAL); メソッドを呼ぶことと同じ意味合いであるということです。

xml でのレイアウトを見ると、他にも、android:layout_width=”fill_parent” や android:layout_height=”wrap_content” という幅と高さの指定などもあります。

もちろんこれらを操作するメソッドもあるので、インスタンスのプロパティをセットすれば、完全な再現になるでしょう。

もちろんメソッドで指定できる属性は xml定義でもセットできるので、属性値のメソッドについてはい蝋色触ってみる、

シェアする

  • このエントリーをはてなブックマークに追加

フォローする