Android自定义RecyclerView Item头部悬浮吸顶

本文实例为大家分享了Android自定义RecyclerView Item头部悬浮吸顶的具体代码,供大家参考,具体内容如下

概述

1、自定义了一个FrameLayout,引入条目的头部布局加入到自定义FrameLayout中.
2、将RecyclerView加入FrameLayout
3、条目头部View的Alpha动画以及设置透明和不透明这个时机大多是通过打log来确定的,硬推理还是有些难.
4、当屏幕显示区域的第二条Item距离控件顶端的距离小于条目头部View高度时,就开始移动条目头部View.
5、当屏幕显示区域的第二条Item距离控件顶端的距离大于条目头部View高度时,就执行Alpha动画展示条目头部View.
6、适当的时候需要更新屏幕中第一条显示的Item对应的索引值.
7、为何需要条目头部View执行Alpha动画,当条目头部View更新内容时候,没有Alpha动画会显得非常的生硬.

分析

1、初始化属性

public SuspensionBarRecyclerView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SuspensionBarRecyclerView, defStyleAttr, 0);
    mResSuspensionBar = typedArray.getResourceId(R.styleable.SuspensionBarRecyclerView_sbrv_bar, R.layout.sbrv_default_bar);
    mSuspensionBarHeight = typedArray.getLayoutDimension(R.styleable.SuspensionBarRecyclerView_sbrv_bar_height, ViewGroup.LayoutParams.WRAP_CONTENT);
    typedArray.recycle();
    initView(context);
    setListener();
}

2、创建RecyclerView并添加,将头部View也添加进SuspensionBarRecyclerView

private void initView(Context context) {
    mSuspensionBar = LayoutInflater.from(context).inflate(mResSuspensionBar, null);
    mRecyclerView = new RecyclerView(context);
    mLayoutManager = new LinearLayoutManager(context);
    mRecyclerView.setLayoutManager(mLayoutManager);
    this.addView(mRecyclerView, 0);// 添加RecyclerView
    this.addView(mSuspensionBar, 1);// 添加头部View
}

3、设置RecyclerView的滚动监听,对头部View的操作主要就是这一块的逻辑.

/**
 * 设置RecyclerView的滚动监听
 */
private void setListener() {
    mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
            super.onScrollStateChanged(recyclerView, newState);
            // 获取头部View的高度
            mSuspensionHeight = mSuspensionBar.getHeight();
        }
        @Override
        public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
            super.onScrolled(recyclerView, dx, dy);
            if (mCurrentFirstVisibleIndex != mLayoutManager.findFirstVisibleItemPosition()) {
                // 假如屏幕中显示的第一个条目索引与当前获取到的不一致, 就更新第一条目索引值
                mCurrentFirstVisibleIndex = mLayoutManager.findFirstVisibleItemPosition();
                if (mUpdateSuspensionBarListener != null) {
                    // 然后再更新悬挂条中的数据.
                    mUpdateSuspensionBarListener.updateSuspensionBar(mSuspensionBar, mCurrentFirstVisibleIndex);
                }
            }
            // 找到当前屏幕中显示的第二条目
            View view = mLayoutManager.findViewByPosition(mCurrentFirstVisibleIndex + 1);
            if (view != null) {
                if (view.getTop() <= mSuspensionHeight) {
                    // 当前屏幕中第二Item离控件顶部距离如果小于悬挂条高度.
                    // 则悬挂条随着RecyclerView的滚动移动, 这个悬挂条一直遮挡着Item条目的头.
                    mSuspensionBar.setY(-(mSuspensionHeight - view.getTop()));
                    if (dy < 0) {
                        // 假如手指向下滑动, 刚好新的第一Item从屏幕顶端滑出来时,设置mSuspensionBar为透明.
                        mSuspensionBar.setAlpha(0);
                    }
                    //Log.e(TAG, "正在移动");
                } else {
                    // mSuspensionBar.getY() < 0 保证Alpha动画不会多次执行
                    if (mSuspensionBar.getY() < 0) {
                        // 当前屏幕中第二Item离控件顶部距离如果大于悬挂条高度.
                        // 则悬挂调不需要移动,保持在控件顶部静止不动.
                        mSuspensionBar.setY(0);
                        AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);
                        alphaAnimation.setDuration(1500);
                        mSuspensionBar.startAnimation(alphaAnimation);
                        //Log.e(TAG, "正在执行动画");
                    } else {
                        // 这里是当mSuspensionBar完全展示在屏幕中时候,设置为不透明
                        mSuspensionBar.setAlpha(1);
                        //Log.e(TAG, "mSuspensionBar.getY() > 0");
                    }
                }
            }
            //Log.e(TAG, "dy  " + dy);
        }
    });
}

4、为SuspensionBarRecyclerView设置适配器

/**
 * 设置Adapter
 *
 * @param mAdapter
 */
public void setAdapter(RecyclerView.Adapter mAdapter) {
    mRecyclerView.setAdapter(mAdapter);
    mRecyclerView.setHasFixedSize(true);
    if (mUpdateSuspensionBarListener != null) {
        // 更新悬挂条中的数据
        mUpdateSuspensionBarListener.updateSuspensionBar(mSuspensionBar, mCurrentFirstVisibleIndex);
    }
}

5、设置头部View回调监听

/**
 * 设置悬挂头更新监听
 *
 * @param updateSuspensionBarListener
 */
public void setUpdateSuspensionBarListener(UpdateSuspensionBarListener updateSuspensionBarListener) {
    this.mUpdateSuspensionBarListener = updateSuspensionBarListener;
}
public interface UpdateSuspensionBarListener {
    void updateSuspensionBar(View mSuspensionBar, int mFirstVisibleIndex);
}

效果图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android RecyclerView实现悬浮吸顶、分隔线、到底提示效果

    本文中所有效果通过ItemDecoration实现,通过此实现的可以与业务解耦,让RecyclerView的模板更加简洁,不关心任何辅助性ui,github地址 一.顶部吸附效果图 二.顶部不吸附效果图 三.不满一屏效果 四.核心实现点 1.为什么通过ItemDecoration能够实现,原理? ①通过getItemOffsets()方法获取当前模板view的left.top.right.bottom边距,这些留出的间距用于绘制这些辅助性ui. // RecyclerView的measure c

  • android中RecyclerView悬浮吸顶效果

    MultiType-Adapter打造悬浮吸顶效果 注:当前版本只适合配合RecyclerView快速打造一款 展示UI 悬浮吸顶效果,如 通讯录效果,由于实现机制的原因,暂时不支持触摸事件. MultiType-Adapter介绍地址:MultiType-Adapter 是一款轻量级支持多数据类型的 RecyclerView 适配器; 使用简单,完全解耦; 悬浮吸顶效果 ```groovy // root build.gradle repositories { jcenter() maven

  • Android自定义RecyclerView Item头部悬浮吸顶

    本文实例为大家分享了Android自定义RecyclerView Item头部悬浮吸顶的具体代码,供大家参考,具体内容如下 概述 1.自定义了一个FrameLayout,引入条目的头部布局加入到自定义FrameLayout中. 2.将RecyclerView加入FrameLayout 3.条目头部View的Alpha动画以及设置透明和不透明这个时机大多是通过打log来确定的,硬推理还是有些难. 4.当屏幕显示区域的第二条Item距离控件顶端的距离小于条目头部View高度时,就开始移动条目头部Vi

  • RecyclerVIew实现悬浮吸顶效果

    RecyclerVIew实现悬浮吸顶效果图 这里写图片描述 主页面布局 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height=&

  • Android进阶CoordinatorLayout协调者布局实现吸顶效果

    目录 引言 1 CoordinatorLayout功能介绍 1.1 CoordinatorLayout的依赖交互原理 1.2 CoordinatorLayout的嵌套滑动原理 2 CoordinatorLayout源码分析 2.1 CoordinatorLayout的依赖交互实现 2.2 CoordinatorLayout交互依赖的源码分析 2.3 CoordinatorLayout子控件拦截事件源码分析 2.4 CoordinatorLayout嵌套滑动原理分析 引言 在上一节Android进

  • Android自定义View实现拖动自动吸边效果

    本文实例为大家分享了Android自定义View实现拖动自动吸边的具体代码,供大家参考,具体内容如下 自定义View,一是为了满足设计需求,二是开发者进阶的标志之一.随心所欲就是我等奋斗的目标!!! 效果 实现逻辑 明确需求 1.实现控件跟随手指拖动2.实现控件自动贴边 整理思路 1.既然要实现控件拖动,那么就离不开onTouchEvent()这个方法,需要监听里面的按下和滑动事件.2. 要实现自动贴边,需要监听onTouchEvent()中手指离开屏幕事件.对于贴边的过程,我们用属性动画来解决

  • Android自定义RecyclerView实现不固定刻度的刻度尺

    本文实例为大家分享了自定义RecyclerView实现不固定刻度的刻度尺的具体代码,供大家参考,具体内容如下 ##不均匀刻度效果图 ##等比例刻度效果图 实现功能目前 1.实现类似日期/分类等大小不固定的水平刻度尺效果 2.实现标准刻度尺效果 3.监听RecyclerView滑动时居中条目 4.去掉边缘阴影 定义RecyclerView public class CenterRecyclerView extends RecyclerView { //设置RecyclerView的速度 priva

  • Android 实现当下最流行的吸顶效果

    开始逐渐领略到ItemDecoration的美~ 今天让我 使用 ItemDecoration 来完成 可推动的悬浮导航栏的效果,最终实现的效果如下图: 具体实现步骤如下: 根据我前面的文章所讲的RecyclerView的基本使用,我们先来完成基本的recyclerView: 第一步:布局里写一个RecyclerView 第二步:实例化 recyclerView = (RecyclerView) findViewById(R.id.recyclerView); 第三步:获取所需的数据 (这里我们

  • Android自定义recyclerView实现时光轴效果

    时光轴效果在很多app上都有出现,例如淘宝中快递的跟踪,本文将使用recyclerView实现时光轴效果,我们会到自定义控件,首先先看一下效果图: 接下来是步骤分析 1自定义属性 这个大家应该都了解了,根据我们之前的分析,直接在attrs.xml中进行声明 <declare-styleable name="TimeLine">     <attr name="beginLine" format="reference|color"

  • Android自定义覆盖层控件 悬浮窗控件

    在我们移动应用开发过程中,偶尔有可能会接到这种需求: 1.在手机桌面创建一个窗口,类似于360的悬浮窗口,点击这个窗口可以响应(至于窗口拖动我们可以后面再扩展). 2.自己开发的应用去启动一个非本应用B,在B应用的某个界面增加一个引导窗口. 3.在应用的页面上触发启动这个窗口,该窗口悬浮在这个页面上,但又不会影响界面的其他操作.即不像PopupWindow那样要么窗口消失要么页面不可响应 以上需求都有几个共同特点,1.窗口的承载页面不一定不是本应用页面(Activity),即不是类似dialog

随机推荐