关于an-d-ro-id:Android项目实战浅谈ListView悬浮头部展现效果

54次阅读

共计 3684 个字符,预计需要花费 10 分钟才能阅读完成。

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

咱们先剖析要解决的问题:

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     }

相干教程

Android 根底系列教程:

Android 根底课程 U - 小结_哔哩哔哩_bilibili

Android 根底课程 UI- 布局_哔哩哔哩_bilibili

Android 根底课程 UI- 控件_哔哩哔哩_bilibili

Android 根底课程 UI- 动画_哔哩哔哩_bilibili

Android 根底课程 -activity 的应用_哔哩哔哩_bilibili

Android 根底课程 -Fragment 应用办法_哔哩哔哩_bilibili

Android 根底课程 - 热修复 / 热更新技术原理_哔哩哔哩_bilibili

本文转自 https://juejin.cn/post/7053062012112207903,如有侵权,请分割删除。

正文完
 0