ダメ男のブログ: Androd Tutorial iphone風の画面作成その2

今回は、リスト画面を作成していきます。

まず、画面リストに表示するデータのクラスを作成します。 DataObjectクラスという名前で作成します。画面に表示するサンプルデータを5件返すgetDataObjectListメソッドも用意します。


public class DataObject {

    public String id;
    public String imagePath;
    public String itme_title;
    public String item_explain;
   
    public DataObject() {
        id = null;
        imagePath = null;
        itme_title = null;
        item_explain = null;
    }
   
    public ArrayList getDataObjectList() {
       
        ArrayList list = new ArrayList();
       
        DataObject obj1 = new DataObject();
        obj1.id = "1";
        obj1.imagePath = "cat.jpg";
        obj1.itme_title = "猫";
        obj1.item_explain = "かわいい猫ですね";
       
        list.add(obj1);
       
        DataObject obj2 = new DataObject();
        obj2.id = "2";
        obj2.imagePath = "hinaningyo.jpg";
        obj2.itme_title = "ひな人形";
        obj2.item_explain = "明かりをつけましょぼんぼりに";
       
        list.add(obj2);
       
        DataObject obj3 = new DataObject();
        obj3.id = "3";
        obj3.imagePath = "kurisumasu.jpg";
        obj3.itme_title = "クリスマス";
        obj3.item_explain = "まっかなお鼻の。トナカイさんは";
       
        list.add(obj3);
       
        DataObject obj4 = new DataObject();
        obj4.id = "4";
        obj4.imagePath = "same.jpg";
        obj4.itme_title = "鮫";
        obj4.item_explain = "海の王者やね";
       
        list.add(obj4);
       
        DataObject obj5 = new DataObject();
        obj5.id = "5";
        obj5.imagePath = "sentouki.jpg";
        obj5.itme_title = "戦闘機";
        obj5.item_explain = "ばんばんばんばん";
       
        list.add(obj5);
       
        return list;
    }
   
}

DataObjectクラスに用意した各フィールドに値を格納してリストとして返しています。内容は、

id:一意なキー
imagePath:画像のファイル名
itme_title:表示タイトル
item_explain:表示画像・タイトルの説明

となります。

表示する画像は、/sdcard直下に配置することにします。
EclipseのDDMでsdcardフォルダにドラッグするか、adbコマンドで格納しましょう。
(sampleコードを打ち込む場合は、適当な画像ファイルを上記のファイル名に変えて格納してみましょう)

配置すると上記のようになるはずです。

この時注意して欲しいのは、eclipseに画像をドラッグすると、日本語のファイル名だと失敗します。 adbコマンドだと日本語でもOKなのですが、基本的にファイル名に日本語を利用するのは避けるべきです。

次にリスト行のレイアウトファイルを作成します。 home_list.xmlという名前で作成します。


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
   
    <ImageView android:id="@+id/image"
       android:layout_width="100dip"
       android:layout_height="wrap_content"
       android:adjustViewBounds="true"  />
              
    <TextView
      android:id="@+id/itme_title"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_toRightOf="@id/image"  />
      
    <TextView
      android:id="@+id/item_explain"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_toRightOf="@id/image"
      android:layout_below="@id/itme_title" />
      
</RelativeLayout>

ここでは、大まかにタグを配置します。細かい調整は後々行っていきます。
一応RelativeLayoutのタグの説明もしておきましょう。

id/itme_titleで設定しているandroid:layout_toRightOf="@id/image"は imageの右横に配置するという意味です。
id/item_explainで設定しているandroid:layout_toRightOf="@id/image"はimageの右横、 android:layout_below="@id/itme_title"はitme_titleの下。つまり、画像の右横かつ、タイトルの下に配置しています。あとは、この作成したhome_list.xmlをHomeActivityクラスで呼び出すようにします。


public class HomeActivity extends ListActivity {
   
    private File sdcardDir = Environment.getExternalStorageDirectory();
   
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.home);
    }
   
    
    @Override
    public void onStart() {
        super.onStart();
    }
   
    @Override
    public void onResume() {
        super.onResume();
        DataObject dataObject = new DataObject();
        ArrayList list = dataObject.getDataObjectList();
        dataObject = null; // release
        setListAdapter(
            new HomeListAdapter(this, R.layout.home_list, list));
    }
   
    class HomeListAdapter extends ArrayAdapter {
        private Context m_context;
        private ArrayList list;
        private ExecutorService ex;
       
        public HomeListAdapter(Context context, int textViewResourceId, 
                ArrayList objects) {
            
            super(context, textViewResourceId, objects);
            this.m_context = context;
            this.list = objects;
        }
       
        @Override
        public int getCount() {
            return this.list.size();
        }

        @Override
        public long getItemId(int arg0) {
            return Long.valueOf(this.list.get(arg0).id);
        }
       
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View view = convertView;
            if (view == null) { 
                // 受け取ったビューがnullなら新しくビューを生成
                LayoutInflater inflater = getLayoutInflater();
               
                view = inflater.inflate(R.layout.home_list, parent, false);
            }
           
            // 表示すべきデータの取得 
            DataObject item = (DataObject)list.get(position);
           
            ImageView image = (ImageView)view.findViewById(R.id.image);
            Log.d("log", sdcardDir.getPath());
            image.setImageBitmap(BitmapFactory.decodeFile(
                sdcardDir.getPath() + "/" + item.imagePath));
           
            TextView itme_title = (TextView)view.findViewById(R.id.itme_title);
            itme_title.setText(item.itme_title);
           
            TextView item_explain = (TextView)view.findViewById(R.id.item_explain);
            item_explain.setText(item.item_explain);
           
            return view;
        }
    }
    
}

赤字の部分が今回追加したソースコードです。
長いように思うかもしれませんが、やっていることは

ただ単にDataObjectクラスからリストデータを取ってきてhome_list.xmlのオブジェクトに設定している

だけです。
よく利用するパターンなので、何回か写経して覚えておくと良いと思います。

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