前面两篇对Material Design的基本控件做了介绍，但是那些相对来说都是比较孤立的，而且我们知道实践才是硬道理，所以，今天我们就利用前面学习到了简单的实现一个比较炫酷的效果，废话不多说，直接上效果图。
滚动悬停.gif
这个效果如果在不知道Material Design之前，可能实现起来会很麻烦，至少对于我来说会一时间感觉无从下手，很多人会说，可以使用事件分发来实现，但是看到这个效果我觉得光想想里面到底要触发多少事件头就大了，但是如果我们使用Material Design来实现的话不仅速度快，而且代码量很少，下面我们一起来看看吧。
效果分析
1.有一个下拉刷新的功能
2.书籍、乌托邦、播客是可以滑动切换的
3.上面背景图滑动到看不见的时候我的字眼会出来，而且整个View的背景会变成纯白
4.继续向上滑动最近、收藏、下载、订阅会悬停，而且将滑动事件交给底部的控件执行
5.向下滑动的时候会慢慢复原到之前的状态
大致分析后基本的效果就是这些，下面我们一个一个来实现
功能一：实现下拉刷新的功能
实现这个功能非常简单，利用系统提供的SwipeRefreshLayout就可以了，但是需要注意的是，在使用SwipeRefreshLayout的过程中，特别是在滑动的过程中，如果子View里面包含了AppBarLayout会产生滑动冲突，因为两者都支持滑动；同时需要注意的是如果子View里面包含了ViewPager，你在滑动的过程中同样会产生滑动冲突，因为系统会无法判断事件交给谁处理，针对这两个滑动冲突，解决的办法为：
AppBarLayout与SwipeRefreshLayout刷新滑动冲突解决
appbarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, final int verticalOffset) {
mSwipeRefreshLayout.setEnabled(verticalOffset >= 0);//页面滑动到顶部，才可以下拉刷新
}
});
ViewPager与SwipeRefreshLayout刷新滑动冲突解决
在SwipeRefreshLayout处理事件的监听
/**
* author: zhoufan
* data: 2021/4/28 17:34
* content: 解决ViewPager与SwipeRefreshLayout的滑动冲突
*/
public class VpSwipeRefreshLayout extends SwipeRefreshLayout {
private float startY;
private float startX;
// 记录viewPager是否拖拽的标记
private boolean mIsVpDragger;
private final int mTouchSlop;
public VpSwipeRefreshLayout(Context context, AttributeSet attrs) {
super(context, attrs);
mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
// 记录手指按下的位置
startY = ev.getY();
startX = ev.getX();
// 初始化标记
mIsVpDragger = false;
break;
case MotionEvent.ACTION_MOVE:
// 如果viewpager正在拖拽中，那么不拦截它的事件，直接return false；
if(mIsVpDragger) {
return false;
}
// 获取当前手指位置
float endY = ev.getY();
float endX = ev.getX();
float distanceX = Math.abs(endX - startX);
float distanceY = Math.abs(endY - startY);
// 如果X轴位移大于Y轴位移，那么将事件交给viewPager处理。
if(distanceX > mTouchSlop && distanceX > distanceY) {
mIsVpDragger = true;
return false;
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
// 初始化标记
mIsVpDragger = false;
break;
}
// 如果是Y轴位移大于X轴，事件交给swipeRefreshLayout处理。
return super.onInterceptTouchEvent(ev);
}
}
功能二：书籍、乌托邦、播客是可以滑动切换的
滑动切换也是比较简单的，我们可以利用TabLayout+ViewPager来实现，具体的实现方式为:
定义布局：
<com.flyco.tablayout.SlidingTabLayout
android:id="@+id/mine_tab"
android:layout_width="wrap_content"
android:layout_height="@dimen/dp22"
app:tl_indicator_color="@color/colorE6B536"
app:tl_indicator_height="@dimen/dp2"
app:tl_indicator_width="@dimen/dp18"
app:tl_indicator_width_equal_title="true"
app:tl_tab_space_equal="false"
app:tl_textSelectColor="@color/color_book_media_default"
app:tl_textUnselectColor="@color/color_book_media_default"
app:tl_textsize="@dimen/dp13" />
<androidx.viewpager.widget.ViewPager
android:id="@+id/mine_view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
代码实现：
String[] mTabList = new String[]{getString(R.string.book), getString(R.string.utopia), getString(R.string.podcast)};
ArrayList<Fragment> mTabFragmentList = new ArrayList<>();
mMineBookFragment = new MineBookFragment();
mMinePodCastFragment = new MinePodCastFragment();
mMineUtopiaFragment = new MineUtopiaFragment();
mTabFragmentList.add(mMineBookFragment);
mTabFragmentList.add(mMineUtopiaFragment);
mTabFragmentList.add(mMinePodCastFragment);
mAdapter = new DynamicFragmentAdapter(getChildFragmentManager(), mTabFragmentList, mTabList);
mMineViewPager.setAdapter(mAdapter);
mMineTab.setViewPager(mMineViewPager);
mMineViewPager.setOffscreenPageLimit(3);
功能三：上面背景图滑动到看不见的时候 我的 字眼会出来，而且整个View的背景会变成纯白。
我的 字眼的出现是由于手指在屏幕上面不断向上滑动，将背景图移出了整个屏幕，所以对于这种嵌套滑动而言，上面的那一部分一定是被AppBarLayout包裹的内容，所以我们只需要监听AppBarLayout的滑动事件就可以了
appBarLayout.addOnOffsetChangedListener((appBarLayout, verticalOffset) -> {
// 解决AppBarLayout与SwipeRefreshLayout滑动冲突
mSwipeRefreshLayout.setEnabled(verticalOffset >= 0);
// 判断appBarLayout被滑动的距离是否超过appBarLayout总高度的一半
if (-verticalOffset >= appBarLayout.getTotalScrollRange() / 2) {
// 修改Toolbar的背景颜色
toolbar.setBackgroundColor(getResources().getColor(R.color.windowBackground));
// 设置 我的 透明度从而实现 我的 显示与隐藏
mTypeMine.setAlpha(1);
} else {
toolbar.setBackgroundColor(getResources().getColor(R.color.transparent));
mTypeMine.setAlpha(0);
}
});
功能四：继续向上滑动最近、收藏、下载、订阅会悬停，而且将滑动事件交给底部的控件执行
要实现上下滚动的嵌套配合，则需要使用到CoordinatorLayout控件，从前面两篇的分析可知，要实现这种滚动效果，我们的布局文件应该对应的结构是这样的
<VpSwipeRefershLayout>
<CoordinatorLayout>
<AppBarLayout>
<CollapsingToolbarLayout>
<RelativeLayout>
// 设置整个背景图
</RelativeLayout>
<Toolbar>
// 设置Toolbar(我的、以及右边设置等3个图标)
</Toolbar>
</CollapsingToolbarLayout>
<LinearLayout>
// 设置最近、收藏、下载、订阅
</LinearLayout>
<RelativeLayout>
<SlidingTabLayout/>
</RelativeLayout>
</AppBarLayout>
<RelativeLayout>
<ViewPager/>
<RecyclerView/>
</RelativeLayout>
</CoordinatorLayout>
</VpSwipeRefershLayout>
整个结构虽然看起来像是挺复杂的，但是其实如果你仔细分析一下就会发现还是挺好懂的，基于上述的结构就可以实现滑动嵌套的效果啦，当然，向下滑动的时候也会慢慢呈现出初始的状态，最后看下整个XML的布局的效果。
<RelativeLayout 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">
<com.stkj.wormhole.widget.VpSwipeRefreshLayout
android:id="@+id/mine_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
app:elevation="0dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/mine_back_ground"
android:layout_width="match_parent"
android:layout_height="@dimen/dp210"
android:scaleType="centerCrop" />
<ImageView
android:layout_width="match_parent"
android:layout_height="@dimen/dp210"
android:scaleType="centerCrop"
android:src="@mipmap/mine_shadow_default" />
<ImageView
android:layout_width="match_parent"
android:layout_height="@dimen/dp80"
android:layout_alignBottom="@+id/mine_back_ground"
android:scaleType="centerCrop"
android:src="@mipmap/mine_cut" />
<RelativeLayout
android:id="@+id/mine_user_icon_layout"
android:layout_width="@dimen/dp72"
android:layout_height="@dimen/dp72"
android:layout_marginLeft="@dimen/dp20"
android:layout_marginTop="@dimen/dp160"
android:background="@drawable/mine_head">
<com.stkj.baselibrary.commonitem.RoundImageView
android:id="@+id/mine_user_icon"
android:layout_width="@dimen/dp70"
android:layout_height="@dimen/dp70"
android:layout_centerInParent="true"
android:scaleType="centerCrop" />
</RelativeLayout>
<TextView
android:id="@+id/mine_user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="@dimen/dp180"
android:layout_marginRight="@dimen/dp20"
android:textColor="@color/color333333"
android:textSize="@dimen/dp18" />
<TextView
android:id="@+id/mine_user_des"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/mine_user_name"
android:layout_alignParentRight="true"
android:layout_marginTop="@dimen/dp5"
android:layout_marginRight="@dimen/dp20"
android:textColor="@color/color999999"
android:textSize="@dimen/dp12" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="@dimen/dp57"
android:layout_below="@+id/mine_user_icon_layout"
android:layout_marginLeft="@dimen/dp20"
android:layout_marginTop="@dimen/dp25"
android:layout_marginRight="@dimen/dp20"
android:layout_marginBottom="@dimen/dp15"
android:background="@mipmap/mine_listen">
<TextView
android:id="@+id/mine_user_listen_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="@dimen/dp22"
android:text="@string/listen_time"
android:textColor="@color/mine_listen_time"
android:textSize="11sp" />
<TextView
android:id="@+id/mine_user_listen_time_hour_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/dp20"
android:textColor="@color/mine_time"
android:textSize="@dimen/dp20"
android:textStyle="bold" />
<TextView
android:id="@+id/mine_user_listen_time_hour"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/dp25"
android:layout_toRightOf="@+id/mine_user_listen_time_hour_value"
android:text="@string/hour"
android:textColor="@color/mine_time_value"
android:textSize="@dimen/dp12" />
<TextView
android:id="@+id/mine_user_listen_time_second_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/dp25"
android:layout_toRightOf="@+id/mine_user_listen_time_hour"
android:textColor="@color/mine_time"
android:textSize="@dimen/dp20"
android:textStyle="bold" />
<TextView
android:id="@+id/mine_user_listen_time_second"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/dp25"
android:layout_toRightOf="@+id/mine_user_listen_time_second_value"
android:text="@string/second"
android:textColor="@color/mine_time_value"
android:textSize="@dimen/dp12" />
</RelativeLayout>
</RelativeLayout>
<androidx.appcompat.widget.Toolbar
android:id="@+id/mine_toolbar"
android:layout_width="match_parent"
android:layout_height="@dimen/dp84"
android:background="@android:color/transparent"
android:paddingTop="@dimen/dp20"
app:layout_collapseMode="pin"
app:popupTheme="@style/AppTheme.ToolbarPopupOverlay">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="@dimen/dp64">
<TextView
android:id="@+id/type_mine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerVertical="true"
android:layout_marginBottom="@dimen/dp10"
android:text="@string/mine"
android:textColor="@color/color333333"
android:textSize="@dimen/dp23" />
<RelativeLayout
android:id="@+id/mine_setting"
android:layout_width="@dimen/dp40"
android:layout_height="@dimen/dp40"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="@dimen/dp10">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:src="@mipmap/mine_setting" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/mine_mode"
android:layout_width="@dimen/dp40"
android:layout_height="@dimen/dp40"
android:layout_alignParentBottom="true"
android:layout_toLeftOf="@+id/mine_setting">
<ImageView
android:id="@+id/mine_mode_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:src="@mipmap/mine_mode" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/mine_attention"
android:layout_width="@dimen/dp50"
android:layout_height="@dimen/dp40"
android:layout_alignParentBottom="true"
android:layout_toLeftOf="@+id/mine_mode">
<ImageView
android:id="@+id/mine_attention_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:src="@mipmap/mine_attention" />
<TextView
android:id="@+id/mine_attention_num"
android:layout_width="@dimen/dp13"
android:layout_height="@dimen/dp13"
android:gravity="center"
android:layout_toRightOf="@+id/mine_attention_image"
android:layout_marginLeft="-8dp"
android:layout_marginTop="@dimen/dp8"
android:textSize="@dimen/dp8"
android:visibility="invisible"
android:textColor="@color/colorMFFFFF"
android:background="@drawable/notification_red_oval"/>
</RelativeLayout>
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="@dimen/dp44"
android:layout_marginLeft="@dimen/dp16"
android:layout_marginRight="@dimen/dp16"
android:orientation="horizontal"
app:layout_scrollFlags="scroll">
<TextView
android:id="@+id/mine_recent"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="left|center_vertical"
android:text="@string/recent"
android:textSize="@dimen/dp15" />
<TextView
android:id="@+id/mine_collect"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="left|center_vertical"
android:paddingLeft="@dimen/dp20"
android:text="@string/collect"
android:textSize="@dimen/dp15" />
<TextView
android:id="@+id/mine_download"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="right|center_vertical"
android:paddingRight="@dimen/dp20"
android:text="@string/download"
android:textSize="@dimen/dp15" />
<TextView
android:id="@+id/mine_subscription"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="right|center_vertical"
android:text="@string/subscription"
android:textSize="@dimen/dp15" />
</LinearLayout>
<RelativeLayout
android:id="@+id/mine_no_subscribe"
android:layout_width="match_parent"
android:layout_height="@dimen/dp22"
android:layout_marginBottom="@dimen/dp10">
<com.flyco.tablayout.SlidingTabLayout
android:id="@+id/mine_tab"
android:layout_width="wrap_content"
android:layout_height="@dimen/dp22"
app:tl_indicator_color="@color/colorE6B536"
app:tl_indicator_height="@dimen/dp2"
app:tl_indicator_width="@dimen/dp18"
app:tl_indicator_width_equal_title="true"
app:tl_tab_space_equal="false"
app:tl_textSelectColor="@color/color_book_media_default"
app:tl_textUnselectColor="@color/color_book_media_default"
app:tl_textsize="@dimen/dp13" />
<TextView
android:id="@+id/mine_manager"
android:layout_width="@dimen/dp40"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_marginRight="@dimen/dp8"
android:gravity="center"
android:text="@string/manager"
android:textColor="@color/color_book_media_default"
android:textSize="@dimen/dp13" />
</RelativeLayout>
</com.google.android.material.appbar.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorEEEEEE"
android:scrollbars="none"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<androidx.viewpager.widget.ViewPager
android:id="@+id/mine_view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<com.stkj.baselibrary.commonrefresh.widget.PullToLoadMoreGridViewRecyclerView
android:id="@+id/subscribe_recycler"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/dp20"
android:layout_marginBottom="@dimen/dp20"
android:visibility="gone"/>
</RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</com.stkj.wormhole.widget.VpSwipeRefreshLayout>
<LinearLayout
android:id="@+id/mine_delete"
android:layout_width="match_parent"
android:layout_height="@dimen/dp45"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:visibility="gone">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="275"
android:background="@color/collect_bottom">
<CheckBox
android:id="@+id/mine_delete_all_choose"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/dp20"
android:layout_marginRight="@dimen/dp10"
android:background="@drawable/my_collect_choose"
android:button="@null" />
<TextView
android:id="@+id/mine_delete_all_choose_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="@+id/mine_delete_all_choose"
android:text="@string/all_choose"
android:textColor="@color/color333333"
android:textSize="@dimen/dp14" />
<TextView
android:id="@+id/mine_delete_choose_num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/dp20"
android:layout_toRightOf="@+id/mine_delete_all_choose_text"
android:textColor="@color/colorM99999"
android:textSize="@dimen/dp14" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/mine_delete_cancel"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="100"
android:background="@color/color65DC7E">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/delete"
android:textColor="@color/colorMFFFFF"
android:textSize="@dimen/dp14" />
</RelativeLayout>
</LinearLayout>
<com.stkj.wormhole.view.MyImageView
android:id="@+id/mine_top"
android:layout_width="@dimen/dp50"
android:layout_height="@dimen/dp50"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="@dimen/dp30"
android:layout_marginBottom="@dimen/dp50"
android:src="@mipmap/main_top"
android:visibility="gone" />
</RelativeLayout>
代码实现
基于上面的XML布局文件，其实需要我们硬编码的就不是很多了
第一步：实现书籍、乌托邦、播客的滑动切换
String[] mTabList = new String[]{getString(R.string.book), getString(R.string.utopia), getString(R.string.podcast)};
ArrayList<Fragment> mTabFragmentList = new ArrayList<>();
mMineBookFragment = new MineBookFragment();
mMinePodCastFragment = new MinePodCastFragment();
mMineUtopiaFragment = new MineUtopiaFragment();
mTabFragmentList.add(mMineBookFragment);
mTabFragmentList.add(mMineUtopiaFragment);
mTabFragmentList.add(mMinePodCastFragment);
mAdapter = new DynamicFragmentAdapter(getChildFragmentManager(), mTabFragmentList, mTabList);
mMineViewPager.setAdapter(mAdapter);
mMineTab.setViewPager(mMineViewPager);
mMineViewPager.setOffscreenPageLimit(3);
第二步：实现AppBarLayout的滑动监听和SwipeRefreshLayout的监听
appBarLayout.addOnOffsetChangedListener((appBarLayout, verticalOffset) -> {
mSwipeRefreshLayout.setEnabled(verticalOffset >= 0);
if (-verticalOffset >= appBarLayout.getTotalScrollRange() / 2) {
toolbar.setBackgroundColor(getResources().getColor(R.color.windowBackground));
mTypeMine.setAlpha(1);
} else {
toolbar.setBackgroundColor(getResources().getColor(R.color.transparent));
mTypeMine.setAlpha(0);
}
});
mSwipeRefreshLayout.setColorSchemeResources(R.color.colorE6B536);
mSwipeRefreshLayout.setOnRefreshListener(() -> requestData());
网友评论