Android项目实战(二十):浅谈ListView悬浮头部展现效果

简介:   先看下效果:需求是 滑动列表 ,其中一部分视图(粉丝数,关注数这一部分)在滑动到顶端的时候不消失,而是停留在整个界面头部。   我们先分析要解决的问题: 1、如何实现列表ListView顶部视图跟随ListView一起滑动 2、如何实现滑动过程中需要停留在顶部的视图   解决: 第一个问题,实现ListView与顶部视图一起滑动,ListView提供一个方法,addHeadView(View);  意思就是在ListView顶部添加一个View。

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

 

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

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

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

 

解决:

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

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

首先我们这个停留在顶部的View(称为View1)是ListView.addHeadView()上去的,即滑动列表,这个View1会划出去,那么如何让它不划出去?只要在Listview所在布局最上方

也写一个同样的View(称为View2,View2和ListView同属于一个FragmentLayout)并先隐藏(Visible = 'gone'),当View1刚划出顶部的时候,View2显示。

View1刚划出顶部的时机就是:

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

 

代码实现:

首先布局文件:

头部布局:

 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     }

 

相关文章
|
6月前
|
API Android开发 开发者
Android UI设计: 什么是RecyclerView?为什么它比ListView更好?
Android UI设计: 什么是RecyclerView?为什么它比ListView更好?
86 2
|
1月前
|
Android开发
Android开发显示头部Bar的需求解决方案--Android应用实战
Android开发显示头部Bar的需求解决方案--Android应用实战
21 0
|
5月前
|
API Android开发 开发者
`RecyclerView`是Android API 21引入的UI组件,用于替代ListView和GridView
【6月更文挑战第26天】`RecyclerView`是Android API 21引入的UI组件,用于替代ListView和GridView。它提供高效的数据视图复用,优化的布局管理,支持多种布局(如线性、网格),并解耦数据、适配器和视图。RecyclerView的灵活性、性能(如局部刷新和动画支持)和扩展性使其成为现代Android开发的首选,特别是在处理大规模数据集时。
66 2
|
6月前
|
XML Java Android开发
Android Studio App入门之列表视图ListView的讲解及实战(附源码 超详细必看)
Android Studio App入门之列表视图ListView的讲解及实战(附源码 超详细必看)
687 1
|
5月前
|
前端开发 API Android开发
25. 【Android教程】列表控件 ListView
25. 【Android教程】列表控件 ListView
176 2
|
6月前
|
XML Java Android开发
如何美化android程序:自定义ListView背景
如何美化android程序:自定义ListView背景
63 2
|
6月前
|
XML 编解码 Java
Android控件之高级控件——ListView、cardView、屏幕适配
Android控件之高级控件——ListView、cardView、屏幕适配
|
11月前
|
XML Android开发 数据格式
安卓-无敌解决ListView添加标题头无法正常显示的问题(歪门邪道)
安卓-无敌解决ListView添加标题头无法正常显示的问题(歪门邪道)
75 0
|
Java Android开发
[笔记]Android 学习一之转场动画+ViewPager+ListView简单Demo
[笔记]Android 学习一之转场动画+ViewPager+ListView简单Demo
|
Java API Android开发
Android项目实战:使用Retrofit构建天气预报应用
1. 项目简介 在这个Android项目实战中,我们将构建一个简单的天气预报应用。用户可以输入城市名称,获取该城市的实时天气信息、未来几天的天气预报以及其他相关信息。为了实现这个功能,我们将使用Retrofit框架进行网络请求,从OpenWeatherMap API获取天气数据。
311 0