软件编程
位置:首页>> 软件编程>> Android编程>> Android项目实战之ListView悬浮头部展现效果实现

Android项目实战之ListView悬浮头部展现效果实现

作者:传道士  发布时间:2022-08-11 16:35:32 

标签:android,listview,悬浮

实现效果:

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

Android项目实战之ListView悬浮头部展现效果实现

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

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代码:

private LinearLayout invis;
     private ListView lv;
     String[] strs;
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);

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 AbsListView.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);
                }
            }
        });
    }

来源:https://juejin.cn/post/7053062012112207903

0
投稿

猜你喜欢

手机版 软件编程 asp之家 www.aspxhome.com