效果图:
看到效果图,第一想到的大致布局是一个scrollview嵌套一个viewpage,viewpage里面有一两个fragment或者写成一个fragment。但是fragment肯定包含两个布局,一个是含有图片(gridview)的listview,另一个布局是只含有gridview。但是这样的话,解决滑动冲突,计算高度啊,肯定少不了。如果你不想这么专业的做的话,还有一个笨的方法就是,直接用一个listview加一个头,而且把另一侧需要用gridview的控件也换成listview,这样也能实现效果,但是毕竟不是正道,下面我介绍下我怎么解决的冲突。
首先最外层的scrollview和里面的listview肯定都是自定义解决冲突后的控件了,这个不多说了;然后就是在listview和gridview在加载数据完成后,需要计算它们的高度,将高度赋值给viewpager,这样数据才会显示完整(需要注意的是一定要等数据加载完成后在计算高度,我计算时总是第一次高度不准,高度低于正常值,最后才发现我计算时因为在图片还没加载好,就开始计算高度了导致数值不准,后台在数据加载完后,又延长1秒,再计算就准确了)。下面是我封装的计算listview和gridview的两个方法,由于做这个页面走了点弯路就记录下。
// 设置listview高度
public static int setListViewHeightBasedOnChildren(ListView listView) {// 获取ListView对应的AdapterListAdapter listAdapter = listView.getAdapter();if (listAdapter == null) {// pre-conditionreturn 0;}int totalHeight = 0;for (int i = 0, len = listAdapter.getCount(); i < len; i++) { // listAdapter.getCount()返回数据项的数目View listItem = listAdapter.getView(i, null, listView);// listItem.measure(0, 0); //计算子项View 的宽高int desiredWidth = MeasureSpec.makeMeasureSpec(listView.getWidth(),MeasureSpec.AT_MOST);listItem.measure(desiredWidth, 0);totalHeight += listItem.getMeasuredHeight(); // 统计所有子项的总高度}// ViewGroup.LayoutParams params = listView.getLayoutParams();totalHeight = totalHeight+ (listView.getDividerHeight() * (listAdapter.getCount() - 1));//listView.getDividerHeight()获取子项间分隔符占用的高度//params.height最后得到整个ListView完整显示需要的高度// listView.setLayoutParams(params);return totalHeight;
}// 设置gridview高度
public static int setGridViewHeightBasedOnChildren(GridView gridView,HpProductAdpater listAdapter) {if (listAdapter == null) {return 300;}int rows;int columns = 2;int horizontalBorderHeight = 0;Class<?> clazz = gridView.getClass();try {// 利用反射,取得每行显示的个数Field column = clazz.getDeclaredField("mRequestedNumColumns");column.setAccessible(true);columns = (Integer) column.get(gridView);// 利用反射,取得横向分割线高度Field horizontalSpacing = clazz.getDeclaredField("mRequestedHorizontalSpacing");horizontalSpacing.setAccessible(true);horizontalBorderHeight = (Integer) horizontalSpacing.get(gridView);} catch (Exception e) {// TODO: handle exceptione.printStackTrace();}// 判断数据总数除以每行个数是否整除。不能整除代表有多余,需要加一行if (listAdapter.getCount() % columns > 0) {rows = listAdapter.getCount() / columns + 1;} else {rows = listAdapter.getCount() / columns;}int totalHeight = 0;for (int i = 0; i < rows; i++) { // 只计算每项高度*行数View listItem = listAdapter.getView(i, null, gridView);listItem.measure(0, 0); // 计算子项View 的宽高totalHeight += listItem.getMeasuredHeight(); // 统计所有子项的总高度}ViewGroup.LayoutParams params = gridView.getLayoutParams();params.height = totalHeight + horizontalBorderHeight * (rows - 1);// 最后加上分割线总高度return params.height;
}