Androd Tutorial iphone風の画面作成 その1

androidの開発をしていて、よく言われるのが、

「見た目をiphoneっぽくしたい」

という要求です。
androidなんだから、android推奨のインターフェース (http://dl.google.com/googleio/2010/android-android-ui-design-patterns.pdf) にするべきだと思うのですが、 iphoneのインターフェースが好きなんだという人はかなり多いです。
確かにiphoneのインターフェースは良い出来ですから、気持ちはわからなくもないです。

というわけで、iphoneっぽい画面の作り方を記載しておこうと思います。
これは本当に要求度が高いので、自分でも再利用できるように詳しい記述にしていこうと思っています。多分、結構長くなると思いますが、おつきあいをよろしくお願いします。

では、さっそくはじめましょう。

まずは、プロジェクトを作成しましょう。 androidのversionは1.6以上なら大丈夫ですが、もう2.1以上でもいいと思います。

立ち上げ時に起動する画面を作成します。HomeActivityクラスという名前で作成します。

public class HomeActivity extends ListActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.home);
    }
}

ListActivityクラスを継承していることに注意してください。

次にlayoutのxmlファイルをhome.xmlとして作成します。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
   
    <ListView 
        android:id="@+id/android:list"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent" />  
       
    <TextView
      android:id="@+id/android:empty"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/nodata" />
      
</RelativeLayout>

layoutのxmlファイルでUIを作成する場合、なるべくRelativeLayoutを使うようにしましょう。後々の修正が楽になります。 javaでのハードコードとか問題外なのでやめましょうね。後で改修する人が泣きます…。

ListViewの下に記述したTextViewタグは、ListViewにデータが存在しない場合に表示されるテキストメッセージです。

android:id="@+id/android:empty"

と指定するのが決まり事です。
表示されるメッセージは、android:text="@string/nodata"と記述したので、 strings.xmlに記載する「nodata」属性が反映されます。 では、strings.xmlファイルを以下のように書きかえましょう。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">iphone風インターフェース</string>
    <string name="nodata">データが存在しません</string>
</resources>

上記のようにすることでデータが存在しない場合に、strings.xmlに記載した「nodata」属性の文字が表示されるようになります。

では、ここまでやったことが上手くいっているか、確認してみましょう。ビルドして、androidエミュレーターを起動させてみましょう。すると以下のような画面が表示されるはずです。



Oh Yeah Great!!
思った通りの動きをしましたね。

さてさて次回は、リストの中身を作成していきましょう。
まだまだ続きます。おつきあいよろしくお願いします。

この記事がお役にたちましたらシェアをお願いします

Tweet