異邦人になってみた~~上海生活写真ブログ

中国上海市在住です。もう10年を超えました。休日は星空(天の川)撮影やポートレート撮影等、連休時はカメラを持って中国各地を旅行してます。最近は内モンゴル自治区によく行っています。

 このブログについて(about)
  中国旅行/観光/写真記事一覧(省別)

androidアプリ作成、レイアウトの設定。

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>