スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

  • Comments (Close): -
  • TrackBack (Close): -

表形式のレイアウト

TableLayoutは、HTMLのTableのような表形式のレイアウトです。ビューを格子状に配置できるので分かりやすくメンテしやすいのが長所です。

HTMLとの対比でいうと、TableLayout要素はTable要素に似て、TableRowがtrに似ています。

簡単なアプリケーションを作成してみましょう。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1"
>

<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/id"
android:layout_marginLeft="5px"
/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5px">
</EditText>
</TableRow>

<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/password"
android:layout_marginLeft="5px"
/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5px">
</EditText>
</TableRow>

<View
android:layout_height="2dip"
android:background="@color/white"
android:layout_marginTop="5dip"
android:layout_marginBottom="5dip"
/>


<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/buttonclick"
android:layout_gravity="center"
android:layout_column="1">
</Button>

</TableLayout>



<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">HelloAndroid</string>
<string name="id">ID</string>
<string name="password">PASSWORD</string>
<string name="buttonclick">Click</string>
</resources>



package sample.basic;

import android.app.Activity;
import android.os.Bundle;

public class HelloAndroid extends Activity {

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}



実行結果:
20110920_3


TableLayout要素の中にTableRow要素を一行ごとに配置します。下のView要素とButton要素は一行まるまる使うためにTableRow要素は使いませんでした。

まずTableLayoutタグ内の属性ですが、

android:stretchColumns="1"

で余白部分の割り当てを行いました。

数字は列の番号で、0から始まります。ここではEditTextの幅を広げるために1を指定しました。

EditTextでは、文字列とくっつきすぎないように、左側に余白を設定しました。

android:layout_marginLeft="5px"

TextViewにおいても、そのままでは左に詰まりすぎるので余白を設定しています。

Buttonは、2列目(列番号1)の中央に配置しました(余り見栄えは良くないですが)。

android:layout_column="1"



ところで、Buttonの上に一本水平線(セパレータ)が引かれていますね。これはView要素で定義します。

水平線の太さは layout_height で定義し、上下の余白は layout_marginTop、layout_marginButtom で定義します。

関連記事
スポンサーサイト

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

Comments:

Comment Form
Only inform the site author.

Trackback+Pingback:

TrackBack URL for this entry
http://androidhacker.blog94.fc2.com/tb.php/60-41d9a99d
  • 閉じるボタン
レファレンス
月別アーカイブ
リンク
カテゴリ
QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。