2011年12月15日

AndroidのLayoutの書き方

今回はLayoutに関して、簡単に。

AndroidのLayoutって、動的にドラック&ドロップで書く人はほとんどいないと思います。
僕は、最初1、2回試しましたが、HTMLが書ける人は、基本、XMLで書いた方が
思った通りに書けると思います。

そんなXMLの基本部分を押さえておきましょう。



まずは、大枠から
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
>
</LinearLayout>

基本はLinearLayoutで書いていきます。
私の書くLayoutはよほどの理由が無い限りLinearLayoutです。

widthとheightに関しては、pxやdipで指定する事の方が少なく、
fill_parentかwrap_contentで指定しております。
Android端末は、端末による画面の差がどうしてもありますので、
pxやdip等で幅を固定すると、大きな画面の端末や、小さな画面の端末に対応出来なくなります。

orientationは縦に並べていくか、横に並べていくかという事ですが、
外枠は縦です。
横にする時は、別のLinearLayoutを入れ子にして中に作成します。

では、OneClickHomeで使用している様なLayoutの書き方です。

main.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical"
>

  <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@color/dodgerblue"
  >

    <TextView
      android:layout_width="0dip"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:layout_marginLeft="15dip"
      android:layout_weight="1"
      android:text="@string/app_name"
      android:textColor="@color/white"
      android:textSize="20dip"
    />

    <TextView
      android:id="@+id/btn_set_home"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:layout_marginBottom="5dip"
      android:layout_marginRight="10dip"
      android:layout_marginTop="5dip"
      android:background="@drawable/btn"
      android:gravity="right"
      android:text="@string/btn_set_home"
      android:textColor="@color/white"
      android:textSize="18dip"
    />

  </LinearLayout>

  <WebView
    android:id="@+id/main_web_view"
    android:layout_width="fill_parent"
    android:layout_height="0dip"
    android:layout_weight="1"
  />

</LinearLayout>

まず、順を追って、一番外側のLinearLayoutです。
これは、先ほどの説明と同じ、大枠をLinearLayoutで囲っています。
widthとheightはfill_parentとなっていますが、
画面全体をまず囲って下さいって事です。

次に、内側のLinearLayoutですが、アプリタイトルと設定ボタンを配置する為に設置しております。
このLinearLayoutのorientationを見ると、verticalでは無く、horizontalとなっています。
これは、中のものは、横に並べて配置して下さいって事を表しています。
もし、横幅を超えるようであれば、次の行へ描写されます。

内側のLinearLayoutに関してです。
中にTextViewを2つ設置してありますが、1つはアプリ名の表示枠、もう1つはボタンです。
Buttonを使わないのは癖ですね。
backgroundにデフォルトでいろいろ設定されてしまっているのが邪魔なので。

まず、1つめのTextViewですが、widthが0dipになっております。
これでは表示されないじゃないかと思いますが、
weightが1に設定されております。
そして、もう片方のTextViewには、width/height共にwrap_contentで設定されており、
gravityにrightが設定されております。
これは、btnの方を右側に設置し、まず場所を確保します。
余った部分をアプリ名表示TextViewがすべて埋めるという書き方になります。
埋める方法はweightで数字が大きい方が埋めてくれます。
これで、右詰めでテキストが配置出来ます。
あと、backgroundに指定してある、@drawable/btnも実はXMLで書いております。
こちらは以前に説明させていただいたので省略します。
AndroidのXMLでボタンを書く

最後にWebViewですが、これはheightが0dipになっており、weightが1に設定されております。
こちらは、内側のLinearLayoutの縦幅の場所を確保したら、残りはWebViewで埋めて良いという命令になり、
一番下までWebView で埋まってくれます。

書くと長いですが、意外と簡単です。
ご質問どんどんお待ちしております。