仿蘑菇街个人主页

效果图：

看到效果图，第一想到的大致布局是一个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对应的Adapter    ListAdapter listAdapter = listView.getAdapter();    if (listAdapter == null) {        // pre-condition        return 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 exception        e.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;}