Android 简单实现ListView顶部悬浮效果

来源：互联网发布：淘宝为什么可以寄刀具编辑：程序博客网时间：2024/04/24 00:45

首先上效果图，实现如下效果：

起初在网上搜了下实现这样的效果，美团网,大众点评的“购买框”悬浮效果也是这样的，不过作者实现比较麻烦，自己想了想就根据ListView提供的一些特性进行了简单实现。

整个主要布局就是一个ListView，如果listview的上面有内容且高度比较高，可以把它当做listview的header，这样也可以避免ScrollView嵌套ListView带来的麻烦（记住这一点就不会在平时出现ScrollView与ListView各种问题了）。要实现悬浮效果，主要是根据ListView可见的第一个条目是哪个条目来操作的。注意这里的“悬浮”其实只是通过隐藏/显示悬浮部分来实现：在ListView“背后”有一个隐藏的“悬浮部分”，当ListView条目中的悬浮部分成为ListView可见部分第一个时，这时非ListView条目中的悬浮部分显示出来，这样造成“悬浮”部分一直在顶部浮动，当ListView可见部分第一个条目并不是悬浮时，非ListView那部分“隐藏部分”继续隐藏。表达能力不强，自己都快被自己绕晕了，总之就是2个悬浮部分：ListView条目中的和处于布局顶部隐藏（Gone/invisible）的起初未显示的，通过这两部分的操作来完成整个功能的。希望读者能够理解……

主要代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@Override
    protectedvoid onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sticky);
        invis = (LinearLayout) findViewById(R.id.invis);
 
        strs = newString[100];
 
        for(inti = 0; i < 20; i++) {
            strs[i] = "data-----"+ i;
        }
 
        lv = (ListView) findViewById(R.id.lv);
        View header = View.inflate(this, R.layout.stick_header, null);//头部内容
        lv.addHeaderView(header);//添加头部
        lv.addHeaderView(View.inflate(this, R.layout.stick_action, null));//ListView条目中的悬浮部分 添加到头部
 
        lv.setAdapter(newArrayAdapter<string>(this,
                android.R.layout.simple_list_item_1, strs));
        lv.setOnScrollListener(newOnScrollListener() {
 
            @Override
            publicvoid onScrollStateChanged(AbsListView view, intscrollState) {
 
            }
 
            @Override
            publicvoid onScroll(AbsListView view, intfirstVisibleItem,intvisibleItemCount, inttotalItemCount) {
                if(firstVisibleItem >= 1) {
                    invis.setVisibility(View.VISIBLE);
                }else{
 
                    invis.setVisibility(View.GONE);
                }
            }
        });
    }</string>

布局：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!--?xml version="1.0"encoding="utf-8"?-->
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent">
 
    <textview android:id="@+id/title"android:layout_width="match_parent"android:layout_height="30dp"android:background="#332b3b"android:gravity="center"android:text="标题"android:textcolor="#ffffff">
 
    <frameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/title">
 
        <listview android:id="@+id/lv"android:layout_width="match_parent"android:layout_height="match_parent">
 
        <linearlayout android:id="@+id/invis"android:layout_width="fill_parent"android:layout_height="50dp"android:background="#ccedc7"android:orientation="horizontal"android:visibility="gone">
 
            <textview android:id="@+id/tv"android:layout_width="match_parent"android:layout_height="50dp"android:gravity="center"android:text="悬浮部分">
        </textview></linearlayout>
    </frameLayout>
 
</listview></textview></relativelayout>

0 0