【五种方式实现Android吸顶效果 最全总结！】列表滑动到顶部 固定顶部栏效果...

其他 2019-02-18 20:01:47 阅读次数: 0

如今许多app都会应用到的一种UI交互形式，列表滑动到顶部，固定顶部栏效果，我们也可以称作其为吸顶效果。比如微博 、各大浏览器的首页信息流模块、我的页面的设计等。


7048342-1bbdc57ef66d4229.png
微博评论的吸顶效果

本文将循序渐进的通过多种方式实现吸顶效果。大家择优选取适合自己的实现方式。 实现效果如图:

7048342-8b282903cfe97f58.gif
demo实现

一、两个相同的顶部栏

写两个一模一样的固定悬浮栏，在一开始把外层固定栏先隐藏，当内层固定栏滑动到外层固定位置时，把内层固定栏隐藏，外层固定栏显示。
头部+内层悬浮栏+list 组成了scrollview
7048342-77361f1a7a05078f.png

主要代码 监听scrollview的滑动，隐藏显示内外悬浮窗

 scrollView.setScrollChangeListener(new MyScrollView.ScrollChangedListener() {
            @Override
            public void onScrollChangedListener(int x, int y, int oldX, int oldY) {
                if (y >= topHeight) {
                    //重点 通过距离变化隐藏内外固定栏实现
                    llOutsideFixed.setVisibility(View.VISIBLE);
                    insideFixedBar.setVisibility(View.GONE);
                    recyclerView.setNestedScrollingEnabled(true);
                } else {
                    llOutsideFixed.setVisibility(View.GONE);
                    insideFixedBar.setVisibility(View.VISIBLE);
                    recyclerView.setNestedScrollingEnabled(false);
                }
            }
        });

二、通过ListView

通过listview添加头部，当listview滑动到顶部将原本隐藏的头部布局显示出来。
 listView.setOnScrollListener(new AbsListView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {
            }
            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
                /* 判断ListView头部(mHeaderView)当前是否可见
                 * 来决定隐藏或显示浮动栏(mFloatBar)*/
                if (firstVisibleItem >= 1) {
                    flOutSideBar.setVisibility(View.VISIBLE);
                } else {
                    flOutSideBar.setVisibility(View.GONE);
                }
            }
        });
这种方式需要写重复布局，事件监听，当固定布局带有状态时，还要将两个状态同这种方式实现的根本其实也是很方式一相同，也需要引入两个相同的顶部固定栏，相比方式一不同的是：
  • 方式二滑动监听通过listview自带的setOnScrollListener即可，方式一需要暴露接口提供滑动位移变化值。
  • 当存在滑动的view时，方式二不需要处理冲突，方式一需要冲突处理。
  • 布局的引入:外部悬浮窗和头部布局，listview通过addHeaderView引入即可。管理起来方便。
方式一和方式二的缺点就是:
  • 需要写两个相同的xml文件 以及重复写相应点击事件的逻辑。
  • 逻辑复杂时，需要同步固定悬浮窗的状态，在业务发生变化的时候可能需要同时去改动至少两处代码，增加出错的概率。

三、使用一个顶部栏 用一个空布局动态增删顶部栏来实现。

这种方式的实现方式就是对第一种实现方式的简单优化，其他基本一致。

大体思路:将方式一的两个顶部栏变成一个，利用removeView和addView根据坐标点在页面滑动的时候动态的把固定栏在内外部切换。在scrollview外部添加一个空的layout，当滑动到指定的点，就将内层悬浮窗布局移除，添加到外层的空的布局。这样就解决了要同步状态和写两个相同的xml布局的问题了。

7048342-b5f729e512cf1aa4.png 
 scrollView.setScrollChangeListener(new MyScrollView.ScrollChangedListener() {
            @Override
            public void onScrollChangedListener(int x, int y, int oldX, int oldY) {
                if (y >= topHeight) {
                    if (rlInsideFixed.getParent() != llFixed) {
                        insideFixedBarParent.removeView(rlInsideFixed);
                        llFixed.addView(rlInsideFixed);
                        recyclerView.setNestedScrollingEnabled(true);

                    }
                } else {
                    if (rlInsideFixed.getParent() != insideFixedBarParent) {
                        llFixed.removeView(rlInsideFixed);
                        insideFixedBarParent.addView(rlInsideFixed);
                        recyclerView.setNestedScrollingEnabled(false);
                    }
                }
            }
        });

方式三是动态的增加和移除view，缺点是当包裹内容布局中带有滑动特性的View（ListView，RecyclerView等)，我们需要额外处理滑动冲突，并且这种包裹方式，会使得它们的缓存模式失效。

四、借助android5.0的新特性 CoordinatorLayout+AppbarLayout+ CollapsingToolbarLayout

首先要使用android5.0的material design风格 我们需要引入以下依赖

    implementation 'com.android.support:design:x.+'

然后依次介绍这几个UI的功能

  1. CoordinatorLayout 顶层布局 类似relativelayout、linearlayout等，不同的是它可以协调子view之间的交互。产生联动的效果。子view通过app:layout_behavior 指定相应的行为。
  2. AppBarLayout 是一个垂直布局的 LinearLayout，它主要是为了实现 “Material Design” 风格的标题栏的特性，比如：滚动。可以响应用户的手势操作，但是必须在CoordinatorLayout下使用，否则会有许多功能使用不了。
    AppBarLayout里面的View，是通过app:layout_scrollFlags属性来控制滑动，其中有4种Flag的类型.
  • Scroll：向下滚动时,被指定了这个属性的View会被滚出屏幕范围直到完全不可见的位置。
  • enterAlways：向上滚动时,这个View会随着滚动手势出现,直到恢复原来的位置。
  • enterAlwaysCollapsed： 当视图已经设置minHeight属性又使用此标志时，视图-只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
  • exitUntilCollapsed： 滚动退出屏幕，最后折叠在顶端。
  1. CollapsingToolbarLayout 折叠布局 用来协调AppBarLayout来实现滚动隐藏ToolBar的效果。继承自 FrameLayout，它是用来实现 Toolbar 的折叠效果，一般它的直接子 View 是 Toolbar，当然也可以是其它类型的 View。通过设置layout_collapseMode 控制折叠属性 。（官方说CollapsingToolbarLayout主要是配合Toolbar而设计的。但如果我们不需要 也可以不加toolbar。只不过在需要toolbar的时候配合CollapsingToolbarLayout效果更佳。）
  • 不设置 跟随NestedScrollView的滑动一起滑动,NestedScrollView滑动多少距离他就会跟着走多少距离
  • parallax 视差效果 layout_collapseParallaxMultiplier视差因子 0~1之间取值

  • pin 固定效果，在折叠的时候最后固定在顶端。在滑动过程中,此自布局会固定在它所在的位置不动,直到CollapsingToolbarLayout全部折叠或者全部展开。


    7048342-f49955b4e4d2f3d7.png 
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">


        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:statusBarScrim="@android:color/transparent">

            <include layout="@layout/header" />

        </android.support.design.widget.CollapsingToolbarLayout>

        <include layout="@layout/inside_fixed_bar" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#d2ebaf"/>

    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

这种方式是最推荐的。但这个既不用处理滑动冲突，也不会有缓存问题。使用起来也很流畅。

五、 通过重写RecyclerView的分割线ItemDecoration来实现。

ItemDecoration是RecyclerView下的抽象方法,允许给特定的item视图添加特性的绘制以及布局间隔。它可以用来实现item之间的分割线，高亮，分组边界等。三个重要的方法：getItemOffsets、onDraw、onDrawOver（自行了解）

实现思路:比如我们之前放的微博评论的吸顶效果图，首先是微博内容，我们把它当成是RecyclerView的HeaderView即可，也是Item的一项，然后下面的评论列表就是基础的RecyclerView使用了，然后中间固定的布局,就是ItemDecoration里的getItemOffsets、onDraw、onDrawOver这三个方法来配合实现了。在onDraw方法里判断是否是列表的第一项 除了头部布局，如果是就绘制顶部栏，不是，绘制分割线。在onDrawOver里判断是否是头部布局，如果是不做处理，不是就在视图可见的第一项上绘制顶部栏。getItemOffsets是绘制的边距，也是分是不是头部项的情况去判断。如果我们只想简单的绘制分割线，getItemOffsets让item之间空出间隙，然后再调用onDraw在这个间隙上填充颜色即可。
public class FixedBarDecoration extends RecyclerView.ItemDecoration {

    private int mItemHeaderHeight;
    private Paint mLinePaint;
    private Paint mItemHeaderPaint;
    private Paint mTextPaint;
    private Rect mTextRect;

    public FixedBarDecoration(Context context) {
        
        mItemHeaderHeight = ViewUtils.dip2px(context, 40);

        mTextRect = new Rect();
        mItemHeaderPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mItemHeaderPaint.setColor(Color.BLUE);

        mLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mLinePaint.setColor(Color.GRAY);

        mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint.setTextSize(46);
        mTextPaint.setColor(Color.WHITE);
    }


    //吸顶效果的主要实现方法
    @Override
    public void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        if (parent.getAdapter() instanceof NormalAdapter) {
            NormalAdapter adapter = (NormalAdapter) parent.getAdapter();
            int position = ((LinearLayoutManager) (parent.getLayoutManager())).findFirstVisibleItemPosition();
            if (adapter.isHasHeader() && position == 0) {
                return;
            }
            //如果不是头部view 那就直接在当前第一个可见的item顶部画一个固定栏即可
//            View view = parent.findViewHolderForAdapterPosition(position).itemView;
            c.drawRect(0, 0, parent.getWidth(), mItemHeaderHeight, mItemHeaderPaint);
            mTextPaint.getTextBounds("悬浮固定栏", 0, "悬浮固定栏".length(), mTextRect);
            c.drawText("悬浮固定栏", parent.getWidth() / 2 - mTextRect.width() / 2, mItemHeaderHeight / 2 + mTextRect.height() / 2, mTextPaint);

        }
    }

    //绘制分割线和固定栏
    @Override
    public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        if (parent.getAdapter() instanceof NormalAdapter) {
            NormalAdapter adapter = (NormalAdapter) parent.getAdapter();
            int count = parent.getChildCount();
            for (int i = 0; i < count; i++) {
                View view = parent.getChildAt(i);
                int position = parent.getChildLayoutPosition(view);
                boolean isFirstItem = adapter.isFirstItem(position);
                if (isFirstItem) {
                    c.drawRect(0, view.getTop() - mItemHeaderHeight, parent.getWidth(), view.getTop(), mItemHeaderPaint);
                    mTextPaint.getTextBounds("悬浮固定栏", 0, "悬浮固定栏".length(), mTextRect);
                    c.drawText("悬浮固定栏", parent.getWidth() / 2 - mTextRect.width() / 2, (view.getTop() - mItemHeaderHeight) + mItemHeaderHeight / 2 + mTextRect.height() / 2, mTextPaint);
                } else {
                    c.drawRect(0, view.getTop() - 1, parent.getWidth(), view.getTop(), mLinePaint);
                }
            }
        }
    }

    @Override
    public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        if (parent.getAdapter() instanceof NormalAdapter) {
            NormalAdapter adapter = (NormalAdapter) parent.getAdapter();
            int position = parent.getChildLayoutPosition(view);
            boolean isFirstItem = adapter.isFirstItem(position);
            if (isFirstItem) {
                outRect.top = mItemHeaderHeight;
            } else {
                outRect.top = 1;
            }

        }
    }

}

这种方式的缺点就是如果顶部栏的布局复杂，难以绘制，以及顶部栏的监听事件添加复杂。

六、扩展:分组加吸顶效果

思路:当我们要实现分组+吸顶效果，为了实现顶部栏固定不动，可以利用onDrawOver在RecyclerView的上绘制一个和头部布局一模一样的布局呢，让它覆盖住了第一个头布局，在视觉上我们是不会有所察觉的，然后当列表滑动的时候，其实“原来的头布局”早已经滑动走了，留下的其实是我们绘制的固定布局而已，等到下一个头部布局“碰头”的时候，让它随着滑动的速度慢慢改变布局的高度，当布局高度为0的时候，也就是被顶出去的时候，然后再让高度改变回来，覆盖住第二个布局，然后不断重复以上步骤即可。
参考文章吸顶+分组效果的实现

参考文章:
View事件体系之View坐标系图示理解
coordinatorLayout使用总结篇，看完这篇完全可以开发5.0的高级特效了

最重要的源码地址点这里

给个爱心赞❤️

猜你喜欢

转载自blog.csdn.net/weixin_33950035/article/details/87144756
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022