一敛瓷、實際開發(fā)效果圖
默認效果
頁面默認效果.jpg
滾動后的效果
滾動后的效果.jpg
二、效果實現(xiàn)方式
- CoordinatorLayout + AppBarLayout + RecyclerView
(適用于簡單的懸浮View不超過一屏的情況斑匪，頭部固定，數(shù)據(jù)簡單) - FrameLayout + RecyclerView
(適用于復雜的多條目布局锋勺，且懸浮條目位置受后臺數(shù)據(jù)的影響而生改變)
建議：能用1的情況蚀瘸，盡量不用2
針對方式1的實現(xiàn)，自己去百度庶橱。下面主要講的是方式2的實現(xiàn)
三贮勃、實現(xiàn)效果分析
基本布局.png
實現(xiàn)思路：將要懸浮的條目創(chuàng)建一個新的，添加到FrameLayout里面苏章，當RecyclerView滾動超過條目位置的時候顯示出來寂嘉。
四奏瞬、創(chuàng)建懸浮View需要的的條件：
- 要知道條目的位置。
- 要知道條目的類型泉孩。
/**
* 接口定義
*/
public interface IStick {
/**
* 懸浮的位置
*/
int getStickPosition();
/**
* 懸浮的類型
*/
int getStickViewType();
}
五硼端、FrameLayout + RecyclerView實現(xiàn)代碼
/**
* 懸浮布局封裝
*/
public class StickFrameLayout extends FrameLayout {
private RecyclerView mRecyclerView;
// 懸浮根布局
private FrameLayout mStickyLayout;
// 要懸浮的布局
private View mStickView;
// 偏移量
private int mOffset = 0;
public StickFrameLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public StickFrameLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
/**
* 1. 加載布局完成之后
*/
@Override
protected void onFinishInflate() {
super.onFinishInflate();
// 添加滾動監(jiān)聽
addOnScrollListener();
// 添加懸浮根布局
addStickyLayout();
}
/**
* 添加滾動監(jiān)聽
*/
private void addOnScrollListener() {
mRecyclerView = (RecyclerView) getChildAt(0);
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
StickFrameLayout.this.onScrolled();
}
});
}
/**
* 滾動監(jiān)聽事件處理
*/
private void onScrolled() {
RecyclerView.Adapter adapter = mRecyclerView.getAdapter();
RecyclerView.LayoutManager layoutManager = mRecyclerView.getLayoutManager();
if (adapter == null || layoutManager == null || adapter.getItemCount() <= 0) {
return;
}
// 判斷是不是實現(xiàn)了懸浮
if (adapter instanceof IStick) {
IStick stick = (IStick) adapter;
int stickPosition = stick.getStickPosition();
if (mStickView == null) {
// 根據(jù)類型創(chuàng)建ViewHolder
mStickyLayout.setTag(R.id.view_position, stickPosition);
RecyclerView.ViewHolder viewHolder = adapter.onCreateViewHolder(mStickyLayout, stick.getStickViewType());
// 根據(jù)位置綁定View
adapter.onBindViewHolder(viewHolder, stickPosition);
mStickView = viewHolder.itemView;
mStickyLayout.addView(mStickView);
}
//這是是處理第一次打開時，吸頂布局已經(jīng)添加到StickyLayout寓搬，但StickyLayout的高依然為0的情況珍昨。
if (mStickyLayout.getChildCount() > 0 && mStickyLayout.getHeight() == 0) {
mStickyLayout.requestLayout();
}
//設置StickyLayout顯示或者隱藏。
int firstVisibleItemPosition = findFirstVisibleItemPosition(mRecyclerView);
View topView = layoutManager.findViewByPosition(stickPosition);
// 1. 判斷要不要偏移
changeOffset(mOffset);
// 2. 大于懸浮的位置都顯示
if (firstVisibleItemPosition >= stickPosition) {
mStickyLayout.setVisibility(View.VISIBLE);
} else if (topView != null) {
// 3. 偏移大于懸浮到頂部的距離就顯示
boolean isShow = mOffset >= topView.getTop();
if (isShow) {
mStickyLayout.setVisibility(View.VISIBLE);
} else {
mStickyLayout.setVisibility(View.GONE);
}
} else {
mStickyLayout.setVisibility(View.GONE);
}
}
}
/**
* 手動設置顯示
*
* @param visible
*/
public void setStickyVisibility(int visible) {
if (mStickyLayout != null) {
mStickyLayout.setVisibility(visible);
}
}
/**
* 找第一個可見條目的位置
*/
private int findFirstVisibleItemPosition(RecyclerView recyclerView) {
int firstVisibleItem = -1;
RecyclerView.LayoutManager layout = recyclerView.getLayoutManager();
if (layout != null) {
if (layout instanceof GridLayoutManager) {
firstVisibleItem = ((GridLayoutManager) layout).findFirstVisibleItemPosition();
} else if (layout instanceof LinearLayoutManager) {
firstVisibleItem = ((LinearLayoutManager) layout).findFirstVisibleItemPosition();
} else if (layout instanceof StaggeredGridLayoutManager) {
int[] firstPositions = new int[((StaggeredGridLayoutManager) layout).getSpanCount()];
((StaggeredGridLayoutManager) layout).findFirstVisibleItemPositions(firstPositions);
firstVisibleItem = getMin(firstPositions);
}
}
return firstVisibleItem;
}
private int getMin(int[] arr) {
int min = arr[0];
for (int x = 1; x < arr.length; x++) {
if (arr[x] < min)
min = arr[x];
}
return min;
}
/**
* 添加懸浮根布局
*/
private void addStickyLayout() {
mStickyLayout = new FrameLayout(getContext());
LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT);
mStickyLayout.setLayoutParams(lp);
super.addView(mStickyLayout, lp);
}
/**
* 設置偏移量
*/
public void setStickOffset(int offset) {
changeOffset(offset);
}
/**
* 改變偏移量
*/
private void changeOffset(int offset) {
if (mOffset != offset) {
if (mStickyLayout != null) {
mOffset = offset;
LayoutParams lp = (LayoutParams) mStickyLayout.getLayoutParams();
lp.topMargin = offset;
mStickyLayout.setLayoutParams(lp);
}
}
}
@Override
protected int computeVerticalScrollOffset() {
if (mRecyclerView != null) {
try {
Method method = View.class.getDeclaredMethod("computeVerticalScrollOffset");
method.setAccessible(true);
return (int) method.invoke(mRecyclerView);
} catch (Exception e) {
e.printStackTrace();
}
}
return super.computeVerticalScrollOffset();
}
@Override
protected int computeVerticalScrollRange() {
if (mRecyclerView != null) {
try {
Method method = View.class.getDeclaredMethod("computeVerticalScrollRange");
method.setAccessible(true);
return (int) method.invoke(mRecyclerView);
} catch (Exception e) {
e.printStackTrace();
}
}
return super.computeVerticalScrollRange();
}
@Override
protected int computeVerticalScrollExtent() {
if (mRecyclerView != null) {
try {
Method method = View.class.getDeclaredMethod("computeVerticalScrollExtent");
method.setAccessible(true);
return (int) method.invoke(mRecyclerView);
} catch (Exception e) {
e.printStackTrace();
}
}
return super.computeVerticalScrollExtent();
}
@Override
public void scrollBy(int x, int y) {
if (mRecyclerView != null) {
mRecyclerView.scrollBy(x, y);
} else {
super.scrollBy(x, y);
}
}
@Override
public void scrollTo(int x, int y) {
if (mRecyclerView != null) {
mRecyclerView.scrollTo(x, y);
} else {
super.scrollTo(x, y);
}
}
}
- 核心代碼是滾動的處理句喷，onScrolled()方法镣典。
- 用ViewHolder創(chuàng)建懸浮的View，給懸浮條目的Parent打個位置的Tag唾琼，就能知道要創(chuàng)建哪個位置的條目兄春。
- 提供一些常用的方法，如頂部位置的偏移锡溯。
adapter關鍵代碼
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
// 如果是多條目赶舆，viewType就是布局ID
View view;
if (mSupport != null) {
Object tagPosition = parent.getTag(R.id.view_position);
int layoutId = mSupport.getLayoutId(mData.get(mPosition));
// 如果是滾動布局
if (tagPosition != null) {
int position = (int) tagPosition;
layoutId = mSupport.getLayoutId(mData.get(position));
}
view = LayoutInflater.from(mContext).inflate(layoutId, parent, false);
} else {
view = LayoutInflater.from(mContext).inflate(mLayoutId, parent, false);
}
QuickViewHolder holder = new QuickViewHolder(view);
return holder;
}
注意： adapter關鍵代碼是在我自己項目通用適配器添加的，你們根據(jù)自己項目的適配器添加趾唱。
六涌乳、總結
- 實際開發(fā)有一些業(yè)務細節(jié)要自己處理。
- Android通用的Adapter
- 測試源碼地址：https://github.com/wenkency/CommAdapter
