Building a Simple User Interface

今回は前回のFirstAPPを再利用して簡単なUIの作成。

レイアウトの仕組みや、リソースの使われ方などを理解するためのトレーニングです。

指示通りに、FirstAPPのTextViewエレメントを削除してLinearLayouthorizontalに配置されるレイアウトを作成します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
    <EditText
        android:id="@+id/edit_message"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
</LinearLayout>

 このエレメント内に記述されたオブジェクトは直列に並び続け、ラップアラウンドしません。右側に溢れたものは折り返されず、画面外に消えます。
buildsimleui_runimage

この章で編集するのは以下の通り、
layout/activity_main.xml レイアウトリソース
values/string.xml 文字列リソース
レイアウト上でエレメントIDをandroid:id=”@+id/….”としたものはgen/R.javaに自動生成され、コード上でIDとして使用できます。

android:hintandroid:textで使用される@string/….の記述は、文字列リソースが参照されるので合わせて編集します。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">First App</string>
    <string name="action_settings">Settings</string>
    <string name="edit_message">Enter a message</string>
    <string name="button_send">Send</string>
</resources>

Make the Input Box Fill in the Screen Widthの項目でエレメントの重みについて記述されていますが、少々分かりにくいのでボタンを例に解説します。

android:layout_weightのデフォルトは0で、エレメントはandroid:layout_widthとandroid:layout_hightで指定されたサイズの通りに並びます。

layout_weightは各パーツがlayout_weight 0の状態で並んだと仮定して、余白をweight値に応じて各エレメントに分配する仕組みです。

言葉で説明するより図解したほうが分かりやすいので、ボタンをweight値 1:1:0で3つ並べたものを例にします。
 simpleui_layout_weight_before
weightが無い状態での余白を元に分配し、
simpleui_layout_weight_after
このようになります。

この動作を理解すると、端末の種類や回転による幅の変化により、レイアウトに対して余白が足りない状態。つまりマイナスの余白を分配するというケースがあることに気づくと思います。

このマイナスの分配のおかげで、既定よりも狭い幅でもある程度レイアウトを保持することが出来るのだと考えますが、レイアウトのパーツの埋め込みは想定したサイズで行い、マイナスの余白分配は保険と考えた方がよさそうです。

 

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください