【MyAndroid】RecyclerView实现头部悬浮吸顶效果且可点击--100个经典UI设计模板(96_100)

212 阅读3分钟

效果图如下: 在这里插入图片描述

代码大体结构 RecyclerView LinearLayoutManager RecyclerView.Adapter

自定义 StickyHeadContainer OnStickyChangeListener StickyItemDecoration

布局如下:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    android:id="@+id/content_main"
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">
    <android.support.constraint.Guideline
        android:id="@+id/gl_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="20dp" />
    <!--返回-->
    <ImageView
        android:layout_marginTop="33dp"
        android:id="@+id/iv_return"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="TODO"
        android:src="@color/black_22"
        app:layout_constraintStart_toStartOf="@id/gl_start"
        app:layout_constraintTop_toTopOf="parent" />
    <View
        android:id="@+id/view_divider"
        app:layout_constraintTop_toBottomOf="@id/iv_return"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:background="#F4F4F4"
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:layout_marginTop="11dp"
        ></View>
    <View
        android:id="@+id/view_bg_list"
        app:layout_constraintTop_toBottomOf="@id/view_divider"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="#FFF4F4F4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="12dp"
        ></View>
    <android.support.v7.widget.RecyclerView
        app:layout_constraintTop_toTopOf="@id/view_bg_list"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"

        android:id="@+id/recycler_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        tools:background="@color/colorAccent">

    </android.support.v7.widget.RecyclerView>

    <top.lc951.myandroid.recelerview.StickyHeadContainer
        app:layout_constraintTop_toTopOf="@id/view_bg_list"
        app:layout_constraintStart_toStartOf="parent"
        android:id="@+id/shc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

    </top.lc951.myandroid.recelerview.StickyHeadContainer>

</android.support.constraint.ConstraintLayout>

顶部可滚动核心代码如下

StickyHeadContainer

。。。
public void scrollChild(int offset) {
        if (mLastOffset != offset) {
            mOffset = offset;
            ViewCompat.offsetTopAndBottom(getChildAt(0), mOffset - mLastOffset);
        }
        mLastOffset = mOffset;
    }

    public int getChildHeight() {
        return getChildAt(0).getHeight();
    }

    public void onDataChange(int stickyHeadPosition) {
        if (mDataCallback != null && mLastStickyHeadPosition != stickyHeadPosition) {
            mDataCallback.onDataChange(stickyHeadPosition);
        }
        if (null == mDataCallback) {
            Log.w(TAG, "mDataCallback is null");
        }
        mLastStickyHeadPosition = stickyHeadPosition;
    }
    。。。

使用

StockActivity#initView()

。。。
final StickyHeadContainer container = (StickyHeadContainer) findViewById(R.id.shc);
        final TextView tvStockName = (TextView) container.findViewById(R.id.tv_stock_name);
        final CheckBox checkBox = (CheckBox) container.findViewById(R.id.checkbox);
        final TextView tvMore = (TextView) container.findViewById(R.id.tv_stock_more);
        final ImageView more = (ImageView) container.findViewById(R.id.iv_more);

        checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                。。。
            }
        });
        container.setDataCallback(new StickyHeadContainer.DataCallback() {
            @Override
            public void onDataChange(int pos) {
                mStickyPosition = pos;
                StockEntity.StockInfo item = mAdapter.getData().get(pos).getData();
                tvStockName.setText(item.stickyHeadName);
                checkBox.setChecked(item.check);
            }
        });
        more.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                。。。
            }
        });
        container.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
              。。。
            }
        });

        mRecyclerView =  findViewById(R.id.recycler_view);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(StockActivity.this, LinearLayoutManager.VERTICAL, false));
        StickyItemDecoration stickyItemDecoration = new StickyItemDecoration(container, RecyclerViewAdapter.TYPE_STICKY_HEAD);
        stickyItemDecoration.setOnStickyChangeListener(new OnStickyChangeListener() {
            @Override
            public void onScrollable(int offset) {
                container.scrollChild(offset);
                container.setVisibility(View.VISIBLE);
            }

            @Override
            public void onInVisible() {
                container.reset();
                container.setVisibility(View.INVISIBLE);
            }
        });
        mRecyclerView.addItemDecoration(stickyItemDecoration);
        mRecyclerView.addItemDecoration(new SpaceItemDecoration(mRecyclerView.getContext()));

        mAdapter = new StockAdapter(null);
        mAdapter.setItemClickListener(new OnItemClickListener<StockEntity.StockInfo>() {
            @Override
            public void onItemClick(View view, StockEntity.StockInfo data, int position) {
                if(data.getItemType() == RecyclerViewAdapter.TYPE_DATA) {
                    Toast.makeText(StockActivity.this, "点击了TYPE_DATA Item", Toast.LENGTH_SHORT).show();
                }else if(data.getItemType() == RecyclerViewAdapter.TYPE_STICKY_HEAD){
                    Toast.makeText(StockActivity.this, "点击了TYPE_STICKY_HEAD Item", Toast.LENGTH_SHORT).show();
                }
            }
        });
        。。。

RecyclerViewAdapter

。。。

    @Override
    public void onAttachedToRecyclerView(RecyclerView recyclerView) {
        FullSpanUtil.onAttachedToRecyclerView(recyclerView, this, TYPE_STICKY_HEAD);
    }

    @Override
    public void onViewAttachedToWindow(RecyclerViewHolder holder) {
        FullSpanUtil.onViewAttachedToWindow(holder, this, TYPE_STICKY_HEAD);
    }
。。。

(亲测)如果不设置 mDataCallback 则不显示头部悬浮吸顶

一定要进行下面的初始化设置

container.setDataCallback(new StickyHeadContainer.DataCallback() {
            @Override
            public void onDataChange(int pos) {
                mStickyPosition = pos;
                StockEntity.StockInfo item = mAdapter.getData().get(pos).getData();
                tvStockName.setText(item.stickyHeadName);
                checkBox.setChecked(item.check);
            }
        });

原因如下: StickyHeadContainer# onDataChange(int stickyHeadPosition)

public void onDataChange(int stickyHeadPosition) {
        if (mDataCallback != null && mLastStickyHeadPosition != stickyHeadPosition) {
            mDataCallback.onDataChange(stickyHeadPosition);
        }
        if (null == mDataCallback) {
            Log.w(TAG, "mDataCallback is null");
        }
        mLastStickyHeadPosition = stickyHeadPosition;
    }

公开源码不渣

gitee.com/lc951/my-an… 粘性头部可点击

参考

github.com/Mcflag/Expa…

-------------------------------------------------------------------------------100个经典UI设计模板

好用的Api工具推荐

历时一年半多开发终于smartApi-v1.0.0版本在2023-09-15晚十点正式上线 smartApi是一款对标国外的postman的api调试开发工具,由于开发人力就作者一个所以人力有限,因此v1.0.0版本功能进行精简,大功能项有:

  • api参数填写
  • api请求响应数据展示
  • PDF形式的分享文档
  • Mock本地化解决方案
  • api列表数据本地化处理
  • 再加上UI方面的打磨

本地运行,性能优越,高效,快捷

下面是一段smartApi使用介绍: 在这里插入图片描述

下载地址

pan.baidu.com/s/1WGaIDYQv…