今回はTwitter風の画面を作成してみます。

Androidでデータを一覧で表示したい場合、ListViewを使う方法があります。
ListViewはこのように表示されます。

ですが、今回のようにTwitter風に表示したい場合は、表示部分をカスタマイズしなければなりません。

そこで今回はListViewのカスタマイズ方法のご紹介です。
こんな画面にカスタマイズしてみます。

ListActivityの使い方

リストを表示する画面を作りたい場合、ListActivityを使うと便利です。

ListActivityでは、表示したいデータとビューをマッピングするために、ListAdapterを使います。
単純に文字列だけのリストを表示したい場合はこんなコードで作れます。

public class MainActivity extends ListActivity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); String[] items = {"1つ目","2つ目","3つ目"}; setListAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, items)); } }

シンプルですね。

ArrayAdapterは渡されたデータ(items)をTextViewのtextにセットして、Activityに返し、Acitivityが渡されたビューを表示する、という処理を内部でしています。
その処理を行うのはArrayAdapter#getViewメソッドです。なので、この処理をオーバーライドしてあげれば、自分の好きなビューを表示できるようになります。

というわけで、ArrayAdapterを継承して、Twitter風にデータとビューをマッピングさせるTwitterAdapterクラスを作成します。

TwitterAdapterクラスの作成

TwitterAdapterクラスの作成の前に、twitterデータを表すTwitterStatusクラスを作成しましょう。
Twitterクラスは名前とつぶやきを保持するシンプルなクラスです。

public class TwitterStatus { private String screenName; private String text; public String getScreenName() { return screenName; } public void setScreenName(String screenName) { this.screenName = screenName; } public String getText() { return text; } public void setText(String text) { this.text = text; } }

次にTwitterAdapterクラスを作成します。

public class TwitterAdapter extends ArrayAdapter { private ArrayList items; private LayoutInflater inflater; public TwitterAdapter(Context context, int textViewResourceId, ArrayList items) { super(context, textViewResourceId, items); this.items = items; this.inflater = (LayoutInflater) context .getSystemService(Context.LAYOUT_INFLATER_SERVICE); } @Override public View getView(int position, View convertView, ViewGroup parent) { // ビューを受け取る View view = convertView; if (view == null) { // 受け取ったビューがnullなら新しくビューを生成 view = inflater.inflate(R.layout.twitter_row, null); // 背景画像をセットする view.setBackgroundResource(R.drawable.back); } // 表示すべきデータの取得 TwitterStatus item = (TwitterStatus)items.get(position); if (item != null) { TextView screenName = (TextView)view.findViewById(R.id.toptext); screenName.setTypeface(Typeface.DEFAULT_BOLD); // スクリーンネームをビューにセット TextView text = (TextView)view.findViewById(R.id.bottomtext); if (screenName != null) { screenName.setText(item.getScreenName()); } // テキストをビューにセット if (text != null) { text.setText(item.getText()); } } return view; } }

twitterAdapterクラスはプライベートなフィールドとして、ArrayListとLayoutInflaterを持っています。
ArrayListはgetViewメソッドの中で該当するデータを取得するために、コンストラクタ内でセットしています。
LayoutInflaterはxmlのレイアウトファイルからビューを生成してくれるクラスで、こちらもgetViewメソッド内で使います。
LayoutInflaterはContextから取得できるので、コンストラクタ内でセットしています。

カスタマイズ用レイアウト定義ファイルの作成

layoutを定義したtwitter_row.xmlは以下です。res/layoutフォルダ内に配置しておきます。

<?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="?android:attr/listPreferredItemHeight" android:padding="6dip"> <ImageView android:id="@+id/icon" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_marginRight="6dip" android:src="@drawable/twitter_logo_techfirm01_bigger" /> <LinearLayout android:orientation="vertical" android:layout_width="0dip" android:layout_weight="1" android:layout_height="fill_parent"> <TextView android:id="@+id/toptext" android:layout_width="fill_parent" android:layout_height="0dip" android:layout_weight="1" android:gravity="center_vertical" android:textColor="@color/screenname_color"/> <TextView android:layout_width="fill_parent" android:layout_height="0dip" android:layout_weight="1" android:id="@+id/bottomtext" android:singleLine="true" android:ellipsize="marquee" android:textColor="@color/text_color"/> </LinearLayout> </LinearLayout>

上記の定義で行の左側に画像、右側2段にテキストを表示するレイアウトを設定しています。
# ここではアイコンファイルは固定で指定しています。やっつけではありません。

定義ファイルの定義の仕方は、res/layout/main.xmlの場合と同様なので、ここでは多くは語りません。

カラー定義

上のtwitter_row.xmlではテキストの色を別に定義された値から読み込んでいます。
やっつけですが、string.xml内に以下のように追加しました。

<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">twitter</string> <color name="screenname_color">#000000</color> <color name="text_color">#202020</color> </resources>

行の背景

背景には画像を使用しています。以下の画像をback.pngとしてres/drawable-hdpi, res/drawable-ldpi, res/drawable-mdpiに放り込んでおきます。

アイコン画像

上の定義では、アイコン画像はres/drawable/twitter_logo_techfirm01_bigger.pngを読んでいるので、自分で表示したいファイルに置き換えてください。

ListActivityの作成

ここまでくればカスタマイズは終わったも同然です。以下のようにListActivity（ここではMainAcitityクラスとしています）を変更します。

public class MainActivity extends ListActivity { // 表示するtwitterデータのリスト private ArrayList list = null; // ListAdapter private TwitterAdapter adapter = null; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); createDummyData(); adapter = new TwitterAdapter(this, R.layout.twitter_row, list); setListAdapter(adapter); } // ダミーデータ生成 private void createDummyData() { this.list = new ArrayList(); TwitterStatus item1 = new TwitterStatus(); item1.setScreenName("techfirmlab"); item1.setText("おわったー"); list.add(item1); TwitterStatus item2 = new TwitterStatus(); item2.setScreenName("techfirmlab"); item2.setText("背景の変更に小ハマリなう"); list.add(item2); TwitterStatus item3 = new TwitterStatus(); item3.setScreenName("techfirmlab"); item3.setText("ListAdapter継承なう"); list.add(item3); TwitterStatus item4 = new TwitterStatus(); item4.setScreenName("techfirmlab"); item4.setText("Twitterデータ格納用クラス作成なう"); list.add(item4); TwitterStatus item5 = new TwitterStatus(); item5.setScreenName("techfirmlab"); item5.setText("ListViewのカスタマイズなう"); list.add(item5); TwitterStatus item6 = new TwitterStatus(); item6.setScreenName("techfirmlab"); item6.setText("はじめるか"); list.add(item6); } }

実際にはtwitter APIを叩いてレスポンスを受け取り、データをパースしてArrayListを生成する処理が必要ですが、今回はListViewのカスタマイズがメインなので、createDummyDataで代用しています。

ListViewのカスタマイズは以上です。
お疲れ様でした。

参考

• Hello, ListView | Android Developers
• Android Developers Blog: Android Layout Tricks #1
• ListActivity | Android Developers
• TextView | Android Developers
• Available Resource Types | Android Developers
• Android Developers Blog: Why is my list black? An Android optimization

関連する投稿

• AsyncTaskでユーザビリティを向上させる
• AndroidでTwitterのタイムラインを取得する【XmlPullParser】
• [音量設定アプリ]第5回 ハードウェアキー（音量ボタン）が押されたときの処理を行う
• [音量設定アプリ] 第1回　着信音量を設定する方法
• XPERIA X10のSDK Addon の設定｜Android Application Award 2010 Spring