四種方案解決ScrollView巢狀ListView問題

remotesupport發表於2014-09-06
View巢狀
http://www.apkbus.com/android-161576-1-1.html

在工作中，曾多次碰到ScrollView巢狀ListView的問題，網上的解決方法有很多種，但是雜而不全。我試過很多種方法，它們各有利弊。
在這裡我將會從使用ScrollView巢狀ListView結構的原因、這個結構碰到的問題、幾種解決方案和優缺點比較，這4個方面來為大家闡述、分析、總結。
實際上不光是ListView，其他繼承自AbsListView的類也適用，包括ExpandableListView、GridView等等，為了方便說明，以下均用ListView來代表。

一、 為什麼要使用ScrollView巢狀ListView的奇怪的結構        

ScrollView和ListView都是滾動結構，按理說，這兩個控制元件在UI上的功能是一樣的，但是看看下面這個設計：
      
    這是天貓商城的確認訂單的頁面，ScrollView中巢狀了ExpandableListView，ExpandableListView上面有固定的一些控制元件，下面也有固定的一些控制元件，整體又要能夠滾動。    列表資料要嵌在固定資料中間，並且作為整體一起滾動，有了這樣的設計需求，於是就有了ScrollView巢狀ListView的奇怪結構。


二、 ScrollView、ListView巢狀結構碰到的問題   

不多說，直接看失敗例子：   

  2.     <ScrollView
  3.     android:id="@+id/act_solution_1_sv"
  4.     android:layout_width="fill_parent"
  5.     android:layout_height="fill_parent">
  6.     <LinearLayout 
  7.         android:layout_width="fill_parent"
  8.         android:layout_height="wrap_content"
  9.         android:orientation="vertical">
  10.         <TextView
  11.             android:layout_width="fill_parent"
  12.             android:layout_height="wrap_content"
  13.             android:text="\nListView上方資料\n" />
  14.               
  15.         <ListView 
  16.             android:id="@+id/act_solution_1_lv"
  17.             android:layout_width="fill_parent"
  18.             android:layout_height="wrap_content">
  19.                 
  20.         </ListView>
  21.             
  22.         <TextView
  23.             android:layout_width="fill_parent"
  24.             android:layout_height="wrap_content"
  25.             android:text="\nListView下方資料\n" />
  26.     </LinearLayout>
  27.     </ScrollView>
複製程式碼



    ScrollView中只能放一個控制元件，一般都放LinearLayout，orientation屬性值為vertical。在LinearLayout中放需要呈現的內容。ListView也在其中，ListView的高度設為適應自身內容（wrap_content）。粗略一看，應該沒有什麼問題。但是看下面的實際效果圖：  
       
    圖中黑框的部分就是ListView，裡面放了20條資料，但是卻只顯示了1條。
    控制元件的屬性設定上沒有問題，但是為什麼沒有按照我的想法走呢？
    看看下面這個圖：
     

    是否有點明白了呢？原因就是scroll事件的消費處理以及ListView控制元件的高度設定問題。
    雖然我看原始碼也看了不少，但是要說出來卻不知到該怎麼下手，我是大概知道原因，但是不知道怎麼整理完全。求高手賜教…




三、問題解決方案

1、手動設定ListView高度
    經過測試發現，在xml中直接指定ListView的高度，是可以解決這個問題的，但是ListView中的資料是可變的，實際高度還需要實際測量。於是手動程式碼設定ListView高度的方法就誕生了。
  1. /**
  2. * 動態設定ListView的高度
  3. * @param listView
  4. */
  5. public static void setListViewHeightBasedOnChildren(ListView listView) { 
  6.     if(listView == null) return;

  8.     ListAdapter listAdapter = listView.getAdapter(); 
  9.     if (listAdapter == null) { 
  10.         // pre-condition 
  11.         return; 
  12.     } 

  14.     int totalHeight = 0; 
  15.     for (int i = 0; i < listAdapter.getCount(); i++) { 
  16.         View listItem = listAdapter.getView(i, null, listView); 
  17.         listItem.measure(0, 0); 
  18.         totalHeight += listItem.getMeasuredHeight(); 
  19.     } 

  21.     ViewGroup.LayoutParams params = listView.getLayoutParams(); 
  22.     params.height = totalHeight + (listView.getDividerHeight() * (listAdapter.getCount() - 1)); 
  23.     listView.setLayoutParams(params); 
  24. }
複製程式碼
    上面這個方法就是設定ListView的高度了，在為ListView設定了Adapter之後使用，就可以解決問題了。
    但是這個方法有個兩個細節需要注意：
        一是Adapter中getView方法返回的View的必須由LinearLayout組成，因為只有LinearLayout才有measure()方法，如果使用其他的佈局如RelativeLayout，在呼叫listItem.measure(0, 0);時就會拋異常，因為除LinearLayout外的其他佈局的這個方法就是直接拋異常的，沒理由…。我最初使用的就是這個方法，但是因為子控制元件的頂層佈局是RelativeLayout，所以一直報錯，不得不放棄這個方法。
        二是需要手動把ScrollView滾動至最頂端，因為使用這個方法的話，預設在ScrollView頂端的項是ListView，具體原因不瞭解，求大神解答…可以在Activity中設定：
  1. sv = (ScrollView) findViewById(R.id.act_solution_1_sv);
複製程式碼

2、使用單個ListView取代ScrollView中所有內容
    這個方法是我在試了幾個方法都失敗的情況下自己琢磨出來的。
    用一張圖來解釋這個方法的思想：
     

    就是說，把整個需要放在ScrollView中的內容，統統放在ListView中，原ListView上方的資料和下方資料，都作為現ListView的一個itemView，和原ListView中的單條資料是平級的關係。
    xml佈局方面十分簡單：
  1. <ListView 
  2.     android:id="@+id/act_solution_2_lv"
  3.     android:layout_width="fill_parent"
  4.     android:layout_height="wrap_content">
  5.         
  6. </ListView>
複製程式碼
   一個單獨的ListView就可以了。
    原ListView上方資料和下方資料，都寫進兩個xml佈局檔案中：

     
    Java程式碼方面，需要自定義一個Adapter，在Adapter中的getView方法中進行position值的判斷，根據position值來決定inflate哪個佈局：
  1. public View getView(int position, View convertView, ViewGroup parent) {
  2.             //列表第一項
  3.     if(position == 0){
  4.        convertView = inflater.inflate(R.layout.item_solution2_top, null);
  5.         return convertView;
  6.     }
  7.             //列表最後一項
  8.     else if(position == 21){
  9.         convertView = inflater.inflate(R.layout.item_solution2_bottom, null);
  10.         return convertView;
  11.     }
  12.             
  13.             //普通列表項
  14.     ViewHolder h = null;
  15.     if(convertView == null || convertView.getTag() == null){
  16.         convertView = inflater.inflate(R.layout.item_listview_data, null);
  17.         h = new ViewHolder();
  18.         h.tv = (TextView) convertView.findViewById(R.id.item_listview_data_tv);
  19.         convertView.setTag(h);
  20.     }else{
  21.         h = (ViewHolder) convertView.getTag();
  22.     }
  23.             
  24.     h.tv.setText("第"+ position + "條資料");

  26.     return convertView;
  27. }
複製程式碼
    在Activty中，只需要直接為ListView設定自定義的Adapter就行了。
  1. lv = (ListView) findViewById(R.id.act_solution_2_lv);
  2. adapter = new AdapterForListView2(this);
  3. lv.setAdapter(adapter);
複製程式碼

3、使用LinearLayout取代ListView
    既然ListView不能適應ScrollView，那就換一個可以適應ScrollView的控制元件，幹嘛非要吊死在ListView這一棵樹上呢？而LinearLayout是最好的選擇。但如果我仍想繼續使用已經定義好的Adater呢？我們只需要自定義一個類繼承自LinearLayout，為其加上對BaseAdapter的適配。
  1. import android.content.Context;
  2. import android.util.AttributeSet;
  3. import android.util.Log;
  4. import android.view.View;
  5. import android.widget.BaseAdapter;
  6. import android.widget.LinearLayout;

  8. /**
  9. * 取代ListView的LinearLayout，使之能夠成功巢狀在ScrollView中
  10. * @author terry_龍
  11. */
  12. public class LinearLayoutForListView extends LinearLayout {

  14.     private BaseAdapter adapter;
  15.     private OnClickListener onClickListener = null;

  17.     /**
  18.      * 繫結佈局
  19.      */
  20.     public void bindLinearLayout() {
  21.         int count = adapter.getCount();
  22.         this.removeAllViews();
  23.         for (int i = 0; i < count; i++) {
  24.             View v = adapter.getView(i, null, null);

  26.             v.setOnClickListener(this.onClickListener);
  27.             addView(v, i);
  28.         }
  29.        Log.v("countTAG", "" + count);
  30.     }

  32.     public LinearLayoutForListView(Context context) {
  33.         super(context);
複製程式碼
    上面的程式碼拷貝儲存為LinearLayoutForListView.class，或者直接拷貝Demo中的這個類在自己的工程裡。我們只需要把原來xml佈局檔案中的ListView替換為這個類就行了：
  1. <pm.nestificationbetweenscrollviewandabslistview.mywidgets.LinearLayoutForListView
  2.     android:id="@+id/act_solution_3_mylinearlayout"
  3.     android:layout_width="fill_parent"
  4.     android:layout_height="wrap_content"
  5.     android:orientation="vertical" >
  6. </pm.nestificationbetweenscrollviewandabslistview.mywidgets.LinearLayoutForListView>
複製程式碼
    在Activity中也把ListView改成LinearLayoutForListView，就能成功執行了。
  1. mylinearlayout = (LinearLayoutForListView) findViewById(R.id.act_solution_3_mylinearlayout);
  2. adapter = new AdapterForListView(this);
  3. mylinearlayout.setAdapter(adapter);
複製程式碼


4、自定義可適應ScrollView的ListView
    這個方法和上面的方法是異曲同工，方法3是自定義了LinearLayout以取代ListView的功能，但如果我脾氣就是倔，就是要用ListView怎麼辦？那就只好自定義一個類繼承自ListView，通過重寫其onMeasure方法，達到對ScrollView適配的效果。
    下面是繼承了ListView的自定義類：

  1. import android.content.Context;
  2. import android.util.AttributeSet;
  3. import android.widget.ListView;

  5. public class ListViewForScrollView extends ListView {
  6.     public ListViewForScrollView(Context context) {
  7.         super(context);
  8.     }

  10.     public ListViewForScrollView(Context context, AttributeSet attrs) {
  11.         super(context, attrs);
  12.     }

  14.     public ListViewForScrollView(Context context, AttributeSet attrs,
  15.         int defStyle) {
  16.         super(context, attrs, defStyle);
  17.     }
  18.         
  19.     @Override
  20.     /**
  21.      * 重寫該方法，達到使ListView適應ScrollView的效果
  22.      */
  23.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  24.         int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
  25.         MeasureSpec.AT_MOST);
  26.         super.onMeasure(widthMeasureSpec, expandSpec);
  27.     }
  28. }
複製程式碼
    三個構造方法完全不用動，只要重寫onMeasure方法，需要改動的地方比起方法3少了不是一點半點…
    在xml佈局中和Activty中使用的ListView改成這個自定義ListView就行了。程式碼就省了吧…
    這個方法和方法1有一個同樣的毛病，就是預設顯示的首項是ListView，需要手動把ScrollView滾動至最頂端。
  1. sv = (ScrollView) findViewById(R.id.act_solution_4_sv);
  2. sv.smoothScrollTo(0, 0);
複製程式碼

5、設定ScrollView的屬性，使ListView能夠成功巢狀（無法達到預定效果）
    這個方法是我在寫Demo的時候找到的，第一反應是有這個方法我還寫這個Demo幹嘛，只要在佈局檔案中新增一個屬性就搞定了。不過結果確實是ListView的大小把ScrollView的剩餘部分填滿了，但卻不能滾動，真是個致命的問題…
    不廢話了，佈局檔案中：
  1. <ScrollView
  2.     android:id="@+id/act_solution_5_sv"
  3.     android:layout_width="fill_parent"
  4.     android:layout_height="fill_parent"
  5.     android:layout_below="@+id/act_solution_5_vg_top"
  6.     android:fillViewport="true">
複製程式碼
    設定fillViewport的屬性為true即可。簡單吧？
    但是不能滾動這個致命的問題我卻不知道該怎麼解決了，繼續求大神解答…


四、幾種種方法的優缺點比較
    上面一共給出了4中親測可用的方法，各自有使用條件，複雜程度也各不相同。
    下面我來從幾個方面來分析幾種方法的優勢和劣勢。
    方法1的優點是不用對使用的控制元件做任何修改，只需要使用一個現成的方法就好了，而最大的限制是ListView的item只能由LinearLayout這一個佈局組成，對於一些複雜的佈局就不適用了。如果你的工程急需解決這個問題，而且滿足方法的使用條件，即ListView的item佈局簡單，完全有LinearLayout組成，你就只需要把setListViewHeightBasedOnChildren方法拿過去就行了。
    方法2的優點是佈局檔案設計簡單、Activity中的程式碼也很少，而缺點卻是自定義Adapter變得十分複雜，而且執行效率會變低，因為findViewById是十分費時的操作，而使用ViewHolder結構可以解決費時的問題（有興趣的童鞋可以去搜一艘ViewHolder結構），然而使用了方法2的話，會破壞這種結構。如果你的工程設計上偏簡單，ListView子項相對少、ListView上下方資料少、子項間互動少的話，可以嘗試一下。
    方法3的優點是完全解決了ScrollView巢狀ListView的問題，同時程式碼較少，你甚至可以直接使用LinearLayout，而在Activity中手動為LinearLayout新增子項控制元件，不過需要注意的是，在新增前需要呼叫其removeAllViews的方法，否則可能會出現預想不到的事情，那時你會想念天國的ListView的。缺點不是很明顯，但還是有兩個：一是使用的不是系統控制元件，不能在xml佈局的Graphical Layout檢視中直接看到效果；二是不能向ListView那樣可以使用ViewHolder結構，在載入大量子項時會費很多時間在findViewById中。如果你的列表資料比較少的話，不妨試試這個方法，除了不能使用ViewHolder結構，使用方法幾乎和ListView一樣。
    方法4…比方法3更簡單，程式碼更少，同時保留了ListView原有的所有方法，包括notifyDataSetChanged方法，相比其他方法是最趨近於完美的方法，只是需要在Activity中設定ScrollView滾動至頂端。如果你還在猶豫不決的話就選這個方法吧，我想我以後是隻會用這個方法了…

相關文章