源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Material Design系列之Behavior实现Android知乎首页

  • 时间:2021-03-14 11:02 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Material Design系列之Behavior实现Android知乎首页
本博客目的:仿知乎首页向上滑动时动画隐藏Toolbar、FlocationActionButton、Tab导航,下滑时显示,如果和你的期望不同,那么你可以不需要看了,免的浪费你的宝贵时间噢。 [b]效果预览[/b] 知乎效果: [img]http://files.jb51.net/file_images/article/201609/2016912142741734.gif?2016812142817[/img] 本博客实现效果: [img]http://files.jb51.net/file_images/article/201609/2016912142827667.gif?2016812142841[/img] 今天效果的源代码下载链接在文章末尾。 [b]实现分析[/b] 这个效果其实并不难实现,但是它的用处很大,当用户手指上滑,屏幕上显示下方内容的时候,隐藏Toolbar、Tab导航、FAB来腾出更大的空间显示内容,让用户爽。简单粗暴,但这就是我们的目的。 首先就是头部的Toolbar,这个就不用说了吧,基本会,不会的人随便看我一篇博客的demo都有这个效果,简直小学级别。 其次来看看FAB(FlocationActionButton)的显示和隐藏,知乎是用的平移,我们这里做个优化改动,当然平移也是可以的,如果你看过我的Material Design系列,[url=http://www.1sucai.cn/article/92485.htm]自定义Behavior之上滑显示返回顶部按钮[/url]这篇博客的话。那么我们的FAB的动画隐藏和显示也是用上一篇博客的原理,没有看上一篇博客的同学需要回过头看看噢,这里不在赘述。 最后来看下面的Tab导航的隐藏和显示,这个确确实实用平移更好是吧,然而相信你如果看过我Material Design系列,[url=http://www.1sucai.cn/article/92483.htm]Behavior之BottomSheetBehavior与BottomSheetDialog[/url]这篇博客的话,这个效果实现起来也不难。强烈建议看下文之前读这篇文章,不然真的没法继续看下去了。 其实代码量还是很少的,主要是Behavior原理、Behavior和CoordinatorLayout如何结合使用。so,强烈建议去上读下上面两篇博客噢。 …… 好的,五分钟过去了,我相信你大概已经速读了上面提到的两篇博客了。那么在第一篇FAB的那篇博客中实现的效果是手指向上滑时(屏幕显示下方的内容时)显示FAB用来回到顶部,但是这里刚好是相反的:向上滑时隐藏FAB。如果你认真读了原理解释的那一段或者运行过demo,这个效果so easy吧。第二篇博客中也讲到了如何隐藏和显示这个Tab导航,那么有的同学就觉得今天的博客就结束了吧?答案当然是No了,不然我也不会再开一篇博客来讲这个了。 为什么呢?还是有难点的,难点在哪里?就是上面讲到的两个Behavior如何和CoordinatorLayout结合使用,同时实现两个效果。而且BottomSheetBehavior隐藏和显示Tab导航这个里面之前我们使用Button来控制的,如何做到`CoordinatorLayout中的ContentView滑动时动态的显示和隐藏Tab导航呢? 接下来来点真材实料,带领大家一起代码撸起来。 [b]页面布局[/b] 上面的引文和介绍,我们已经知道了FAB的显示和隐藏用自定义Behavior实现,Tab导航用BottomSheetBehavior来实现,那么我们布局文件也该问世了:
<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:theme="@style/AppTheme.AppBarOverlay">

  <android.support.v7.widget.Toolbar
   android:id="@+id/toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   app:layout_scrollFlags="scroll|enterAlways|snap"
   app:popupTheme="@style/AppTheme.PopupOverlay" />
 </android.support.design.widget.AppBarLayout>

 <android.support.v7.widget.RecyclerView
  android:id="@+id/recyclerView"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:layout_behavior="@string/appbar_scrolling_view_behavior" />

 <LinearLayout
  android:id="@+id/tab_layout"
  android:layout_width="match_parent"
  android:layout_height="?actionBarSize"
  android:layout_alignParentBottom="true"
  android:background="@android:color/white"
  app:layout_behavior="@string/bottom_sheet_behavior">

  <Button
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:text="第一" />

  <Button
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:text="第二" />

  <Button
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:text="第三" />

  <Button
   android:layout_width="0dp"
   android:layout_height="match_parent"
   android:layout_weight="1"
   android:text="第四" />
 </LinearLayout>

 <android.support.design.widget.FloatingActionButton
  android:id="@+id/fab"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="bottom|end"
  android:layout_marginBottom="70dp"
  android:layout_marginEnd="16dp"
  android:layout_marginRight="16dp"
  android:src="@mipmap/ic_action_new"
  app:layout_behavior="@string/scale_down_show_behavior"
  app:layout_scrollFlags="scroll|enterAlways|snap" />
</android.support.design.widget.CoordinatorLayout>
还是稍微解释下,内容区域是一个RecyclerView,使用的Behavior是design的ScrollingViewBehavior: app:layout_behavior="@string/appbar_scrolling_view_behavior" 然后一个LinearLayout,使用的Behavior是design的BottomSheetBehavior: app:layout_behavior="@string/bottom_sheet_behavior" 最后一个FloatingActionButton,使用我们的自定义ScaleDownShowBehavior: app:layout_behavior="@string/scale_down_show_behavior" 其他两个都是design自带的,唯有FloatingActionButton的ScaleDownShowBehavior需要我们自定义,那么下面我们就来实现下ScaleDownShowBehavior。 [b]自定义Behavior实现FAB的动画控制[/b] 这里又谈到了自定义Behavior了,首先就来实现:用户手指在屏幕上滑,隐藏FAB,留出更多位置给用户。 这里还是继承FloatingActionButton.Behavior:
public class ScaleDownShowBehavior extends FloatingActionButton.Behavior {
 public ScaleDownShowBehavior(Context context, AttributeSet attrs) {
  super();
 }
}
这里我们的滑动方向还是不变,监听竖着方向的滑动:
@Override
public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, ...) {
 return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL;
}
那么我们就要稍微改一下我们的开始滑动时回调这个方法了:onNestedScroll():
@Override
// 隐藏动画是否正在执行
private boolean isAnimatingOut = false;

public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child,
View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
 if ((dyConsumed > 0 || dyUnconsumed > 0) && !isAnimatingOut
 && child.getVisibility() == View.VISIBLE) {// 手指上滑,隐藏FAB
  AnimatorUtil.scaleHide(child, listener);
 } else if ((dyConsumed < 0 || dyUnconsumed < 0) && child.getVisibility() != View.VISIBLE) {
  AnimatorUtil.scaleShow(child, null);// 手指下滑,显示FAB
 }
}

private ViewPropertyAnimatorListener listener = new ViewPropertyAnimatorListener() {
 @Override
 public void onAnimationStart(View view) {
  isAnimatingOut = true;
 }

 @Override
 public void onAnimationEnd(View view) {
  isAnimatingOut = false;
  view.setVisibility(View.GONE);
 }

 @Override
 public void onAnimationCancel(View arg0) {
  isAnimatingOut = false;
 }
};
好吧,代码非常少,完成了。那么我们就在string.xml中定义好,刚才我们引用的变量@string/scale_down_show_behavior:
[url=http://xiazai.jb51.net/201609/yuanma/AndroidBehavior(jb51.net).rar]http://xiazai.jb51.net/201609/yuanma/AndroidBehavior(jb51.net).rar[/url] 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部