Android嵌套滑动控件的冲突解决和ViewPager适配当前子控件高度不留空白的办法
最近项目有一个需求，须要多层可滑动控件的嵌套展现，demo效果以下，demo的下载地址在最后html
咋一看好像挺简单啊，不就是一个ScrollView + ViewPager + ListView吗，我开始也这样以为，也用的这种方式实现，结果始终和效果不对劲。这里总结几点问题：java
- 两个或两个以上的滑动控件嵌套时，若是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。接下来我用一张图来说解。
由图中能够看到，顶层的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主要作了两件事：
一、引入了单独的layout文件做为ListView的header
二、从header中实例化了ViewPager的导航控件Indicator
三、设置ListView的自定义Adapter，使getCount返回1，只显示一个Item
四、在惟一的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;
}
}
<?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的下载地址：