Android-UIデザイン

この章では、Android画面のさまざまなUIコンポーネントについて説明します。この章では、UIデザインを改善するためのヒントと、UIのデザイン方法についても説明します。

UI画面コンポーネント

Androidアプリケーションの一般的なユーザーインターフェイスは、アクションバーとアプリケーションコンテンツ領域で構成されています。

メインアクションバー
ビューコントロール
コンテンツエリア
スプリットアクションバー

これらのコンポーネントは、下の画像にも示されています-

画面コンポーネントを理解する

Androidアプリケーションの基本単位はアクティビティです。UIはxmlファイルで定義されます。コンパイル中に、XMLの各要素は、メソッドで表される属性を持つ同等のAndroidGUIクラスにコンパイルされます。

ビューとビューグループ

アクティビティはビューで構成されます。ビューは、画面に表示される単なるウィジェットです。ボタンなどの場合があります。1つ以上のビューを1つのGroupViewにグループ化できます。ViewGroupの例には、レイアウトが含まれています。

レイアウトの種類

レイアウトには多くの種類があります。そのうちのいくつかを以下に示します-

線形レイアウト
絶対レイアウト
テーブルレイアウト
フレームレイアウト
相対レイアウト

線形レイアウト

線形レイアウトはさらに水平レイアウトと垂直レイアウトに分けられます。これは、ビューを1つの列または1つの行に配置できることを意味します。これは、テキストビューを含む線形レイアウト（垂直）のコードです。

<?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” >
   
   <TextView
      android:layout_width=”fill_parent”
      android:layout_height=”wrap_content”
      android:text=”@string/hello” />
</LinearLayout>

AbsoluteLayout

AbsoluteLayoutを使用すると、子の正確な場所を指定できます。このように宣言することができます。

<AbsoluteLayout
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
   
   <Button
      android:layout_width=”188dp”
      android:layout_height=”wrap_content”
      android:text=”Button”
      android:layout_x=”126px”
      android:layout_y=”361px” />
</AbsoluteLayout>

TableLayout

TableLayoutは、ビューを行と列にグループ化します。このように宣言することができます。

<TableLayout
   xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_height=”fill_parent”
   android:layout_width=”fill_parent” >
   
   <TableRow>
      <TextView
         android:text=”User Name:”
         android:width =”120dp”
         />
      
      <EditText
         android:id=”@+id/txtUserName”
         android:width=”200dp” />
   </TableRow>
   
</TableLayout>

相対レイアウト

RelativeLayoutを使用すると、子ビューを相互に相対的に配置する方法を指定できます。このように宣言できます。

<RelativeLayout
   android:id=”@+id/RLayout”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
</RelativeLayout>

FrameLayout

FrameLayoutは、単一のビューを表示するために使用できる画面上のプレースホルダーです。このように宣言することができます。

<?xml version=”1.0” encoding=”utf-8”?>
<FrameLayout
   android:layout_width=”wrap_content”
   android:layout_height=”wrap_content”
   android:layout_alignLeft=”@+id/lblComments”
   android:layout_below=”@+id/lblComments”
   android:layout_centerHorizontal=”true” >
   
   <ImageView
      android:src = “@drawable/droid”
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content” />
</FrameLayout>

これらの属性とは別に、すべてのビューとビューグループに共通する他の属性があります。それらは以下にリストされています-

シニア番号	表示と説明
1	layout_width ビューまたはビューグループの幅を指定します
2	layout_height ビューまたはビューグループの高さを指定します
3	layout_marginTop ビューまたはビューグループの上面に追加のスペースを指定します
4	layout_marginBottom ビューまたはビューグループの下側に追加のスペースを指定します
5	layout_marginLeft ViewまたはViewGroupの左側に追加のスペースを指定します
6	layout_marginRight ビューまたはビューグループの右側に追加のスペースを指定します
7	layout_gravity 子ビューの配置方法を指定します
8	layout_weight レイアウト内の余分なスペースのどれだけをビューに割り当てるかを指定します

測定単位

Android UIで要素のサイズを指定するときは、次の測定単位を覚えておく必要があります。

シニア番号	ユニットと説明
1	dp 密度に依存しないピクセル。1 dpiは、160dpi画面の1ピクセルに相当します。
2	sp スケールに依存しないピクセル。これはdpに似ており、フォントサイズを指定する場合に推奨されます
3	pt ポイント。ポイントは、物理的な画面サイズに基づいて、1/72インチと定義されます。
4	px ピクセル。画面上の実際のピクセルに対応します

画面密度

シニア番号	密度とDPI
1	Low density (ldpi) 120 dpi
2	Medium density (mdpi) 160 dpi
3	High density (hdpi) 240 dpi
4	Extra High density (xhdpi) 320 dpi

レイアウトの最適化

効率的なレイアウトを作成するためのガイドラインの一部を次に示します。

不要な入れ子を避ける
あまりにも多くのビューを使用しないでください
深い入れ子を避ける