ListView悬浮头部展现效果

  先看下效果:需求是 滑动列表 ,其中一部分视图(粉丝数,关注数这一部分)在滑动到顶端的时候不消失,而是停留在整个界面头部。

我们先分析要解决的问题:

1、如何实现列表ListView顶部视图跟随ListView一起滑动

2、如何实现滑动过程中需要停留在顶部的视图

解决:

第一个问题,实现ListView与顶部视图一起滑动,ListView提供一个方法,addHeadView(View);  意思就是在ListView顶部添加一个View。那么这个View就能和ListView一起滚动。

第二个问题,怎么保证界面中间的某一部分视图滑动到顶部的时候停留在顶部呢?

解决思路是addHeadView添加要停留在顶部的部分,在ListView的setOnScrollListener()中,

当滑动时 firstVisibleItem>=要悬浮的 item的position时 让悬浮部分显示 ,否则隐藏。

代码实现:

首先布局文件:

头部布局:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="vertical"
 4     android:layout_width="match_parent"
 5     android:layout_height="wrap_content"
 6     android:gravity="center"
 7     >
 8     <ImageView
 9         android:layout_width="match_parent"
10         android:layout_height="90dp"
11         android:src="@mipmap/p1"
12         android:scaleType="fitXY"
13         />
14 </LinearLayout>

要停留在顶部的View布局:(这里是要停留在顶部的View,这里addHeadView到ListView顶部,跟随者ListView滑动到顶部消失,这时满足firstVisibleItem>=要悬浮的 item的position条件,主界面里在写一个相同的View显示即可)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    >
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:src="@mipmap/p2"
            android:scaleType="fitXY"
            />
</LinearLayout>

主布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:gravity="center"
        android:text="个人中心"
        android:textSize="20dp"
         />

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <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="wrap_content"
            android:orientation="horizontal"
            android:visibility="gone"
            >

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:src="@mipmap/p2"
                android:scaleType="fitXY"
                />
        </LinearLayout>
    </FrameLayout>

</LinearLayout>

java代码:

 1 private LinearLayout invis;
 2     private ListView lv;
 3     String[] strs;
 4     @Override
 5     protected void onCreate(Bundle savedInstanceState) {
 6         super.onCreate(savedInstanceState);
 7         setContentView(R.layout.activity_main);
 8
 9         invis = (LinearLayout) findViewById(R.id.invis);
10
11         strs = new String[100];
12
13         for (int i = 0; i < 20; i++) {
14             strs[i] = "data-----" + i;
15         }
16
17         lv = (ListView) findViewById(R.id.lv);
18         View header = View.inflate(this, R.layout.stick_header, null);//头部内容
19         lv.addHeaderView(header);//添加头部
20
21         lv.addHeaderView(View.inflate(this, R.layout.stick_action, null));//ListView条目中的悬浮部分 添加到头部
22
23         lv.setAdapter(new ArrayAdapter<String>(this,
24                 android.R.layout.simple_list_item_1, strs));
25         lv.setOnScrollListener(new AbsListView.OnScrollListener() {
26
27             @Override
28             public void onScrollStateChanged(AbsListView view, int scrollState) {
29
30             }
31
32             @Override
33             public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
34                 if (firstVisibleItem >= 1) {
35                     invis.setVisibility(View.VISIBLE);
36                 } else {
37
38                     invis.setVisibility(View.GONE);
39                 }
40             }
41         });
42
43     }
时间: 2024-10-12 03:53:20

ListView悬浮头部展现效果的相关文章

ListView之头部浮动效果

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

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

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

CSS3实现的鼠标悬浮开门关门效果代码实例

CSS3实现的鼠标悬浮开门关门效果代码实例:本章节分享一段代码实例,它利用CSS3模拟实现了简单的开门关门效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落<

Midnight.js – 实现奇妙的固定头部切换效果

Midnight.js 是一款 jQuery 插件,在页面滚动的时候实现多个头设计之间的切换,所以你总是有一个头与它下面的内容层叠,看起来效果很不错. Midnight.js 可以让你轻松实现这种切换固定头的效果. 在线演示      插件下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型 jQu

ListView 实现带有Filpper效果的左右滑动删除 Item

ListView 实现带有Filpper效果的左右滑动删除 Item  的实现最主要的方法还是 对 Listview 的继承重写 .然后是在删除过程中添加 TranslateAnimation 滑动事件. <span style="font-size:14px;">public class FilpperActivity extends Activity { private FilpperListvew flipperListView; private MyAdapter

一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content=&

android listview 不显示选中效果分析

android listview有时会发现没有选中效果,解决办法 1:listview布局中设置颜色,如 android:background="@android:color/white" 2:在listview的item布局文件中背景设置为 android:background="@android:color/transparent" 原因:颜色设置在整体的listview上面,每一行布局设置透明色即可 android listview 不显示选中效果分析

Android ListView实现各种动画效果ListViewAnimations

效果图: 以卡片的形式: 以GridView的形式: 以透明度渐变.分别向左右上下不通方向飞入: (整个ListView的效果)            ListView中items的效果: 长按单个item进行位置移动:    删除单个item: 同时选择删除多个item: 点击单个item的事件. 第三方控件 源代码: 链接:http://pan.baidu.com/s/1kTimSFd 密码:lel211

滑动删除ListView的Item的效果

本例子实现了滑动删除ListView的Itemdemo的效果.大家都知道.这种创意是来源于IOS的.左滑删除的功能.在Android上面实现比较麻烦.本例子中不仅实现了左滑删除功能.还实现了左滑赞.左滑分享.左滑收藏等功能.当然大家也可以根据自己项目的需求来修改功能.QQ和微信也实现了相同的功能.大家可以看看.先上程序运行的效果 采用的恶事一个开源库swipemenulistview.jar 代码如下 布局 <com.baoyz.swipemenulistview.SwipeMenuListVi