Android嵌套滑動控件的沖突解決和ViewPager适配目前子控件高度不留白白的辦法

最近項目有一個需求，需要多層可滑動控件的嵌套展示，demo效果如下，demo的下載下傳位址在最後

咋一看好像挺簡單啊，不就是一個ScrollView + ViewPager + ListView嗎，我開始也這樣覺得，也用的這種方式實作，結果始終和效果不對勁。這裡總結幾點問題：

兩個或兩個以上的滑動控件嵌套時，如果layout_height采用的是wrap_content會造成内部滑動控件的高度不能正确的計算，會導緻内部滑動控件的高度始終為0，除非你用定值設定，比如300dp。
兩個相同滑動方向的滑動控件嵌套，會使其中一個控件的滑動事件失效。
如果采用ScrollView作為最外層的滑動控件，則會産生莫名其妙的移位BUG，通過日志發現是scrollY的異常變化，但是通過scrollTo方法是無效的。
ViewPager嵌套ListView的時候，預設ViewPager的高度是所有ListView中最高的那個，是以會造成其他ListView底部會有一大片的補白。

上面是我總結的發生過的幾個問題，也許你的問題就是上面中的幾個，也許還有些問題沒有總結到，不過我相信此篇部落格一樣會對你有幫助。好了，我們首先列出來我們需要解決的幾件事情。

剛才說了，使用ScrollView作為最外層滑動控件來嵌套其他滑動控件，會有莫名其妙的位移BUG，是以應該換一種滑動控件作為最外層的容器。
兩個滑動控件嵌套，内部滑動控件的高度預設會是0，除非你用定值設定，如果不想用定值設定，那麼就需要自定義這個滑動控件，手動的計算該滑動控件。
ViewPager嵌套ListView會有資料少的ListView底部出現一大片的空白，是以這裡我們也需要自定義ViewPager來動态計算目前的ListView的高度。
ListView作為頂層滑動控件的子滑動控件ViewPager的子滑動控件，高度預設當然也是0，這裡我們也需要進行自定義ListView計算高度。

首先我們解決第一個問題，也就是拿什麼控件來代替ScrollView作為頂層滑動控件。答案是ListView，有的小夥伴兒就不明白了，ListView作為頂層控件？不會吧這要怎麼弄？說實話我當初采用ListView隻考慮到一個原因：ListView不會有位移的BUG。接下來我用一張圖來講解。

Android嵌套滑動控件的沖突解決和ViewPager适配目前子控件高度不留白白的辦法

由圖中可以看到，頂層的ListView包含了兩個部分，一個是Header，包括一些其他的控件以及IndicatorView導覽列，然後就是ListView的Item了，重點是這個Item的數量隻有一個，也就是拿ViewPager作為Item。然後ViewPager裡面嵌套了Fragment作為碎片的展示，每一個Fragment又包含了一個ListView作為資料清單的展示。下面給出最頂層的滑動控件的代碼：首先是Activity的布局檔案： actvity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/listView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:cacheColorHint="@android:color/transparent"
    android:divider="@null"
    android:dividerHeight="0dp"
    android:listSelector="@android:color/transparent" />

很簡單，就隻是一個ListView。然後是MainActiivity.class：

public class MainActivity extends FragmentActivity {

    private TabPageIndicator indicator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ListView listView = (ListView) findViewById(R.id.listView);
        View header = View.inflate(this, R.layout.header, null);
        indicator = (TabPageIndicator) header.findViewById(R.id.indicator);
        listView.addHeaderView(header);
        listView.setAdapter(new CustomAdapter(this));
    }

    public class CustomAdapter extends BaseAdapter{

        private View view;
        private WrapContentViewPager viewPager;

        public CustomAdapter(Context context) {
            view = View.inflate(context, R.layout.item_main, null);
            viewPager = (WrapContentViewPager) view.findViewById(R.id.viewPager);
            viewPager.setAdapter(new ListFragmentAdapter(viewPager, getSupportFragmentManager()));
            indicator.setViewPager(viewPager);
            viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

                }

                @Override
                public void onPageSelected(int position) {
                    viewPager.resetHeight(position);
                    indicator.setCurrentItem(position);
                }

                @Override
                public void onPageScrollStateChanged(int state) {

                }
            });
            viewPager.resetHeight(0);
        }

        @Override
        public int getCount() {
            return 1;
        }

        @Override
        public Object getItem(int position) {
            return null;
        }

        @Override
        public long getItemId(int position) {
            return 0;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            return view;
        }
    }
}

在MainActivity主要做了兩件事： 1、引入了單獨的layout檔案作為ListView的header 2、從header中執行個體化了ViewPager的導航控件Indicator 3、設定ListView的自定義Adapter，使getCount傳回1，隻顯示一個Item 4、在唯一的Item中執行個體化了自定義的ViewPager，并設定了擴充卡Adapter

首先是header的布局檔案：header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:gravity="center"
        android:background="@android:color/holo_red_light"
        android:text="Hello World!" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:gravity="center"
        android:background="@android:color/holo_blue_light"
        android:text="Hello World!" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:gravity="center"
        android:background="@android:color/holo_orange_light"
        android:text="Hello World!" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:gravity="center"
        android:background="@android:color/holo_green_light"
        android:text="Hello World!" />

    <cc.wxf.androiddemo.indicator.TabPageIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

這兒的header隻包含了一些TextView作為demo展示，然後包含了導航控件Indicator。接着是ListView唯一一項Item的布局檔案item_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <cc.wxf.androiddemo.WrapContentViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

第一層控件的展示就結束了，關鍵是第二層的展示問題，ViewPager + Fragment + ListView。上面已經說了，ViewPager作為可滑動的控件，嵌套在ListView裡面，如果不做特殊的操作，那麼高度就一直為0，那麼需要怎樣來自定義呢？我們理出來這個ViewPager需要做到哪些事情：

需要知道所有子控件的高度
需要重寫onMeasure方法，使目前顯示的子控件的高度為ViewPager的高度
需要在page發生改變的時候，動态改變ViewPager的高度為目前子控件的高度

首先給出自定義ViewPager的源代碼：WrapContentViewPager.class

package cc.wxf.androiddemo;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.widget.LinearLayout;

import java.util.HashMap;
import java.util.Map;

public class WrapContentViewPager extends ViewPager {

    private Map<Integer, Integer> maps = new HashMap<Integer, Integer>();
    private int current;

    public WrapContentViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public WrapContentViewPager(Context context) {
        super(context);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int height = 0;
        if(maps.size() > current){
            height = maps.get(current + 1);
        }
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    public void resetHeight(int current){
        this.current = current;
        if(maps.size() > current){
            LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) getLayoutParams();
            if(layoutParams == null){
                layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, maps.get(current + 1));
            }else{
                layoutParams.height = maps.get(current + 1);
            }
            setLayoutParams(layoutParams);
        }
    }

    public void calculate(int type, int height){
        maps.put(type, height);
    }
}

原理很簡單，首先給出了一個Map的資料結構，儲存了所有的子控件的位置以及對應的高度的映射表，然後給了一個current字段，表示目前顯示的頁面的索引。在onMeasure方法中，動态的根據目前的顯示索引計算出目前子控件的高度，然後指派給ViewPager。在resetHeight方法中，改變目前子控件的索引，并動态得改變目前ViewPager的高度。在calculate方法中，将子控件對應的位置和高度放入映射表， calculate方法是在自定義ListView中調用的，原因在文章後面就會明白了。然後是ViewPager對應的FragmentPageAdapter的代碼：

package cc.wxf.androiddemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;

import cc.wxf.androiddemo.indicator.IconPagerAdapter;

/**
 * Created by ccwxf on 2016/6/17.
 */
public class ListFragmentAdapter extends FragmentPagerAdapter implements IconPagerAdapter{

    private List<ListFragment> fragments = new ArrayList<ListFragment>();
    private static final String[] CONTENT = new String[] { "Calendar", "Camera", "Alarms", "Location" };

    public ListFragmentAdapter(WrapContentViewPager viewPager, FragmentManager fm) {
        super(fm);

        fragments.add(new ListFragment(viewPager ,1));
        fragments.add(new ListFragment(viewPager, 2));
        fragments.add(new ListFragment(viewPager, 3));
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getIconResId(int index) {
        return R.drawable.selector_indicator;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return CONTENT[position % CONTENT.length].toUpperCase();
    }

    @Override
    public int getCount() {
        return fragments.size();
    }
}

這裡的Adapter實作了IconPagerAdapter接口隻是為了相容導航控件Indicator的使用，對于導航控件Indicator的使用，請參考Github的開源庫：ViewPagerIndicator 然後是ListFragment的代碼：

package cc.wxf.androiddemo;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by ccwxf on 2016/6/17.
 */
public class ListFragment extends Fragment {

    private WrapContentViewPager viewPager;
    private int type;

    public ListFragment() {
    }

    @SuppressLint("ValidFragment")
    public ListFragment(WrapContentViewPager viewPager, int type) {
        this.viewPager = viewPager;
        this.type = type;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_item, null);
        WrapContentListView listView = (WrapContentListView) view.findViewById(R.id.listView);
        List<String> data = new ArrayList<String>();
        for(int i = 0; i < type * 5; i++){
            data.add("aaa");
        }
        listView.setAdapter(new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1, data));
        viewPager.calculate(type, listView.getRealHeight());
        return view;
    }
}

這裡的ListFragment隻是做了一個自定義ListView的一個初始化。大家要特别注意的是在onCreateView方法中的viewPager.calculate方法，這裡将對應子控件ListView的高度傳回了ViewPager，并且這句代碼必須在setAdapter之後執行，要問為什麼？别急，咱還有一個fragment_item.xml的布局檔案沒有公布，其實超級簡單。。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <cc.wxf.androiddemo.WrapContentListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:cacheColorHint="@android:color/transparent"
        android:divider="@android:color/darker_gray"
        android:dividerHeight="@dimen/divider"
        android:listSelector="@android:color/transparent" />
</LinearLayout>

是不是超級簡單。。其實就包含了一個自定義的ListView，那麼最主要的工作來了，這個自定義的ListView該怎麼寫。

package cc.wxf.androiddemo;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ListAdapter;
import android.widget.ListView;

/**
 * Created by ccwxf on 2016/6/17.
 */
public class WrapContentListView extends ListView {

    private int height;

    public WrapContentListView(Context context) {
        super(context);
    }

    public WrapContentListView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public WrapContentListView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    public void setAdapter(ListAdapter adapter) {
        super.setAdapter(adapter);
        View item = adapter.getView(0, null, null);
        item.measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED), MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
        int itemHeight = item.getMeasuredHeight();
        int count = adapter.getCount();
        height = itemHeight * count + getResources().getDimensionPixelSize(R.dimen.divider) * count;
        measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED), height);
    }

    public int getRealHeight(){
        return height;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY));
    }
}

在setAdapter之後，動态的measure了第一條Item的高度，并且累加了count數量個item的高度和divider的高度（别小看這個divider的高度，如果不加上會導緻最後一個Item無法顯示），這裡也就出現了一個限制：最内層的ListView的每一個Item的高度必須是一緻的，也就是說Item的樣式隻能相同。否則就沒辦法計算，有的小夥伴兒會問了，那我為什麼不把每一個Item都measure一下呢，你仔細想想如果有count為100呢？

然後是getRealHeight方法，是将計算出來的height傳回出去，現在大家知道了為什麼這個方法必須在setAdapter方法之後調用了吧。在onMeasure方法中，直接将計算出來的height設定我高度。這裡又有好問的小夥伴兒要發問了：這兒的height會不會等于0啊？提這個問題的小夥伴最好想一想setAdapter和onMeasure的調用順序，在本文中也就是onCreateView和onMeasure的調用順序，聰明的小夥伴兒被我這麼一點醒，是不是立刻就明白啦？

最後給出Demo的下載下傳位址：點我下載下傳Demo

Android嵌套滑動控件的沖突解決和ViewPager适配目前子控件高度不留白白的辦法

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯