Material Design系列之自定义Behavior支持所有View

本文实例为大家分享了Android自定义Behavior支持所有View ,供大家参考,具体内容如下

一、实现效果图

这个右下角的FAB,动画当然可以多种多样,可以放在界面的任何地方,我们这里只举个例子。但是v7包中提供的Behavior目前只能是FloatingActionButton来用,所以今天我们实现的这个Behavior是支持所有的View的,可以用在ImageView、Button、Layout,只要是继承View的类都可以用。

二、自定义Behavior和动画的封装

我们知道Behavior是CoordinatorLayout的一个子类,Ctrl + T查看它的实现类目前有如下几个:

1. AppBarLayout.Behavior;
2. AppBarLayout.ScrollingViewBehavior;
3. FloatingActionButton.Behavior;
4. Snackbar.Behavior;
5. BottomSheetBehaviro;
6. SwipeDismissBehavior;
7. HeaderBehavior;
8. ViewOffsetBehavior;
9. HeaderScrollingViewBehavior;

其中第1、7是抽象类,8是package保护的类,9是8的一个子类,我们回头再说。

AppBarLayout.ScrollingViewBehavior我们经常用,也就是我们在layout xml中经常用的:app:layout_behavior="@string/appbar_scrolling_view_behavior"。

Snackbar.Behavior被用于Snackbar,这个不用多说。

FloatingActionButton.Behavior、BottomSheetBehaviro、SwipeDismissBehavior在文章开头的几个友情链接的博客中已经讲的很清楚了,大家可以回过头去再看看。

今天讲的是自定义Behavior支持所有View作为FAB,那么也就是FloatingActionButton.Behavior了,但是它只支持FloatingActionButton,所以今天我们要自己继承Behavior来写DefineBehavior。所以第一步就是打开FloatingActionButton.Behavior的源码看。

实现BasicBehavior

首先必须要知道的是CoordinatorLayout.Behavior这个基类是支持泛型的,看到FloatingActionButton.Behavior后发先它是限制了引用它的View必须是FloatingActionButton罢了,那我们这里也来学它继承一下就OK了。

我们新建一个类BasicBehavior,把FloatingActionButton.Behavior的代码拷贝过来,把里面的泛型改为如下:

public class BasicBehavior<T extends View> extends CoordinatorLayout.Behavior<T>;

也就是说只要引用实现BasicBehavior的类是个View就可以,所以接着把BasicBehavior里面拷贝的代码中把引用泛型为FloatingActionButton的地方改为View,嗯觉得打工告成的时候发现有几个类的包导不进来:

仔细一看,这几个类在android.support.design.widget包下,一想肯定这几个类是package保护的类,所以我们在我们的项目下新建一个android.support.design.widget包,把实现BasicBehavior移到新建的包下,发现问题迎刃而解。

项目源码和BasicBehavior的完整源代码下载链接请在文章开头或者末尾找。

动画的实现和简化

(没看之前博客的客观一定要回过头看看,一定会有不一样的收获。)
我们在之前的同系列博客中,实现View的缩放动画的时候,尤其是在View被隐藏时须用如下代码记录View移出动画是否执行完,因为在界面滑动的时候View移除会被Behavior一直调用,所以不能重复执行,需要用一个值来记录:

// 记录View移出动画是否执行完。
private boolean isOutExecute = false;

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

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

 @Override
 public void onAnimationCancel(View view) {
 isOutExecute = false;
 }
};

为了不在每一个调用的地方都写这么长一段,我们把这端代码封装成一个类,简化如下:

public static class ListenerAnimatorEndBuild {
 // 记录View移出动画是否执行完。
 private boolean isOutExecute = false;

 private ViewPropertyAnimatorListener outAnimatorListener;

 public ListenerAnimatorEndBuild() {
 outAnimatorListener = new ViewPropertyAnimatorListener() {
 @Override
 public void onAnimationStart(View view) {
 isOutExecute = true;
 }
 @Override
 public void onAnimationEnd(View view) {
 view.setVisibility(View.GONE);
 isOutExecute = false;
 }

 @Override
 public void onAnimationCancel(View view) {
 isOutExecute = false;
 }
 };
 }

 // View移出动画是否执行完。
 public boolean isFinish() {
 return !isOutExecute;
 }

 // 返回ViewPropertyAnimatorListener。
 public ViewPropertyAnimatorListener build() {
 return outAnimatorListener;
 }
}

这样一来我们在用的时候就只是两行代码了:

ListenerAnimatorEndBuild listenerAnimatorEndBuild = new ListenerAnimatorEndBuild();

// 判断是否执行完动画:
listenerAnimatorEndBuild.isFinish();

继承BasicBehavior实现DefineBavior

前面定义好了BasicBehavior,这里只需要继承BasicBehavior实现我们的动画逻辑:

public class DefineBehavior extends BasicBehavior<View> {

 private ListenerAnimatorEndBuild listenerAnimatorEndBuild;

 public DefineBehavior(Context context, AttributeSet attrs) {
 super(context, attrs);
 listenerAnimatorEndBuild = new ListenerAnimatorEndBuild();
 }

 @Override
 public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
 return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL;
 }

 @Override
 public void onNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
// if (dyConsumed > 0 && dyUnconsumed == 0) {
// System.out.println("上滑中。。。");
// }
// if (dyConsumed == 0 && dyUnconsumed > 0) {
// System.out.println("到边界了还在上滑。。。");
// }
// if (dyConsumed < 0 && dyUnconsumed == 0) {
// System.out.println("下滑中。。。");
// }
// if (dyConsumed == 0 && dyUnconsumed < 0) {
// System.out.println("到边界了,还在下滑。。。");
// }

 // 这里可以写你的其他逻辑动画,这里只是举例子写了个缩放动画。
 if ((dyConsumed > 0 || dyUnconsumed > 0) && listenerAnimatorEndBuild.isFinish() && child.getVisibility() == View.VISIBLE) {//往下滑
 scaleHide(child, listenerAnimatorEndBuild.build());
 } else if ((dyConsumed < 0 || dyUnconsumed < 0) && child.getVisibility() != View.VISIBLE) {
 scaleShow(child, null);
 }
 }
}

你可能会很惊讶,哈哈,不要惊讶,封装的好久是这么简单就能实现所有的View支持。

三、如何使用

使用和google提供的Behavior一样,引用完整包名就可以:

app:layout_behavior="com.yanzhenjie.definebehavior.behavior.DefineBehavior"

为了和google提供的Behavior使用一样简单,我们可以String.xml中定义一下这个string:

<string name="define_behavior">com.yanzhenjie.definebehavior.behavior.DefineBehavior</string>

用的时候:

app:layout_behavior="@string/define_behavior"

现在我们把原来项目中的FloatingActionButton换成ImageView:

<ImageView
 android:id="@+id/fab"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="bottom|end"
 android:layout_margin="16dp"
 android:src="@mipmap/ic_launcher"
 app:layout_behavior="@string/define_behavior"
 app:layout_scrollFlags="scroll|enterAlways|snap" />

好吧,OK了,具体效果大家下载源码:http://xiazai.jb51.net/201609/yuanma/AndroidDefineBehavior(jb51.net).rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android5.0中Material Design的新特性

     Material Design简介 Material Design是谷歌新的设计语言,谷歌希望寄由此来统一各种平台上的用户体验,Material Design的特点是干净的排版和简单的布局,以此来突出内容. Material Design对排版.材质.配色.光效.间距.文字大小.交互方式.动画轨迹都做出了建议,以帮助设计者设计出符合Material Design风格的应用. Material Design设计语言鼓励大家使用充满活力的鲜艳色彩,并在同一界面建议使用三种色调,并保障有一个强色调,

  • 学习使用Material Design控件(一)

    Google 发布的Material Design支持库,对我们的APP设计有很大的影响,如果重新设计APP,支持库应该直接用V4提升到V7了,我们可以用Toolbar代替ActionBar,以及引入了RecycleView, SnakeBar等新控件. 我写了一个Demo来学习使用这些新控件. 新建项目,加入依赖包 我们使用Android Studio来开发这个Demo,在Android Studio新建一个项目,修改App Module的build.gradle文件,把compileSdkV

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

    本博客目的:仿知乎首页向上滑动时动画隐藏Toolbar.FlocationActionButton.Tab导航,下滑时显示,如果和你的期望不同,那么你可以不需要看了,免的浪费你的宝贵时间噢. 效果预览 知乎效果: 本博客实现效果: 今天效果的源代码下载链接在文章末尾. 实现分析 这个效果其实并不难实现,但是它的用处很大,当用户手指上滑,屏幕上显示下方内容的时候,隐藏Toolbar.Tab导航.FAB来腾出更大的空间显示内容,让用户爽.简单粗暴,但这就是我们的目的. 首先就是头部的Toolbar,

  • Material Design系列之Behavior上滑显示返回顶部按钮

    效果预览 源码在文章末尾. 引文 有时候我们的页面内容过长的时候,滑动到页面底部用户再滑动到顶部很麻烦,Android不像iOS可以点击statusBar回到顶部,一般都是双击Toolbar/ActionBar或者在底部放一个按钮. 今天就底部放一个回到顶部按钮这个效果来做一个基于Behavior的实现.那么我们传统的方式来做就是监听这个滑动View,比如:ScrollView/ListView/RecyclerView/GridView等,那么如果我们使用了CoordinatorLayout,

  • Android App仿QQ制作Material Design风格沉浸式状态栏

    一.概述 近期注意到QQ新版使用了沉浸式状态栏,ok,先声明一下效果图: 恩,接下来正题. 首先只有大于等于4.4版本支持这个半透明状态栏的效果,但是4.4和5.0的显示效果有一定的差异,所有本文内容为: 1.如何实现半透明状态栏效果在大于4.4版本之上. 2.如何让4.4的效果与5.0的效果尽可能一致. 先贴下模拟器效果图,以便和实现过程中做下对比 4.4 模拟器 5.x 真机 二.实现半透明状态栏 因为本例使用了NavigationView,所以布局代码稍多,当然如果你不需要,可以自己进行筛

  • Material Design系列之Behavior实现支付密码弹窗和商品属性选择效果

    今天的效果在支付宝.淘宝.京东等电商App中很常见.比如支付宝输入密码弹窗.商城下单时选择商品属性时,从下面浮动上来一个PopupWindow,那么今天就带大家用Behavior来实现这两个效果,结果你会发现简直只需要一行代码. 总结下现在用的APP: 1. 仿支付宝弹出的输入支付密码窗口. 2. 仿淘宝/天猫弹出商品属性选择框. 3. 知乎首页上下滑动隐藏ToolBar和NavigationBar. 4. - 系列博客: 1. Material Design系列,Behavior之Bottom

  • 学习使用Material Design控件(四)Android实现标题栏自动缩放、放大效果

    本文要实现内容移动时,标题栏自动缩放/放大的效果,效果如下: 控件介绍 这次需要用到得新控件比较多,主要有以下几个: CoordinatorLayout 组织它的子views之间协作的一个Layout,它可以给子View切换提供动画效果. AppBarLayout 可以让包含在其中的控件响应被标记了ScrollingViewBehavior的View的滚动事件 CollapsingToolbarLayout 可以控制包含在CollapsingToolbarLayout其中的控件,在响应colla

  • 学习使用Material Design控件(二)使用DrawerLayout实现侧滑菜单栏效果

    本文介绍如何使用DrawerLayout和NavigationView实现侧滑菜单栏的效果. 效果如下: Layout布局 <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+

  • 学习使用Material Design控件(三)使用CardView实现卡片效果

    本文主要介绍CardView的使用,CardView是继承自FrameLayout,使用比较简单,只需要用CardView包含其他View就可以实现卡片效果了. 实现效果如下: 加入依赖库 dependencies { -. compile 'com.android.support:cardview-v7:22.2.0' } Layout布局 <android.support.v7.widget.CardView android:layout_width="match_parent&quo

  • 微信小程序之MaterialDesign--input组件详解

    主要通过input输入事件配合css的transform动态改变实现这种效果. 实际调试过程中,input组件bindinput事件触发后回调的detail对象,在模拟器中含有cursor属性,在真机中(测过安卓,ios没测过)却没有该属性,最后选择detail对象中的value属性的值的长度来同步输入的位数. bindfocus事件最好不要添加改变css的代码 . 预览图片: JS: //index.js //获取应用实例 var app = getApp() Page({ data: { v

随机推荐