アンドロイドリストビュー

I. xmlレイアウトファイルを使用しないListViewの作成

1. HelloListViewという名前でAndroidプロジェクトを作成するには、以下のようにします。 Androidチュートリアル第3回：初めてのAndroidアプリ、HelloWorld .
2. ListViewを使うには、ActivityをListActivityに継承させる必要があります。これは、これまでのActivityを継承したものと異なり、このListActivityはActivityを継承して、ListViewを操作するための多くの共通メソッドを継承しており、使い勝手が良いのです。
3. ここで、HelloListView クラスを以下のように修正します。
   Javaコード  

   1. public class HelloListView extends ListActivity {.  
   2.     /* アクティビティが最初に作成されたときに呼び出されます。*/  
   3.     オーバーライド  
   4.     public void onCreate(Bundle savedInstanceState) {...  
   5.         super.onCreate(savedInstanceState)を実行します。  
   6.         //setContentView(R.layout.main)を設定します。  
   7.         //アダプタを設定する  
   8.         setListAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,COUNTRIES)) を実行します。  
   9.     }  
   10.     //データデータ  
   11.     private static final String[] COUNTRIES=new String[]{"China","Russia","United Kingdom","France"} のようになります。  
   12. }  
4. 実行した効果は次のとおりです。
   
    ほら、データがリスト形式で表示されるようになったでしょ!!!!

   ここでのポイントは、Adapter-adapterを使用していることです。これはListViewのデータソースと考えることができ、ListViewが表示するデータはAdapterという形でListViewに渡されます。このAdapterが非常に重要で、Androidのコントロールのコレクション（ListView、Spinner、GridViewなど）に渡すためのデータはAdapterの状況にあり、Adapterさえマスターすれば、これらのコントロールのコレクションはAdapterを利用しているので、非常に自由にデータを渡すことができるという利点があります。Android では、先ほど使用した配列アダプタや、シンプルなアダプタなど、一般的なアダプタをいくつか用意しています。もしこれらに対応できない場合は、アダプタをカスタマイズして独自のアダプタを実現することもできます。実際、アダプタはコレクションコントロールの要素のレイアウトに相当します。

II: xmlを使用してListViewをカスタマイズする

1. 前の例では、main.xml で ListView を定義して ListView をレイアウトするという状況を使わず、ListActivity のデフォルトの ListView を使ってデモをしています。
2. ここでは、main.xmlでカスタムListViewを使用し、ListView表示のレイアウト、サイズ、背景色、その他のプロパティを簡単に制御できるようにします。もちろん、前の例でもListViewを取得することで、そのメソッドを使ってレイアウト、サイズ、背景色などを変更することができます。
3. main.xmlを次のように修正します。
   Xmlコード  

   1. <?xml version="1.0" encoding="utf-8"? >  
   2. <ListView xmlns:android="http://schemas.android.com/apk/res/android"。  
   3.     android:id="@android:id/list"  
   4.     android:layout_width="fill_parent"  
   5.     android:layout_height="fill_parent"  
   6.     android:background="#FF0000FF"  
   7.     >  
   8. </ListView>  
    ここで重要なのは、ListViewのidを "@android:id/list"に設定していることです。つまり、Androidがすでに定義したid（名前はlist）を参照しています。次に、カスタムListViewが動作しているかどうかを確認するために、青い背景を追加しています。
4. HelloListView クラスを以下のように修正します。
   Javaコード  

   1. public class HelloListView extends ListActivity {.  
   2.     /* アクティビティが最初に作成されたときに呼び出されます。*/  
   3.     オーバーライド  
   4.     public void onCreate(Bundle savedInstanceState) {...  
   5.         super.onCreate(savedInstanceState)を実行します。  
   6.         setContentView(R.layout.main)を設定します。  
   7.         // アダプタを設定する  
   8.         setListAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,COUNTRIES)) を実行します。  
   9.     }  
   10.     //データデータ  
   11.     private static final String[] COUNTRIES=new String[]{"China","Russia","United Kingdom","France"} のようになります。  
   12. }  
    ただ、先ほどの例よりも、setContentView(R.layout. メイン ); は、定義した ListView を Android に認識させるためのものです。
5. ランニングエフェクトの画像です。
   
    背景が青くなったので、xmlで定義したListViewが動作していることがわかります。

III: 表示する要素のカスタマイズ

1. 最初の2つの例は、テキストの行を表示するものです。もし、テキストとグラフィックを混在させたい場合、例えば、前面にテキスト、その後に画像を表示させることができます。この機能を実現するには、アダプタをカスタマイズする必要があります。
2. レイアウトファイルitem.xmlを新規に作成し、以下の内容を記述します。
   Xmlコード  

   1. <?xml version="1.0" encoding="utf-8"? >  
   2. <リレイアウト  
   3.   xmlns:android="http://schemas.android.com/apk/res/android"。  
   4.   android:layout_width="fill_parent"  
   5.   android:layout_height="wrap_content">  
   6.   <テキストビュー    
   7.     android:id="@+id/text"  
   8.     android:layout_alignParentLeft="true"  
   9.     android:layout_width="wrap_content"  
   10.     android:layout_height="wrap_content"/>  
   11.   <画像表示   
   12.     android:id="@+id/image"  
   13.     android:layout_alignParentRight="true"  
   14.     android:layout_width="wrap_content"  
   15.     android:layout_height="wrap_content"/>  
   16. </RelativeLayout>  

   ここでは主に、リストの各行ごとにテキストと画像を表示するTextViewとImageViewを定義しています。

3. HelloListView クラスを以下のように修正します。
   Javaコード  

   1. public class HelloListView extends ListActivity {.  
   2.     /* アクティビティが最初に作成されたときに呼び出されます。*/  
   3.     オーバーライド  
   4.     public void onCreate(Bundle savedInstanceState) {...  
   5.         super.onCreate(savedInstanceState)を実行します。  
   6.         setContentView(R.layout.main)を設定します。  
   7.         //カスタムアダプタを使用して、アダプタを設定します。  
   8.         setListAdapter(new TextImageAdapter(this))。  
   9.     }  
   10.     /** 
   11.      * カスタムビュー 
   12.      * 著者名 飞雪無情 
   13.       
   14.      */  
   15.     private class TextImageAdapter extends BaseAdapter{.  
   16.         private Context mContext;  
   17.         public TextImageAdapter(Context context) {...  
   18.             this.mContext=context;  
   19.         }  
   20.         /** 
   21.          * 要素数 
   22.          */  
   23.         public int getCount() {  
   24.             text.lengthを返します。  
   25.         }  
   27.         public Object getItem(int position) {.  
   28.             nullを返します。  
   29.         }  
   31.         public long getItemId(int position) {。  
   32.             0を返します。  
   33.         }  
   34.         // ListViewに表示される個々の要素ビューを生成するために使用します。  
   35.         public View getView(int position, View convertView, ViewGroup parent) {...  
   36.             // ListViewを最適化する  
   37.             if(convertView==null){。  
   38.                 convertView=LayoutInflater.from(mContext).inflate(R.layout.item, null)となります。  
   39.                 ItemViewCache viewCache=new ItemViewCache()。  
   40.                 viewCache.mTextView=(TextView)convertView.findViewById(R.id.text)です。  
   41.                 viewCache.mImageView=(ImageView)convertView.findViewById(R.id.image);  
   42.                 convertView.setTag(viewCache)を実行します。  
   43.             }  
   44.             ItemViewCache cache=(ItemViewCache)convertView.getTag().ItemViewCache cache=(ItemViewCache)convertView.getTag();  
   45.             // テキストと画像を設定し、ListView の Item を表示するためにこの View を返します。  
   46.             cache.mTextView.setText(texts[position])を実行します。  
   47.             cache.mImageView.setImageResource(images[position])を追加しました。  
   48.             convertViewを返します。  
   49.         }  
   50.     }  
   51.     // 要素のキャッシュクラス。ListView を最適化するために使用されます。  
   52.     private static class ItemViewCache{  
   53.         public TextView mTextView;  
   54.         public ImageView mImageView;  
   55.     }  
   56.   // 表示されるテキスト  
   57.     private String[] texts=new String[]{"weather","my group","background"};  
   58.     // 表示される画像  
   59.     private int[] images=new int[]{R.drawable.img1,R.drawable.img2,R.drawable.img3};  
   60. }  
   ここでのポイントは、Adapter をカスタマイズすることです。BaseAdapter はすでに Adapter のほとんどのメソッドを実装しているので、それを継承して、いくつかのメソッドを実装するだけです。ListView の要素数を返すメソッドと、表示する View を生成するメソッドです。 listView は View を追加するたびに Adapter の getView メソッドを呼び出すので、このメソッドを最適化する必要がありますが、その一部をサンプルで行っています。一般的に、面接でListViewの最適化について聞かれることが多いと思いますが、例のコードに対する回答はほぼ同じです。
4. 実行してみると、以下のような効果が見られます。
   
   

IV. ListViewリスト内の要素に対するクリックイベント応答

1. ListViewの要素をクリックして、それに応じた反応をさせたい場合、どのようにすればよいのでしょうか。ListViewの要素をクリックして、何かをポップアップしたり、何かを開いたり、何かを表示したりと、何かに反応させたい場合はどうすればよいでしょうか。その場合は、クリックイベント関数を実装すればよいのです。

2. ListViewのクリックイベントを実装する方法は2つあり、1つはgetListView().setOnClickListener(l);を使う方法、これは普段使っているコントロール設定と同じなので紹介しませんが、以下は2つ目で、ListActivityのonListItemClickメソッドをオーバーライドして、実はこれの最終処理もListViewのsetOnClickListenerで呼び出しに耐えられるようにすることです。

3. HelloListView クラスに以下のコードを追加します。

   Javaコード  

   1. オーバーライド  
   2. protected void onListItemClick(ListView l, View v, int position, long id) {.  
   3.         Toast.makeText(this, "You clicked"+texts[position], Toast.LENGTH_SHORT).show()。  

4. 行の1つをクリックして実行すると、次のような効果があります。
   
   

V. 概要

ListViewは、少なくとも共通する機能については、もう使いこなしたはずですが、もちろん、ListViewの分割部分、headViewとfootView、ListViewのページングなど、話していないことがたくさんあるので、自分たちで考えていくことが必要です。