Android-UIデザイン

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

UI画面のコンポーネント

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

メインアクションバー
ビューコントロール
コンテンツエリア
分割アクションバー

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

Android UIチュートリアル

画面コンポーネントについて

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

ビューとビューグループ

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

レイアウトの種類

レイアウトには多くの種類があります。そのうちのいくつかは以下にリストされています-

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

線形レイアウト

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

<?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を使用すると、子ビューを互いに相対的に配置する方法を指定できます。このように宣言できます。

<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>

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

Sr.No	View & description
1	layout_width* ビューまたはビューグループの幅を指定します
2	layout_height ビューまたはビューグループの高さを指定します
3	layout_marginTop ViewまたはViewGroupの上部に余分なスペースを指定します
4	layout_marginBottom ViewまたはViewGroupの下側に追加のスペースを指定します
5	layout_marginLeft ViewまたはViewGroupの左側に余分なスペースを指定します
6	layout_marginRight ViewまたはViewGroupの右側に余分なスペースを指定します
7	layout_gravity 子ビューの配置方法を指定します
8	layout_weight レイアウト内の余分なスペースのうちどれだけをビューに割り当てるかを指定します

測定単位

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

Sr.No	Unit & description
1	dp 密度に依存しないピクセル。 1 dpは、160 dpi画面の1ピクセルに相当します。
2	sp スケールに依存しないピクセル。これはdpに似ており、フォントサイズの指定に推奨されます
3	pt ポイント。ポイントは、物理的な画面サイズに基づいて1/72インチと定義されます。
4	px ピクセル。画面上の実際のピクセルに対応

スクリーン密度

Sr.No	Density & 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

レイアウトの最適化

以下は、効率的なレイアウトを作成するためのガイドラインの一部です。

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

Android-ui-design

目次