android开发中使用scrollView嵌套Listview

在公司做钱眼这个app时，其中有一个界面比较复杂，上边需要显示很多的数据，下边还有一个列表。如下图。
(公司产品尚未上线，因此用了一个同类型app的界面了)。当我看到这个美工切图以后，我自然反应使用一个listview实现所有逻辑，事实上我已经实现了。在【热帖、新贴、新闻、公告、球友】上边相当于head，之下的都市listview的item。虽然实现了，但是感觉代码比较乱。也在网上找了一些资料，发现可以通过scrollview嵌套listview的方式实现，【热帖、新贴、新闻、公告、球友】之上是一部分，下边是listview，整体使用scrollview包裹。这杨的话，在adapter中的代码要少得多，不像我现在adapter里边的代码还是比较复杂的。所以，我就想研究一下scrollview里边嵌套listview有没有什么问题，如果没有问题的话，接下来在重构代码时，把这一块的代码就改了。

使用listview的三种情况：
1. 整个界面就一个listview，通过上下滑动就能显示所有的数据。
2. 整个界面分两个部分，上部分显示其他的数据，下半部分显示listview。我们通过滑动listview就能显示所有的数据了。但是我们想滑动listview时，能不能上半部分也能滑动呢？
3. 整个界面分两个部分，上半个部分显示listview，下边显示其他。那么当listview显示很多数据的时候，下边就不能正常显示出来？

以上第二、三我们都可以通过scollview嵌套listview来实现。

那我们就先来看看再scrollview里边嵌套listview时，不做任何处理会出现什么情况呢。
先看看我的Activity中的代码：

package com.example.listviewdemo;

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

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;

public class MainActivity extends Activity {

    private ListView mListview;
    private ArrayList<String> datas;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);
        mListview = (ListView) findViewById(R.id.lv);
        initData();
        TestAdapter adapter = new TestAdapter(this, R.layout.listview_item, datas);
        mListview.setAdapter(adapter);

    }

    private void initData(){
        datas = new ArrayList<String>();
        for(int i = 0; i < 20; i++){
            datas.add("test    " + i);
        }
    }


    class TestAdapter extends ArrayAdapter<String>{

        public TestAdapter(Context context, int resource, List<String> objects) {
            super(context, resource, objects);
        }


        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            String text = datas.get(position);
            ViewHolder holder = null;
            if (convertView == null){
                holder = new ViewHolder();
                convertView = View.inflate(MainActivity.this, R.layout.listview_item, null);
                holder.tv = (TextView) convertView.findViewById(R.id.tv);
                convertView.setTag(holder);
            }else{
                holder = (ViewHolder) convertView.getTag();
            }

            holder.tv.setText(text);
            return convertView;
        }

        class ViewHolder{
            TextView tv;
        }

    }

}

代码很简单吧。再看看我的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="match_parent"
    android:orientation="vertical" >

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="listview上边的文字1"
                android:textSize="40sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="listview上边的文字2"
                android:textSize="40sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="listview上边的文字3"
                android:textSize="40sp" />

            <ListView
                android:id="@+id/lv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >
            </ListView>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="listview下边的文字1"
                android:textSize="40sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="listview下边的文字2"
                android:textSize="40sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="listview下边的文字3"
                android:textSize="40sp" />
        </LinearLayout>
    </ScrollView>

</LinearLayout>

有一个细节需要注意，在scrollview中只能放入一个子容器控件。这个xml布局表示，该界面上边放三个TextView，下边也放TextView。结果显示惨不忍睹，listview中只能显示一两个item。这也是我放弃使用scrollview包裹listview原因吧。那么有没有解决的方法吧。

其实有两种方法：
1. 对于listview添加adapter以后，把所有的item的高度和分割线的高度计算出来，计算一个总和。最后给listview设置LayoutParams即可。那我们就来拭目以待吧。
在Activity中调用setListViewHeightBasedOnChildren。该方法代码如下：

/**
     * 用于解决ScrollView嵌套listview时，出现listview只能显示一行的问题
     * @param listView
     */
     public void setListViewHeightBasedOnChildren(ListView listView) {   
         // 获取ListView对应的Adapter   
         ListAdapter listAdapter = listView.getAdapter();   
         if (listAdapter == null) {   
            return;   
         }   

         int totalHeight = 0;   
         for (int i = 0, len = listAdapter.getCount(); i < len; i++) {   
             // listAdapter.getCount()返回数据项的数目   
             View listItem = listAdapter.getView(i, null, listView);   
            // 计算子项View 的宽高   
             listItem.measure(0, 0);    
             // 统计所有子项的总高度   
                 totalHeight += listItem.getMeasuredHeight();    
        }   

         ViewGroup.LayoutParams params = listView.getLayoutParams();   
         params.height = totalHeight+ (listView.getDividerHeight() * (listAdapter.getCount() - 1));   
         // listView.getDividerHeight()获取子项间分隔符占用的高度   
         // params.height最后得到整个ListView完整显示需要的高度   
         listView.setLayoutParams(params);   
    }  

结果你也发现，listview所有的条目都能显示出来了。滚动效果也有了。这样做以后存在两个问题。
1.1 每次都显示listview的第一个item。比如我的例子中，显示时总是显示第一个【test 0】，上边的TextView都自动滚动最上边了。但是，这个问题我倒是有办法解决的。可以在oncreate方法中，setListViewHeightBasedOnChildren(mListview);方法之后调用。

mScrollView.post(new Runnable() {

            @Override
            public void run() {
                mScrollView.scrollTo(0, 0);

            }
        });

但第一个问题还是解决不了。所有使用这种方法也是有弊端的。

1. 我们看看第二种方法吧。自定义listview重写onMeasure方法。具体实现如下：

package com.example.listviewdemo;

import android.widget.ListView;

public class ScrollViewWithListView extends ListView {

    public ScrollViewWithListView(android.content.Context context,
            android.util.AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * Integer.MAX_VALUE >> 2,如果不设置，系统默认设置是显示两条
     */
    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
                MeasureSpec.AT_MOST);
        super.onMeasure(widthMeasureSpec, expandSpec);

    }
}

使用这种方法也能实现scrollview嵌套listview的情况。当同样出现第一个方法出现的问题。

综上所述，在scrollview中嵌套listview方案是可行的。目前有很多的APP的list界面都采用这种设计。上边有一部分，下边是一个listview。整体是可以滚动的，当往上滚动到一段距离以后，就会出现固定一个悬浮框。

讲了这么多的理论，我们就来做一个实例吧。
效果图：

当下边的商品往上滚动时，【可乐鸡翅】这个titlebar就会固定在顶部了。请看下边代码。
package com.jimstin.topfloatdemo.view;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.ScrollView;

public class MyScrollView extends ScrollView {

View mTopView;
View mFlowView;
public MyScrollView(Context context, AttributeSet attrs) {
    super(context, attrs);
    // TODO Auto-generated constructor stub
}

@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {

    super.onScrollChanged(l, t, oldl, oldt);
    if(mTopView != null && mFlowView != null) {
        if(t >= mTopView.getHeight()) {
            mFlowView.setVisibility(View.VISIBLE);
        } else {
            mFlowView.setVisibility(View.GONE);
        }
    }
}
/**
 * 监听浮动view的滚动状态
 * @param topView 顶部区域view，即当ScrollView滑动的高度要大于等于哪个view的时候隐藏floatview
 * @param flowView 浮动view，即要哪个view停留在顶部
 */
public void listenerFlowViewScrollState(View topView, View flowView) {
    mTopView = topView;
    mFlowView = flowView;
}

}
重写onScrollChanged方法，当滚动的高度大于等于上边view的高度时，就把隐藏的悬浮框显示出来。针对公司的产品，接下来优化方向也是基于这个方向进行改造。
代码下载
代码下载