AndroidきらびやかなListViewテーブル効果の実現



概要:
ビジネスシステムでは、テーブルコントロールを使用してデータを表示することがよくありますが、Androidが持っているListViewコントロール自体は、より美しいテーブル効果を実現することはできませんが、他の方法でListViewテーブルをよりきれいにすることができます.一緒に検討しましょう.
まず、次の2つの図を見てみましょう.
図(一)
図(二)
明らかに、図1は簡潔で、図2は明るく輝いているように見えます.ユーザー体験の観点から言えば、図2のインタフェースの効果は明らかに図1より良いですが、枠はどのように追加されていますか?ListViewのadapter SimapleAdapterを使用しています.上の図からListViewの各行には多くの項目が含まれています.ListViewのデータ内容は、ListViewを構築し、各項目を1つのmapに設定することで実現できます.
    ArrayList<HashMap<String, String>> mylist = newArrayList<HashMap<String, String>>();  
  HashMap<String, String> map1 = newHashMap<String, String>();     
  map1.put("Num" ,  "220503432" );  
  map1.put("Receive" ,  "  " );  
  map1.put("Payway" ,  "    " );     
  map1.put("TotalPrice" ,  "$98.30" );  
  map1.put("State" ,  "   " );  
  map1.put("Date" ,  "2010-09-23" );  
  mylist.add(map1);  

ListViewはデータを表示するコンテナに相当し、中の各行は受注情報であり、これらの行情報は別のXMLファイルで定義する必要があり、具体的な表の枠線もこのXMLファイルで実現されている.次に、リストビューでテーブルの縦線枠線をどのように実現するかを説明します.Androidでは、Viewはandroid線の基礎であり、ListViewの枠線はViewで実現されています.ListViewの内容はxmlファイルでListViewの内容をロードすることができます.TableLayoutも枠線が存在しません.では、以下はViewでxml文書に枠線を描きます.以下はListViewの枠線を実現するコアコードです.
<TableLayoutandroid:id= "@+id/a07_ls_rlo"   
   android:layout_width="wrap_content"   
  xmlns:android="http://schemas.android.com/apk/res/android"   
   android:layout_height="wrap_content" >  
  <TableRow>  
  <View style="@style/view2"  />  
  <TextView  
  style="@style/txtNolinkleft"   
  android:id="@+id/a07_ls_txtYF" />  
  <View style="@style/view2"  />  
  <TextView  
  style="@style/txtNolinkright"   
  android:layout_width="80dip"   
  android:gravity="center"   
  android:id="@+id/a07_ls_txtXXSR" />  
  <View style="@style/view2"  />  
  <TextView  
  style="@style/txtNolinkright"   
  android:layout_width="100dip"   
  android:gravity="center"   
  android:id="@+id/a07_ls_txtYNSE" />  
  <View style="@style/view2"  />  
  <TextView  
  style="@style/txtNolinkright"   
  android:layout_width="80dip"   
  android:id="@+id/a07_ls_txtSNSE" />  
  <View style="@style/view2"  />  
  <TextView  
  style="@style/txtNolinkleft"   
  android:layout_width="92dip"   
  android:gravity="center"   
  android:id="@+id/a07_ls_txtSBRQ" />  
  <View style="@style/view2"  />  
  <TextView  
  style="@style/txtNolinkleft"   
  android:layout_width="92dip"   
  android:id="@+id/a07_ls_txtJNRQ" />  
  <View style="@style/view2"  />  
  <TextView  
  style="@style/txtNolinkleft"   
  android:layout_width="80dip"   
  android:gravity="center"   
  android:id="@+id/a07_ls_txtSPDM" />  
  <View style="@style/view2"  />  
  </TableRow>  
  </TableLayout>  

データソースおよびListView各行の内容を定義したら、SimapleAdapterを使用してListView、データコンテンツ、各行の定義を関連付けることができます.コードは以下の通りです.
SpecialAdapter mSchedule =  new  SpecialAdapter( this ,mylist,R.layout.listview, 
        new  String[]{ "Num" , "Receive" , "Payway" , "TotalPrice" , "State" , "Date" },
        newint[]{R.id.a07_ls_txtNum,R.id.a07_ls_txtReceive,R.id.a07_ls_txtPayway,
            R.id.a07_ls_txtTotalPrice,R.id.a07_ls_txtState,R.id.a07_ls_txtDate};  
  list.setAdapter(mSchedule);  

上のコードのSpecialAdapterを見て、これは何ですか?SimpleAdapterじゃないの?以下、SpecialAdapterが何に使うのか説明します.
Androidレイアウトでは、基本的な5つのレイアウト方式には枠がありません.私たちは上のView方式で枠の効果を実現しました.通常、いくつかのビジネスシステムを作るとき、お客様はデータリストページに表の形式でデータを表示することを要求するほか、行のハイライトを選択したり、行の色を交互にしたりするなど、華やかな効果を要求しています.もちろんこれはユーザー体験にとって良いことです.この2つの効果の実現方法について説明します.
まず、選択した行のハイライトの効果を図(3)に示します.
図(三)
ハイライト効果は背景図を設定することによって実現され、実現されるコードは以下の通りである.
ListView list=(ListView) this .findViewById(R.id.listview);  
   Drawabledrawable = getResources().getDrawable(R.drawable.listview_hoverbg);  
  list.setSelector(drawable); 

図(3)から分かるように、このリストは、前述のSpecial Adapterに関連して、SimpleAdapterクラスを継承し、Special Adapterは親クラスのgetViewメソッドを書き換え、パラメータpositionの判断によって単一の2行を区別する単一の2行の色の交互効果を実現している.リストセルの各viewの背景色を設定することで、行全体の背景色を設定する効果が得られます.コードは次のとおりです.
privateint[] colors =  new   int [] {  0x30FF0000 ,  0x300000FF  };  
  @Override     
  public  View getView( int  position, View convertView, ViewGroup parent) {     
  View view = super .getView(position, convertView, parent);   
  intcolorPos = position % colors.length;     
  if (colorPos== 1 )  
   view.setBackgroundColor(Color.argb(250 ,  255 ,  255 ,  255 ));   
  else   
   view.setBackgroundColor(Color.argb(250 ,  224 ,  243 ,  250 ));   
  return  view;    
  }  

 
SimpleAdapterは非常に有用なクラスであり、データソースアダプタだけでなく、各行の多くの情報を取得または設定することができます.例えば、各行のセルのコントロールやスタイルなどを取得することができます.絢爛たるListViewテーブルを開発する上で非常に有用で実用的なクラスであり、柔軟性と拡張性があります.
 
 
http://blog.csdn.net/xiehuan_uestc/article/details/7982814#