andoroidは中国語で安卓(ānzhuó)といいます。
アンドロイドアプリは安卓软件です。
今の時代のアンドロイド開発は、画面もGUIで触れるけど、
レイアウトは知らないと結構意味不明です。
いらいらしてきます。
ということでレイアウトについての備忘録です。
アンドロイドアプリのレイアウト
レイアウトにはいろいろあってよく使うのは、2種類。RelativeLayoutは相対レイアウト、
LinerLayoutは縦向きまたは横向きに一直線に並べるレイアウト
簡単なものであればLinerLayoutを使って表現できるが、
少し複雑なものを作ろうとするとLinerLayoutではできない?というか難しい。
RelativeLayoutは割と自由にコントロールを配置できる。
ただしこれも思うようにいかない(均等割り付けできない)ので、両方を組み合わせて見ます。
予断ですが、XMLを作成するとき
Layout→New→Android XML Fileを選択しますが、ファイル名によって以下のエラーがでます。
File-based resource names must start with a lowercase letter.
ファイル名の先頭は小文字出始めろってことなんですね。
レイアウトの画像
LayoutDumyA(真ん中の位置決めだけ)LayoutLeft(左上)
ボタンの大きさは横にフルサイズ
LayoutRight(右上)
ボタンの大きさは縦にフルサイズ
LayoutDummyC(上のレイアウトの直下)
割合で設定している。
LayoutDummyD(一番下に設定)
レイアウトの構造
RelativeLayout- LayoutDumyA(LinerLayout)
- LayoutLeft(LinerLayout)
- buttonA
- buttonB
- LayoutRight(LinerLayout)
- button
- button
- button
- LayoutDummyC(LinerLayout)
- button11
- button12
- LayoutDummyD(LinerLayout)
- button13
レイアウトXML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- layout_widthとlayout_heightについて -->
<!-- wrap_content:文字が表示できる程度の大きさになる -->
<!-- fill_parent OR match_parent:親要素のサイズまでなるべく大きくなるようにする。(パディング分は引かれる) -->
<!-- 真ん中(layout_centerHorizontal)、上(layout_alignParentTop)に見えないレイアウトを作成 -->
<LinearLayout
android:id="@+id/LayoutDumyA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
</LinearLayout>
<!-- LayoutDumyAの左側(layout_toLeftOf)に配置 -->
<!-- android:layout_toLeftOf="@+id/LayoutDumyA"にしている -->
<!-- android:orientation="vertical"なので縦に並ぶ -->
<LinearLayout
android:id="@+id/LayoutLeft"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="@+id/LayoutDumyA"
android:orientation="vertical">
<Button
android:id="@+id/btn1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="buttonA">
</Button>
<Button
android:id="@+id/btn2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="buttonB">
</Button>
</LinearLayout>
<!--右のレイアウト右端を LayoutDumyAに設定下をLayoutLeftにあわせる
android:layout_alignLeftを"@+id/LayoutDumyA"
android:layout_alignBottomを"@+id/LayoutLeft"
-->
<LinearLayout
android:id="@+id/LayoutRight"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignLeft="@+id/LayoutDumyA"
android:layout_alignBottom="@+id/LayoutLeft"
android:layout_alignParentRight="true"
android:orientation="horizontal" ><Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="button"
android:layout_weight="1">
</Button>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="button"
android:layout_weight="1">
</Button>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="button"
android:layout_weight="1">
</Button>
</LinearLayout>
<!-- 上のレイアウト(LayoutLeft)の下にレイアウトを作成 -->
<!-- android:layout_below="@+id/LayoutLeft" -->
<!-- android:weightSum="10"でトータルの割合を設定する -->
<!-- 各ボタンのタグで割合を設定 -->
<!-- android:layout_weight="7" 30% -->
<!-- android:layout_weight="3" 70% -->
<LinearLayout
android:id="@+id/LayoutDumyC"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="10"
android:layout_below="@+id/LayoutLeft"><Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="7"
android:text="button11" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:text="button12" />
</LinearLayout><!-- 画面のボトムにレイアウトを作成 -->
<!-- android:layout_alignParentBottom="true" -->
<LinearLayout
android:id="@+id/LayoutDumyD"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" ><Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="button13" /></LinearLayout>
</RelativeLayout>