1. 程式人生 > >listView系列之分多種佈局顯示

listView系列之分多種佈局顯示

要求:在實現愛奇藝或者騰訊新聞等介面的設計時,會發現它的同一個listView中可以顯示不同的佈局方式,讓其呈現出不一樣的item,所以我們也來實現一下這種功能。

步驟:1、重寫 getViewTypeCount() – 該方法返回多少個不同的佈局
2、重寫 getItemViewType(int) – 根據position返回相應的Item
3、根據view item的型別,在getView中建立正確的convertView
4、根據我們上次在listView系列之分類顯示中學習,知道了要實現分類顯示的效果,就得從position下手才行,這裡也不例外。

我主要是突出怎麼實現功能,所以這裡我仍採用簡單的將adpater寫在內部類的方法來實現:

首先我們在主佈局檔案activity_main中就是簡單的用了一個listView,接著建立三個要在listView上顯示出來的三種不同佈局:listView_item1,listView_item2,listView_item3,其中listView_item1就只包括一個TextView和CheckBox,listView_item2也只包括TextView,listView_item3也只包括TextView和ImagView。

public class MainActivity extends
Activity {
private ListView mListView; private List<String> mList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mListView = (ListView) findViewById(R.id.listView); mList = new
ArrayList<String>(); for (int i = 0; i < 99; i++) { mList.add(i + ""); } mListView.setAdapter(new MyAdapter()); } public class MyAdapter extends BaseAdapter { final int TYPE_1 = 0; final int TYPE_2 = 1; final int TYPE_3 = 2; @Override public int getCount() { return mList.size(); } @Override public Object getItem(int position) { return mList.get(position); } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { viewHolder holder = null; int type = getItemViewType(position); if (convertView == null) { holder1 = new viewHolder1(); // 按當前所需的樣式,確定new的佈局 switch (type) { case TYPE_1: convertView = View.inflate(MainActivity.this, R.layout.listview_item1, null); holder.textView = (TextView) convertView.findViewById(R.id.item1_Tv); holder.checkBox = (CheckBox) convertView.findViewById(R.id.item1_Cb); break; case TYPE_2: convertView = View.inflate(MainActivity.this, R.layout.listview_item2, null); holder.textView = (TextView) convertView.findViewById(R.id.item2_Tv); break; case TYPE_3: convertView = View.inflate(MainActivity.this, R.layout.listview_item3, null); holder.textView = (TextView) convertView.findViewById(R.id.item3_Tv); holder.imageView = (ImageView) convertView.findViewById(R.id.item3_Iv); break; } convertView.setTag(holder1); } else { holder = (viewHolder1) convertView.getTag(); } holder1.textView.setText(Integer.toString(position)); // 設定資源 switch (type) { case TYPE_1: holder1.checkBox.setChecked(true); break; case TYPE_2: break; case TYPE_3: holder1.imageView.setBackgroundResource(R.drawable.ic_launcher); break; } return convertView; } /// 該方法返回多少個不同的佈局 //// 每個convert view都會呼叫此方法,獲得當前所需要的view樣式 @Override public int getViewTypeCount() { return 3; } /// 根據position返回相應的Item @Override public int getItemViewType(int position) { int p = position % 6; if (p == 0) return TYPE_1; else if (p < 3) return TYPE_2; else if (p < 6) return TYPE_3; else return TYPE_1; } } // 各個佈局的控制元件資源 static class viewHolder { CheckBox checkBox; TextView textView; ImageView imageView; } }

在這裡,因為佈局的不同,所以這裡的conVertView也是不同的,所以需要利用type來的區分開來。而我們在這裡是在getItemViewType這個方法中,通過position來實現佈局的分開顯示,在這,我們同樣可以通過position來實現不一樣的分類顯示結果。

程式碼結果圖:
演示圖

如圖所示,這就是程式碼的效果演示圖。