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

首先上效果图,实现如下效果:

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

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

主要代码:

@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_sticky);
		invis = (LinearLayout) findViewById(R.id.invis);

		strs = new String[100];

		for (int i = 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(new ArrayAdapter<String>(this,
				android.R.layout.simple_list_item_1, strs));
		lv.setOnScrollListener(new OnScrollListener() {

			@Override
			public void onScrollStateChanged(AbsListView view, int scrollState) {

			}

			@Override
			public void onScroll(AbsListView view, int firstVisibleItem,int visibleItemCount, int totalItemCount) {
				if (firstVisibleItem >= 1) {
					invis.setVisibility(View.VISIBLE);
				} else {

					invis.setVisibility(View.GONE);
				}
			}
		});
	}

布局:

<?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="悬浮部分" />
        </LinearLayout>
    </FrameLayout>

</RelativeLayout>

代码下载地址:http://download.csdn.net/download/ljfbest/7804769

时间: 2024-11-11 01:01:45

Android 简单实现ListView顶部悬浮效果的相关文章

Android ScrollView向上滑动控件顶部悬浮效果实现

本文参考了:<上滑停靠顶端的悬浮框>的代码,在此表示感谢.[上滑停靠顶端的悬浮框]里的实现方法是使用两个控件,滑动时,监听ScrollView的滚动Y值,从而通过对两个控件的显示隐藏来实现控件的顶部悬浮.但是实际应用场景中,有可能需要悬浮的控件里面的内容是比较多的,如果通过显示隐藏的方式来实现的话,操作控件里的内容时,需要重复定义两套变量,对控件里的内容进行修改时也是要操作再次,非常麻烦. 本文的方法是通过addView和removeView来实现的. 一.首先让ScrollView实现滚动监

[Android Pro] android控件ListView顶部或者底部也显示分割线

reference to  :  http://blog.csdn.net/lovexieyuan520/article/details/50846569 在默认的Android控件ListView在顶部是不显示分割线的,但是我们可以使用一些技巧来显示.我们先来看下默认情况下ListView显示的效果: 可以看到顶部是没有分割线的,但是有时候我们的美工硬是在上面画了一条分割线,没办法,我们也得加上,我们在ListView顶部加上一个Header就可以实现,代码如下 listView.addHea

listView实现简单的顶部悬浮效果

转载的文章,感觉不错. http://blog.csdn.net/ljfbest/article/details/38765641

Android 沉浸式状态栏及悬浮效果

转载请注明出处 http://blog.csdn.net/xiaoyuan511 一.概述 现在大多数的电商APP的详情页长得几乎都差不多,几乎都是上面一个商品的图片,当你滑动的时候,会有Tab悬浮在上面,这样做用户体验确实不错,如果Tab滑上去,用户可能还需要滑下来,在来点击Tab,这样确实很麻烦.沉浸式状态栏那,郭霖说过谷歌并没有给出沉浸式状态栏这个明白,谷歌只说了沉浸式模式(Immersive Mode).不过沉浸式状态栏这个名字其实听不粗,随大众吧,但是Android的环境并没有IOS环

【Android】ListView 顶部浮动栏效果.md

ListView 中有时需要在顶部固定一个浮动栏,当向上滑动 ListView 时,浮动栏固定在顶部,当向下滑动 ListView 到其 HeaderView 可见时,浮动栏成为ListView的一部分,与ListView一起滑动.效果如下: 实现思路 使用两个浮动栏,一个浮动栏(A)添加到 ListView 的 HeaderView中,另一个浮动栏(B)与ListView顶部对齐布局.当ListView下滑超过浮动栏时,隐藏浮动栏(B),此时用户看到的是浮动栏(A):当ListView上滑超过

Android 仿美团网,大众点评购买框悬浮效果之修改版

我之前写了一篇关于美团网,大众点评的购买框效果的文章Android对ScrollView滚动监听,实现美团.大众点评的购买悬浮效果,我自己感觉效果并不是很好,如果快速滑动界面,显示悬浮框的时候会出现一卡的现象,有些朋友说有时候会出现两个布局的情况,特别是对ScrollView滚动的Y值得监听,我还使用了Handler来获取,还有朋友给我介绍了Scrolling Tricks这个东西,我下载试了下,确实美团网,大众点评的购买框用的是这种效果,但是Scrolling Tricks只能在API11以上

Android对ScrollView滚动监听,实现美团、大众点评的购买悬浮效果

我之前写了一篇关于美团网,大众点评的购买框效果的文章Android对ScrollView滚动监听,实现美团.大众点评的购买悬浮效果,我自己感觉效果并不是很好,如果快速滑动界面,显示悬浮框的时候会出现一卡的现象,有些朋友说有时候会出现两个布局的情况,特别是对ScrollView滚动的Y值得监听,我还使用了Handler来获取,还有朋友给我介绍了Scrolling Tricks这个东西,我下载试了下,确实美团网,大众点评的购买框用的是这种效果,但是Scrolling Tricks只能在API11以上

Android 仿美团网,大众点评购买框悬浮效果

如上图美团网,大众点评购买框悬浮效果,用户在向上滑动界面时,购买按钮始终在界面上,用户体验很好,很人性化.下面具体看看代码是怎么实现的: 主界面布局文件main.xml <?xml version="1.0" encoding="UTF-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+

【Android UI】ListView的使用和简单优化

ListView是每个app中都要使用的,所以今天我来总结下ListView的使用和一些简单的优化. 先看下运行效果: 一.创建数据库 为了模拟数据,这里将数据保存数据库中,顺便复习一下SQLite的知识,将数据保存到数据库的好处就是很容易模拟网络请求的延迟. 1.创建数据库打开帮助类BlackNumberDBOpenHelper,它继承自SQLiteOpenHelper package com.yzx.listviewdemo.db; import android.content.Contex