类似京东、淘宝等二级悬停。
参考+实践
一、惯例先上效果图
效果图
二、GitHub
代码地址，欢迎指正https://github.com/MNXP/SlideTop
三、XML布局主要用到的控件
1、PullRefreshLayout (借用这位大神的https://github.com/genius158/PullRefreshLayout)
2、CoordinatorLayout
3、AppBarLayout
四、实现
1、布局的实现
需要注意的几点：
1）AppBarLayout 设置 behavior 需要自己定义，为以后拦截事件用
app:layout_behavior=".weight.MyBehavior"
2）AppBarLayout 第一个子view，就是需要滑动消失的布局，设置
app:layout_scrollFlags="scroll|exitUntilCollapsed"
scroll 滚动，exitUntilCollapsed 可以在置顶后有阴影效果
3）最外层RecyclerView（也可以是各种带滑动的view，也可以是ViewPager实现分页） 设置
app:layout_behavior="@string/appbar_scrolling_view_behavior"
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#ffffff"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="置顶滑动"
android:textColor="@color/black"
android:textSize="20sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentBottom="true"
android:background="#dddddd"/>
</RelativeLayout>
<com.xp.slide.weight.refreshlayout.PullRefreshLayout
android:id="@+id/swipe_refresh_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:prl_pullDownMaxDistance="300dp"
app:prl_twinkEnable="true">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/home_top_view"
android:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
app:layout_behavior=".weight.MyBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="150dp"
android:src="@mipmap/home_c"/>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/top_img_rv"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<RelativeLayout
android:id="@+id/home_tab_container_layout"
android:layout_width="match_parent"
android:layout_height="55dp"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:layout_marginLeft="20dp"
android:textSize="15sp"
android:textColor="#222222"
android:text="悬停标题"/>
<ImageView
android:id="@+id/filter_layout"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="20dp"
android:scaleType="fitXY"
android:src="@mipmap/home_icon" />
</RelativeLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/bottom_img_rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</com.xp.slide.weight.refreshlayout.PullRefreshLayout>
</LinearLayout>
2、首先解决PullRefreshLayout 与 CoordinatorLayout（依靠AppBarLayout来处理）滑动冲突
通过AppBarLayout监听addOnOffsetChangedListener获取CoordinatorLayout是否滑动到顶部，
设置PullRefreshLayout是否可以上拉刷新
// 记录AppBar滚动距离
appBarLayout.addOnOffsetChangedListener(View::setTag);
homeRefreshLayout.setOnTargetScrollCheckListener(new PullRefreshLayout.OnTargetScrollCheckListener() {
@Override
public boolean onScrollUpAbleCheck() {
// 根据AppBar滚动的距离来设置RefreshLayout是否可以下拉刷新
int appbarOffset = ((appBarLayout.getTag() instanceof Integer)) ? (int) appBarLayout.getTag() : 0;
return appbarOffset != 0;
}
@Override
public boolean onScrollDownAbleCheck() {
return true;
}
});
3、启用AppBarLayout滑动（不设置也可以，但有的时候会滑动有问题）
注意📢：要在数据加载之后设置，不然不起作用
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams();
MyBehavior behavior = (MyBehavior) params.getBehavior();
try {
if (behavior!=null){
behavior.setDragCallback(new AppBarLayout.Behavior.DragCallback() {
@Override
public boolean canDrag(@NonNull AppBarLayout appBarLayout) {
isFirstData = true;
//为了启用折叠工具栏的滚动
return true;
}
});
}
} catch (Exception e) {
}
4、自以为很完美了┭┮﹏┭┮，但是遇到一个小问题
问题？
滑动置顶之后，滑动下面的recyclerview，使得recyclerview不是显示第一个item，松开手，
然后向下滑动“悬停标题”，发现可以向下滑动，🤩，是bug的味道。如下图
BUG的味道
下面就开始解决
解决思路就是根据下面的RecyclerView滑动，设置AppBarLayout是否可以滑动，
(1) 设置监听RecyclerView第一个完整item
(2) 根据Position来设置behavior.setCanMove(position<1);
(3) MyBehavior实现是否可以滑动
上代码
// (1)设置监听RecyclerView第一个完整item
bottomRv.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
if (newState == SCROLL_STATE_IDLE) {
if (bottomRv != null && bottomRv.getLayoutManager() instanceof LinearLayoutManager) {
LinearLayoutManager layoutManager = (LinearLayoutManager) bottomRv.getLayoutManager();
if (layoutManager != null) {
// 根据滑动item设置置顶是否可以滑动
int firstCompletelyVisible = layoutManager.findFirstCompletelyVisibleItemPosition();
initAppbar(firstCompletelyVisible);
}
}
}
}
});
//根据Position来设置behavior.setCanMove(position<1);
private boolean isFirstData;
private int oldPosition = -2;
public void initAppbar(int position) {
if (oldPosition == position){
return;
}
oldPosition = position;
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams();
MyBehavior behavior = (MyBehavior) params.getBehavior();
try {
if (behavior!=null){
if (position == -1){
behavior.setDragCallback(new AppBarLayout.Behavior.DragCallback() {
@Override
public boolean canDrag(@NonNull AppBarLayout appBarLayout) {
isFirstData = true;
//为了启用折叠工具栏的滚动
return true;
}
});
}else {
// 置顶后，如果recyclerview不是第一个item，禁止工具栏滑动
behavior.setCanMove(position<1);
}
}
} catch (Exception e) {
}
}
// (3) MyBehavior实现是否可以滑动
@Override
public boolean onInterceptTouchEvent(@NonNull CoordinatorLayout parent, @NonNull AppBarLayout child, @NonNull MotionEvent ev) {
if (!canMove && ev.getAction() == MotionEvent.ACTION_DOWN){
return false;
}
return super.onInterceptTouchEvent(parent, child, ev);
}
public void setCanMove(boolean canMove){
this.canMove = canMove;
}
5、完整代码
Activity代码
public class MainActivity extends AppCompatActivity {
private RecyclerView topRv;
private RecyclerView bottomRv;
private AppBarLayout appBarLayout;
private PullRefreshLayout homeRefreshLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
appBarLayout = findViewById(R.id.app_bar_layout);
homeRefreshLayout = findViewById(R.id.swipe_refresh_layout);
topRv = findViewById(R.id.top_img_rv);
bottomRv = findViewById(R.id.bottom_img_rv);
topRv.setLayoutManager(new LinearLayoutManager(this));
bottomRv.setLayoutManager(new LinearLayoutManager(this));
initView();
initData();
}
private void initView() {
StoreHouseHeader header = new StoreHouseHeader(this);
header.setPadding(0, 20, 0, 20);
header.initWithString("XIANGPAN");
header.setTextColor(0xFF222222);
homeRefreshLayout.setHeaderView(header);
homeRefreshLayout.setOnRefreshListener(new PullRefreshLayout.OnRefreshListenerAdapter() {
@Override
public void onRefresh() {
initData();
checkHandler.sendEmptyMessageDelayed(0,2000);
}
});
// 记录AppBar滚动距离
appBarLayout.addOnOffsetChangedListener(View::setTag);
homeRefreshLayout.setOnTargetScrollCheckListener(new PullRefreshLayout.OnTargetScrollCheckListener() {
@Override
public boolean onScrollUpAbleCheck() {
// 根据AppBar滚动的距离来设置RefreshLayout是否可以下拉刷新
int appbarOffset = ((appBarLayout.getTag() instanceof Integer)) ? (int) appBarLayout.getTag() : 0;
return appbarOffset != 0;
}
@Override
public boolean onScrollDownAbleCheck() {
return true;
}
});
}
private void initData() {
initTop();
initBottom();
if (!isFirstData) {
initAppbar(-1);
}
appBarLayout.setExpanded(true, false);
}
private void initBottom() {
PhotoAdapter bottomAdapter = new PhotoAdapter();
bottomRv.setAdapter(bottomAdapter);
bottomAdapter.setDataList(10);
bottomRv.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
if (newState == SCROLL_STATE_IDLE) {
if (bottomRv != null && bottomRv.getLayoutManager() instanceof LinearLayoutManager) {
LinearLayoutManager layoutManager = (LinearLayoutManager) bottomRv.getLayoutManager();
if (layoutManager != null) {
// 根据滑动item设置置顶是否可以滑动
int firstCompletelyVisible = layoutManager.findFirstCompletelyVisibleItemPosition();
initAppbar(firstCompletelyVisible);
}
}
}
}
});
}
private void initTop() {
PhotoAdapter topAdapter = new PhotoAdapter();
topRv.setAdapter(topAdapter);
topAdapter.setDataList(4);
}
private boolean isFirstData;
private int oldPosition = -2;
public void initAppbar(int position) {
if (oldPosition == position){
return;
}
oldPosition = position;
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBarLayout.getLayoutParams();
MyBehavior behavior = (MyBehavior) params.getBehavior();
try {
if (behavior!=null){
if (position == -1){
behavior.setDragCallback(new AppBarLayout.Behavior.DragCallback() {
@Override
public boolean canDrag(@NonNull AppBarLayout appBarLayout) {
isFirstData = true;
//为了启用折叠工具栏的滚动
return true;
}
});
}else {
// 置顶后，如果recyclerview不是第一个item，禁止工具栏滑动
behavior.setCanMove(position<1);
}
}
} catch (Exception e) {
}
}
public Handler checkHandler = new Handler(Looper.getMainLooper()) {
@Override
public void handleMessage(@NonNull Message msg) {
super.handleMessage(msg);
//模拟网络请求结束，去除刷新效果
if (homeRefreshLayout != null) {
homeRefreshLayout.refreshComplete();
}
}
};
}
MyBehavior代码
public class MyBehavior extends AppBarLayout.Behavior {
private boolean canMove = true;
public MyBehavior() {
}
public MyBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
public boolean onInterceptTouchEvent(@NonNull CoordinatorLayout parent, @NonNull AppBarLayout child, @NonNull MotionEvent ev) {
if (!canMove && ev.getAction() == MotionEvent.ACTION_DOWN){
return false;
}
return super.onInterceptTouchEvent(parent, child, ev);
}
public void setCanMove(boolean canMove){
this.canMove = canMove;
}
public boolean isCanMove() {
return canMove;
}
}
以上就是全部内容，待完善，以后会更新。如有建议和意见，请及时沟通。
