标签:
相信大家都已经可以熟练使用ListView和GridView,大神们估计都在使用RecyclerView了。如果还在使用ListView,你肯定有这样的一个深刻的感受,那就是在做一个APP的时候使用ListView和GridView很频繁,并且经常会遇到一个页面中除了有ListView或GridView可能还有一些其他的内容,但是可能内容很多,你第一时间就会想到让它整体滑动即可,那就是在总的布局外面包裹一个ScrollView。也就是出现了ScrollView中嵌套一个ListView的场景,或者你的ScrollView嵌套多个ListView或者GridView的时候。我们自认为出现场景应该是整体内容会滑动,但是你会惊讶的发现并不是这样的,你会发现如果是嵌套了一个ListView或者GridView的时候,ListView只会显示一个Item项,GridView也会只显示一行。看来我们还是错了,具体是什么样子的下面我们通过一个demo来看看,然后分析一下为什么会出现这样的结果,以及最后解决的办法。
我就简单写了一个ListView只要能说明问题即可,至于ListView的优化等问题不是本篇博客的重点,将会在后续的博客出现。
布局文件(注意:仔细看清楚ListView的layout高度的属性是warp_content)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/parent_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <include android:id="@+id/include_header_home" android:layout_width="match_parent" android:layout_height="wrap_content" layout="@layout/header_home" /> <ScrollView android:id="@+id/scrollview" android:layout_width="match_parent" android:layout_height="wrap_content" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <ImageView android:layout_width="match_parent" android:layout_height="380dp" android:scaleType="fitXY" android:src="@drawable/center_image" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <LinearLayout android:id="@+id/linear" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#FFF" android:orientation="horizontal" > <View android:layout_width="0.1dp" android:layout_height="match_parent" android:background="#44000000" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawableRight="@drawable/all_category_arrow_down" android:gravity="center" android:padding="15dp" android:text="商家分类" /> <View android:layout_width="0.1dp" android:layout_height="match_parent" android:background="#44000000" /> <TextView android:id="@+id/test" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawableRight="@drawable/all_category_arrow_down" android:gravity="center" android:padding="15dp" android:text="智能排序" /> <View android:layout_width="0.1dp" android:layout_height="match_parent" android:background="#77000000" /> <TextView android:id="@+id/wei_express" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawableRight="@drawable/slip_off_img_bd_express" android:gravity="center" android:padding="15dp" android:text="微送" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="0.1dp" android:background="#44000000" /> </LinearLayout> <ListView android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="wrap_content" android:divider="#33000000" android:dividerHeight="0.1dp" > </ListView> </LinearLayout> </ScrollView> </LinearLayout>
MainActivity.java
package com.mikyou.listviewtest; import com.mikyou.utils.SystemStatusManager; import android.app.Activity; import android.database.DataSetObserver; import android.os.Build; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.view.Window; import android.view.WindowManager; import android.widget.BaseAdapter; import android.widget.ListAdapter; import android.widget.ListView; public class MainActivity extends Activity { private ListView mListView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setTranslucentStatus(); setContentView(R.layout.activity_main); initData(); initView(); } private void initView() { mListView=(ListView) findViewById(R.id.listview); mListView.setAdapter(new MyAdapter()); } class MyAdapter extends BaseAdapter{ @Override public int getCount() { return 7; } @Override public Object getItem(int position) { return null; } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { View view=View.inflate(MainActivity.this, R.layout.home_list_item, null); return view; } } private void initData() { } private void setTranslucentStatus() {//沉浸标题栏效果 // TODO Auto-generated method stub if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT){ Window win=getWindow(); WindowManager.LayoutParams winParams=win.getAttributes(); final int bits=WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS; winParams.flags |=bits; win.setAttributes(winParams); } SystemStatusManager tintManager = new SystemStatusManager(this); tintManager.setStatusBarTintEnabled(true); tintManager.setStatusBarTintResource(0); tintManager.setNavigationBarTintEnabled(true); } }
运行的结果:
注意:你会发现只会显示一个,而我的设置adapter的时候明明设置的是7个,为什么只显示一个呢??这是为什么,这就是意味ListView和ScrollView的嵌套带来的问题,我们都知道ListView也可以上下滑动,当ListView中的内容很多的时候,屏幕不足以显示的时候才会滑动显示。那为什么只会显示一项呢?其实仔细分析一下很简单就是ListView高度不够,如果高度达到一定的话,就会出现其他的Item项,注意看我们的布局ListView的Wrap_content,也就是测量里面的内容的高度来得到的,也就对应着android中的VIew测量的模式中的AT_MOST,这种测量模式实际上系统是不会给你真正的测的,而是根据测量其内部的内容来给出一个适合的尺寸,是系统只会测EXACTLY模式即为对应match_parent和指定明确的尺寸。我们还知道ListView每个Item加载模式通过getView方法一个一个的加载出来的,但是如果以ScrollView为父布局的话,如果是ListVIew的高度设置的是warp_content,它的测量模式和其他的布局有点不一样,就是它只会测量一次,也就是当你第一个Item加载完后,它只测量第一个Item,其他的就不会测量,所以只显示第一个Item,因为高度不够,只能显示第一个。如果不信,我们可以作如下的两个实验,第一打印出此时ListVIew的高度看看是不是此时ListView的高度是不是等于第一个Item的高度,第二就是我不指定warp_content,我指定一个明确尺寸看看。
第一个实验:比较第一个Item高度和ListVIew总高度,来说明此时ScrollView只会测量第一个Item来作为整个ListView的高度。
通过给ListView添加getViewTreeObserver().addOnGlobalLayoutListener事件,然后在回调方法中去得到高度,注意:因为我们直接或者间接在Activity中的OnCreate方法中去得到高度是为0,因为此时Activity中的View窗体树并没有绘制完毕,该方法就是通过监听整个View的树绘制完毕后才会回调,所以在该方法才能得到高度
package com.mikyou.listviewtest; import com.mikyou.utils.SystemStatusManager; import android.app.Activity; import android.os.Build; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.view.ViewTreeObserver.OnGlobalLayoutListener; import android.view.Window; import android.view.WindowManager; import android.widget.BaseAdapter; import android.widget.ListView; public class MainActivity extends Activity { private ListView mListView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setTranslucentStatus(); setContentView(R.layout.activity_main); initData(); initView(); } private void initView() { mListView=(ListView) findViewById(R.id.listview); mListView.setAdapter(new MyAdapter()); // mListView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() { @Override public void onGlobalLayout() { View firstItemView=mListView.getAdapter().getView(0, null, mListView);//得到第一个Item firstItemView.measure(0, 0); System.out.println("第一个Item的高度:"+firstItemView.getMeasuredHeight()); System.out.println("mListView的高度:"+mListView.getHeight()); } }); } class MyAdapter extends BaseAdapter{ @Override public int getCount() { return 7; } @Override public Object getItem(int position) { return null; } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { View view=View.inflate(MainActivity.this, R.layout.home_list_item, null); return view; } } private void initData() { } private void setTranslucentStatus() {//沉浸标题栏效果 // TODO Auto-generated method stub if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT){ Window win=getWindow(); WindowManager.LayoutParams winParams=win.getAttributes(); final int bits=WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS; winParams.flags |=bits; win.setAttributes(winParams); } SystemStatusManager tintManager = new SystemStatusManager(this); tintManager.setStatusBarTintEnabled(true); tintManager.setStatusBarTintResource(0); tintManager.setNavigationBarTintEnabled(true); } }
在Logcat中打印出来的结果是:
所以第一个实验证明咱们的观点是正确的
那么接下进行第二个实验:通过修改布局文件中的ListView的Layout_Height属性,我们指定明确尺寸看看会发生什么?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/parent_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <include android:id="@+id/include_header_home" android:layout_width="match_parent" android:layout_height="wrap_content" layout="@layout/header_home" /> <ScrollView android:id="@+id/scrollview" android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <ImageView android:layout_width="match_parent" android:layout_height="380dp" android:scaleType="fitXY" android:src="@drawable/center_image" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <LinearLayout android:id="@+id/linear" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#FFF" android:orientation="horizontal" > <View android:layout_width="0.1dp" android:layout_height="match_parent" android:background="#44000000" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawableRight="@drawable/all_category_arrow_down" android:gravity="center" android:padding="15dp" android:text="商家分类" /> <View android:layout_width="0.1dp" android:layout_height="match_parent" android:background="#44000000" /> <TextView android:id="@+id/test" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawableRight="@drawable/all_category_arrow_down" android:gravity="center" android:padding="15dp" android:text="智能排序" /> <View android:layout_width="0.1dp" android:layout_height="match_parent" android:background="#77000000" /> <TextView android:id="@+id/wei_express" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawableRight="@drawable/slip_off_img_bd_express" android:gravity="center" android:padding="15dp" android:text="微送" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="0.1dp" android:background="#44000000" /> </LinearLayout> <ListView android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="300dp" android:divider="#33000000" android:dividerHeight="0.1dp" > </ListView> </LinearLayout> </ScrollView> </LinearLayout>
运行结果和Logcat打印的结果:
大家会看到这时候就出现了2个Item,但是最后一个Item的还是显示不够完全,这因为我们的高度还是不够,我们在布局文件指定了ListView的高度为300dp,会发现logcat 输出的高度600,这个就是另外的知识了,因为最后打印出来以及View绘制的尺寸都是Px为单位的,但是这个dp实际上就是逻辑单位,这也是为了兼容和适配Android中众多不同手机分辨率。由于在不同的手机分辨率中PX和DP换算率也不一样,由于我的模拟器是1280*768的尺寸,他们换算率为1:2,也就是1dp等于2px,我们设置了300dp,所以打印出来就是600,这样能解释为什么这第二Item显示不完全,因为一个Item需要321px,两个就是641px,而我们设置300dp也就是600px小于641px所以肯定显示不完全了。
通过如下分析,本以为可以找到一个解决办法,它也确实可以显示出其他的Item,但是有个很大的问题就是你知道每个Item的高度吗?由于每个不同ListView中的Item的样式不一样,高度自然就不一样,难道我们每次都去写死它的高度吗?而且如果从网络中获取数据,Item的个数也是在变得,整个ListVIew的高度也是在变的。那么这个方法就断了吗?其实不然,我们再顺着这个思路想想,这个思路就是“只要去修改ListView的高度就能实现显示其他的Item”,但是现在问题就是如何去得到一个合适的ListView的高度呢,其实最后的思路就是这样的:“动态的测量ListView的高度然后动态的去修改ListView的高度就能实现显示其他的Item”。
测量的大致思路如下:
就是通过ListView对象去getAdapter去得到适配器中的每个Item的然后通过一个循环遍历地去测量每个Item的高度,然后通过累加这些Item的高度,最后得到总的高度,再把这个高度设置给ListView即可,这里我将这个功能的实现封装一个工具方法,只要简单地将ListVIew对象传入即可。
测量高度的方法:
package com.mikyou.utils; import android.view.View; import android.view.ViewGroup.LayoutParams; import android.widget.ListAdapter; import android.widget.ListView; public class MikyouMetricListViewHeightUtils { public static void setListViewHeight(ListView lv){ if (lv==null) { return ; } ListAdapter adapter=lv.getAdapter(); if (adapter==null) { return ; } int totalHeight=0; for (int i = 0; i < adapter.getCount(); i++) { View listItem=adapter.getView(i, null, lv); listItem.measure(0, 0); totalHeight+=listItem.getMeasuredHeight(); } LayoutParams params=lv.getLayoutParams(); params.height=totalHeight+(lv.getDividerHeight()*(lv.getCount()-1));//这里还将分割线的高度考虑进去了,统计出所有分割线占有的高度和 lv.setLayoutParams(params); } }
通过使用这个方法后直接将布局文件写成Warp_content即可,现在不需要直接指定了明确尺寸了,看看最后的实现效果:
package com.mikyou.listviewtest; import com.mikyou.utils.MikyouMetricListViewHeightUtils; import com.mikyou.utils.SystemStatusManager; import android.app.Activity; import android.os.Build; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.view.ViewTreeObserver.OnGlobalLayoutListener; import android.view.Window; import android.view.WindowManager; import android.widget.BaseAdapter; import android.widget.ListView; public class MainActivity extends Activity { private ListView mListView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setTranslucentStatus(); setContentView(R.layout.activity_main); initData(); initView(); } private void initView() { mListView=(ListView) findViewById(R.id.listview); mListView.setAdapter(new MyAdapter()); /** * @author zhongqihong * 解决ScrollView与ListView冲突的问题 * 该方法需要在setAdapter之后调用 * */ MikyouMetricListViewHeightUtils.setListViewHeight(mListView); mListView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() { @Override public void onGlobalLayout() { View firstItemView=mListView.getAdapter().getView(0, null, mListView);//得到第一个Item firstItemView.measure(0, 0); System.out.println("第一个Item的高度:"+firstItemView.getMeasuredHeight()); System.out.println("mListView的高度:"+mListView.getHeight()); } }); } class MyAdapter extends BaseAdapter{ @Override public int getCount() { return 7; } @Override public Object getItem(int position) { return null; } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { View view=View.inflate(MainActivity.this, R.layout.home_list_item, null); return view; } } private void initData() { } private void setTranslucentStatus() {//沉浸标题栏效果 // TODO Auto-generated method stub if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT){ Window win=getWindow(); WindowManager.LayoutParams winParams=win.getAttributes(); final int bits=WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS; winParams.flags |=bits; win.setAttributes(winParams); } SystemStatusManager tintManager = new SystemStatusManager(this); tintManager.setStatusBarTintEnabled(true); tintManager.setStatusBarTintResource(0); tintManager.setNavigationBarTintEnabled(true); } }
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/parent_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <include android:id="@+id/include_header_home" android:layout_width="match_parent" android:layout_height="wrap_content" layout="@layout/header_home" /> <ScrollView android:id="@+id/scrollview" android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <ImageView android:layout_width="match_parent" android:layout_height="380dp" android:scaleType="fitXY" android:src="@drawable/center_image" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <LinearLayout android:id="@+id/linear" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#FFF" android:orientation="horizontal" > <View android:layout_width="0.1dp" android:layout_height="match_parent" android:background="#44000000" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawableRight="@drawable/all_category_arrow_down" android:gravity="center" android:padding="15dp" android:text="商家分类" /> <View android:layout_width="0.1dp" android:layout_height="match_parent" android:background="#44000000" /> <TextView android:id="@+id/test" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawableRight="@drawable/all_category_arrow_down" android:gravity="center" android:padding="15dp" android:text="智能排序" /> <View android:layout_width="0.1dp" android:layout_height="match_parent" android:background="#77000000" /> <TextView android:id="@+id/wei_express" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawableRight="@drawable/slip_off_img_bd_express" android:gravity="center" android:padding="15dp" android:text="微送" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="0.1dp" android:background="#44000000" /> </LinearLayout> <ListView android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="wrap_content" android:divider="#33000000" android:dividerHeight="0.1dp" > </ListView> </LinearLayout> </ScrollView> </LinearLayout>
最后实现的结果:
注意:最后分析一下结果,我们可以看到我们的7个Item全部完全显示,并且Logcat显示的ListVIew的高度为2253px,一个Item为321px,有7个Item就是2247px,但是我们还算了分割线一个分割线占的高度为1px,7个Item占有6个分割线,所以最后的高度:2247px+6px=2253px.
OK,大功告成,以后大家可以使用我这个工具类可以方便测量ListView的高度,并且下次遇到这种问题就可以很轻松的解决了。
浅谈android中的ListView合集系列之解决ScrollView和ListView嵌套冲突(一)
标签:
原文地址:http://blog.csdn.net/u013064109/article/details/51505392