【MyAndroid】RecyclerView实现头部悬浮吸顶效果且可点击--100个经典UI设计模板(96/100)
效果图如下：
代码大体结构
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;
}
公开源码不渣
https://gitee.com/lc951/my-android
粘性头部可点击
参考
https://github.com/Mcflag/ExpandStickyRecyclerVIew
-------------------------------------------------------------------------------100个经典UI设计模板
自研产品推荐
历时一年半多开发终于smartApi-v1.0.0版本在2023-09-15晚十点正式上线
smartApi是一款对标国外的postman的api调试开发工具，由于开发人力就作者一个所以人力有限，因此v1.0.0版本功能进行精简，大功能项有：
- api参数填写
- api请求响应数据展示
- PDF形式的分享文档
- Mock本地化解决方案
- api列表数据本地化处理
- 再加上UI方面的打磨
为了更好服务大家把之前的公众号和软件激活结合，如有疑问请大家反馈到公众号即可，下个版本30%以上的更新会来自公众号的反馈。
嗯！先解释不上服务端原因，API调试工具的绝大多数时候就是一个数据模型、数据处理、数据模型理解共识的问题解决工具，所以作者结合自己十多年开发使用的一些痛点来打造的，再加上服务端开发一般是面向企业的，作者目前没有精力和时间去打造企业服务。再加上没有资金投入所以服务端开发会滞后，至于什么时候会进行开发，这个要看募资情况和用户反馈综合考虑。虽然目前国内有些比较知名的api工具了，但作者使用后还是觉得和实际使用场景不符。如果有相关吐槽也可以在作者的公众号里反馈蛤！
下面是一段smartApi使用介绍：
