listView滚动view置顶的简单做法

今天要实现这么一个交互效果：ListView往上滚动到一定距离，某个View固定在标题栏下面；往下滚动到某个距离，固定的View又回到原处，

网上有一些人也做了这种交互效果，我做的这个效果比较简单。

先看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" >

<include layout="@layout/title_layout"/>

<FrameLayout
android:id="@+id/rootView"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<ListView
android:id="@+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:cacheColorHint="#00000000"
/>
<!-- 保持在顶部的view -->
<include
android:id="@+id/stayTop"
layout="@layout/staytop_layout"
android:visibility="invisible"
/>

</FrameLayout>

</LinearLayout>

staytop_layout.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="40dp"
android:orientation="vertical"
android:background="#e3e3e3"
>

<TextView
android:layout_width="match_parent"
android:layout_height="40dp"
android:text="stayTop"
android:textSize="18sp"
android:gravity="center"
/>

</LinearLayout>

在主布局里定义了一个ListView和保持在顶部的view，在ListView滚动过程中设置view的visible是否可见，这样来实现这么一个效果。接下来看Activity如何实现的：

package com.androidtest.scroll;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AbsListView;
import android.widget.AbsListView.OnScrollListener;
import android.widget.ListView;
import android.widget.TextView;
import com.androidtest.R;
import com.androidtest.base.BaseActivity;

public class ScrollActivity extends BaseActivity {

private ListView mListView;
private View header1,header2;
private View stayTopView;
private TextView title;
private int top;

@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_scroll);

init();

}

private void init() {
title=(TextView) findViewById(R.id.title);
title.setText("test scroll");

findViewById(R.id.back).
setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
finish();
}
});

stayTopView=findViewById(R.id.stayTop);
mListView=(ListView) findViewById(R.id.listview);

header1=LayoutInflater.from(this).
inflate(R.layout.header_layout,null);
mListView.addHeaderView(header1);

header2=LayoutInflater.from(this).
inflate(R.layout.staytop_layout, null);

mListView.addHeaderView(header2);

mListView.setAdapter(createAdapter());

new OnScrollListener() {

@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
// TODO Auto-generated method stub

}

@Override
public void onScroll(AbsListView view,
int firstVisibleItem,
int visibleItemCount, int totalItemCount) {
// TODO Auto-generated method stub
if(firstVisibleItem<=1) {
top=header2.getTop();
}

if(top<0 || firstVisibleItem>1) {
if(stayTopView.getVisibility()!=View.VISIBLE)
stayTopView.setVisibility(View.VISIBLE);
} else {
if(stayTopView.getVisibility()!=View.GONE)
stayTopView.setVisibility(View.GONE);
}
}
});
}
}

header_layout.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" >
<!--一个简单的view-->
<View
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#8800ff56"
/>

</LinearLayout>

监听ListView的OnScrollListener事件，OnScrollListener有个onScroll方法，在这个方法中判断要固定在顶部的ListView的headerView是否移除了屏幕的可见范围。因为headerView在ListView中的索引是1（添加了2个headerViews），所以如果firstVisibleItem>1，就说明这个headerView已经不可见了，所以就将stayTopView显示出来；如果firstVisibleItem<=1，说明headerView还在屏幕上，这个时候就要判断它的top，因为它的top值是相对于它的容器ListView的，当top>0时，headerView距离顶部还有一段距离；当top==0时，headerView刚好位于顶部；当top<0时，headerView已经不可见了。

之前有人做的这个效果中少了一个判断条件，即firstVisibleItem>1，如果在正常情况下，滚动至顶的效果是有效的，但是如果快速滚动的话，滚动至顶的效果就会无效，通过打印log发现top时大于0的，可能是ListView复用view导致的。