Android材料设计之Behavior攻坚战

最新推荐文章于 2022-12-21 21:33:13 发布
最新推荐文章于 2022-12-21 21:33:13 发布
阅读量338 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30447263/article/details/84669812
版权
本系列文章一览：
前言

Behavior应该和CoordinatorLayout一对的，这里单独说因为Behavior比较难一点
经过前面的bottom_sheet_behavior、appbar_scrolling_view_behavior 应该对 behavior有一定的认识
注意：改动自定义behavior路径时一定要改使用到的地方,不然肯定崩，一定要改!! 一定要改!!

本文内容：
  • 1.认识Behavior的使用方式
  • 2.自定义Behavior,分析layoutDependsOn回调和onDependentViewChanged回调
  • 3.自定义Behavior,分析onNestedScroll回调和onNestedPreScroll回调
一、简单认识
1.使用

在CoordinatorLayout和AppBarLayout那篇貌似也没有碰到Behavior啊
不过仔细想一下，好像有个地方比较特殊，那就是app:layout_behavior：

<android.support.v7.widget.RecyclerView
        android:id="@+id/rv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
2.string字符串：

再看一下这个string是什么鬼==>原来是一个安卓design包中内置的一个字符串
看起来很像一个类名有没有：AppBarLayout的内部类ScrollingViewBehavior

<string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>
3.对应类

果然有这个类：android.support.design.widget.AppBarLayout.ScrollingViewBehavior

    public static class ScrollingViewBehavior extends HeaderScrollingViewBehavior {
        public ScrollingViewBehavior() {}
        public ScrollingViewBehavior(Context context, AttributeSet attrs) {
            super(context, attrs);
            final TypedArray a = context.obtainStyledAttributes(attrs,
                    R.styleable.ScrollingViewBehavior_Layout);
            setOverlayTop(a.getDimensionPixelSize(
                    R.styleable.ScrollingViewBehavior_Layout_behavior_overlapTop, 0));
            a.recycle();
        }
        //省略n行......
    }
二、自定义Behavior
1.既然安卓内部可以玩，那么我们也可以自定义玩玩
/**
 * 作者：张风捷特烈<br/>
 * 时间：2018/11/28 0028:17:02<br/>
 * 邮箱：1981462002@qq.com<br/>
 * 说明：最简单的behavior
 */
public class FirstBehavior extends CoordinatorLayout.Behavior<View> {
    public FirstBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return dependency instanceof AppBarLayout;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        return true;
    }
}
2.模仿安卓内置behavior
<string name="behavior_first">com.toly1994.vvi_mds.v04_behavior.FirstBehavior</string>

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/al_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
            <TextView
                android:id="@+id/id_tv_moving"
                style="@style/TVTestCenter"
                android:background="@color/feise"
                app:layout_scrollFlags="scroll"
                android:text="Flag"/>
    </android.support.design.widget.AppBarLayout>

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

</android.support.design.widget.CoordinatorLayout>
3.使用结果：
9414344-f61b8acc554642c0.gif
自定义Behavior.gif
4.关于几个参数

debug一下，应该很清楚的看出view和dependency分别对应的是什么

9414344-8b23f71b16d58d12.png
debug.png 
总得来说behavior就是:
在CoordinatorLayout中，让AppBarLayout里的首控件和添加behavior的控件进行联动，而实现酷炫逆天的效果,
其中child为添加了behavior的那个控件，dependency为AppBarLayout。
三、对第一个Behavior的分析

目测：当dependcy移动自身高度之后onDependentViewChanged将不再回调

1.对dependcy的操作

既然两个View都在手上，那玩玩呗：让移动时TextView的背景色随机变化,这些知道dependcy是谁了吧

9414344-c3d8f60c4818879a.gif
移动时变化dependcy.gif 
/**
 * 确定使用Behavior的View要依赖的View的类型：
 * 返回false：onDependentViewChanged不触发
 *
 * @param parent     CoordinatorLayout布局容器
 * @param child      装载behavior的控件
 * @param dependency 被联动的控件
 * @return
 */
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
    return dependency instanceof AppBarLayout;
}

/**
 * 当被依赖的View状态改变时回调
 *
 * @param parent     CoordinatorLayout布局容器
 * @param child      装载behavior的控件
 * @param dependency 被联动的控件
 * @return
 */
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
    ViewGroup dep = (ViewGroup) dependency;//AppBarLayout
    View childTv = dep.getChildAt(0);//获取第一个孩子
    childTv.setBackgroundColor(ColUtils.randomRGB());//背景设置随机色
    return true;
}
2.几个重要的参数：

注意：为了看一下getY和getTop的区别,这里特意setTranslationY(100)
可以看出getY包含了setTranslationY的值,getTop不包括setTranslationY，所以按需使用(如果没有平移，随便用)
可以看到移动的有效长度是dependency的高度,一旦超过onDependentViewChanged将不再回调

9414344-1175b7ac35f88ed1.png
dependency移动分析.png
9414344-e224025fa839136d.gif
dependency测试.gif 
/**
 * 当被依赖的View状态改变时回调
 *
 * @param parent     CoordinatorLayout布局容器
 * @param child      装载behavior的控件
 * @param dependency 被联动的控件
 * @return
 */
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
    dependency.setTranslationY(100);
    float dependencyY = dependency.getY();
    int dependencyHeight = dependency.getHeight();
    int dependencyTop = dependency.getTop();
    Log.e("onDependentViewChanged","dependencyY:" + dependencyY + ",dependencyHeight:" + dependencyHeight + ",dependencyTop:" + dependencyTop + L.l());

    int childHeight = child.getHeight();
    float childY = child.getY();
    int childTop = child.getTop();

    Log.e("onDependentViewChanged","childHeight:" + childHeight + ",childY:" + childY + ",childTop:" + childTop + L.l());
    return true;
}
3.判断dependency位移方向，让child进行联动

这里处理很简单：将child反方向进行移动,但效果看起来还不错
在布局中加入了一个TextView占一下视觉空间，不然空空的不好看

9414344-3434b5b9ff92a618.gif
联动.gif 
/**
 * 当被依赖的View状态改变时回调
 *
 * @param parent     CoordinatorLayout布局容器
 * @param child      装载behavior的控件
 * @param dependency 被联动的控件
 * @return
 */
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
    child.setTranslationY(-dependency.getY());
    return true;
}

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/al_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
            <TextView
                android:id="@+id/id_tv_moving"
                style="@style/TVTestCenter"
                android:background="@color/feise"
                app:layout_scrollFlags="scroll"
                android:text="Flag"/>
    </android.support.design.widget.AppBarLayout>


    <TextView
        android:id="@+id/hide"
        style="@style/TVTestCenter"
        android:background="@color/yase"
        app:layout_scrollFlags="scroll"
        android:text="Find Me"/>

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

</android.support.design.widget.CoordinatorLayout>
4.移动方向和分度值
9414344-92328fd1bb067394.gif
获取移动分度值.gif 
//添加成员变量
private float curY;

 /**
  * 当被依赖的View状态改变时回调
  *
  * @param parent     CoordinatorLayout布局容器
  * @param child      装载behavior的控件
  * @param dependency 被联动的控件
  * @return
  */
 @Override
 public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
     float dy = dependency.getTop() - curY; //dy>0 ----下移
     float faction;//移动的分度值
     if (dy <= 0) {//上移动
         faction = -dependency.getTop() * 1.f / dependency.getHeight();
     } else {
         faction = 1 - (-dependency.getTop() * 1.f / dependency.getHeight());
     }
//  dependency.setTranslationY(-dependency.getTop());//让dependency不移动
    dependency.setPivotX(dependency.getWidth()/2);//旋转
    dependency.setPivotY(dependency.getHeight()/2);
    dependency.setRotation(360 * faction);//旋转
    child.setTranslationY(-curY);
    curY = dependency.getY();//更新curY
    return true;
}
四、自定义FloatingActionButton伴随列表移动

onNestedScroll和onNestedPreScroll

1.布局
<?xml version="1.0" encoding="utf-8"?>
<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.v7.widget.RecyclerView
        android:id="@+id/rv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/id_fab_b"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_behavior="@string/behavior_second"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/dp_32"
        android:src="@drawable/icon_love"/>

</android.support.design.widget.CoordinatorLayout>
2.自定义Behavior：
9414344-d23d399971d39cfd.png
onNestedScroll.png

接触目标view时才会回调：onStartNestedScroll
加了layout_behavior的View是child

平移缩放
9414344-ab7dea5b9f18a583.gif
9414344-683c150a4135d371.gif 
/**
 * 作者：张风捷特烈<br/>
 * 时间：2018/11/30 0030:14:34<br/>
 * 邮箱：1981462002@qq.com<br/>
 * 说明：FloatingActionButton伴随动画
 */
public class FabFollowListBehavior extends CoordinatorLayout.Behavior<FloatingActionButton> {
    private static final int MIN_DY = 30;
    private static final String TAG = "FabFollowListBehavior";

    public FabFollowListBehavior(Context context, AttributeSet attributeSet) {
        super(context, attributeSet);
    }

    /**
     * 初始时不调用，滑动时调用---一次滑动过程，之调用一次
     */
    @Override
    public boolean onStartNestedScroll(
            @NonNull CoordinatorLayout coordinatorLayout,
            @NonNull FloatingActionButton child,
            @NonNull View directTargetChild,
            @NonNull View target, int axes, int type) {
        return true;
    }

    /**
     * @param dyConsumed 每次回调前后的Y差值
     */
    @Override
    public void onNestedScroll(
            @NonNull CoordinatorLayout coordinatorLayout,
            @NonNull FloatingActionButton child,
            @NonNull View target, int dxConsumed,
            int dyConsumed, int dxUnconsumed, int dyUnconsumed, int type) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, type);

        //平移隐现
        if (dyConsumed > MIN_DY) {//上滑：消失
            showOrNot(coordinatorLayout, child, false).start();
        } else if (dyConsumed < -MIN_DY) {//下滑滑：显示
            showOrNot(coordinatorLayout, child, true).start();
        }

        //仅滑动时消失
//        if (dyConsumed > MIN_DY || dyConsumed < -MIN_DY) {//上滑：消失
//            showOrNot(child).start();
//        }
    }

    private Animator showOrNot(CoordinatorLayout coordinatorLayout, final View fab, boolean show) {
        //获取fab头顶的高度
        int hatHeight = coordinatorLayout.getBottom() - fab.getBottom() + fab.getHeight();
        int end = show ? 0 : hatHeight;
        float start = fab.getTranslationY();
        ValueAnimator animator = ValueAnimator.ofFloat(start, end);
        animator.addUpdateListener(animation ->
                fab.setTranslationY((Float) animation.getAnimatedValue()));
        return animator;
    }

    private Animator showOrNot(final View fab) {
        //获取fab头顶的高度
        ValueAnimator animator = ValueAnimator.ofFloat(0, 1);

        animator.addUpdateListener(animation -> {
            fab.setScaleX((Float) animation.getAnimatedValue());
            fab.setScaleY((Float) animation.getAnimatedValue());
        });
        return animator;
    }
}

Behavior基本概念就这样，由于并不是非常常用，更深的用法等有需求再深究吧

后记：捷文规范
1.本文成长记录及勘误表
项目源码日期备注
V0.1--github2018-11-30Android材料设计之Behavior攻坚战
2.更多关于我
笔名QQ微信爱好
张风捷特烈1981462002zdl1994328语言
我的github我的简书我的掘金个人网站
3.声明

1----本文由张风捷特烈原创,转载请注明
2----欢迎广大编程爱好者共同交流
3----个人能力有限，如有不正之处欢迎大家批评指证，必定虚心改正
4----看到这里，我在此感谢你的喜欢与支持

9414344-8a0c95a090041a0d.png
icon_wx_200.png
张风捷特烈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android 史上最简单behavior,安卓behavior详解1--系统behavior的简单应用
weixin_29698641的博客
05-31 2932
一.简介Behavior的中文翻译是”行为”的意思.Behavior是Android新出的Design库里新增的布局概念。Behavior只有是CoordinatorLayout的直接子View才有意义。可以为任何View添加一个Behavior。Material Design里面的CoordinatorLayout是一个非常强大的控件，它接管了child组件之间的交互。让你滑动交互使用更加方便简...
Android Behavior详解
热门推荐
WangShuo的专栏
03-13 1万+
Behavior是Android新出的Design库里新增的布局概念。Behavior只有是CoordinatorLayout的直接子View才有意义。可以为任何View添加一个Behavior。 Behavior是一系列回调。让你有机会以非侵入的为View添加动态的依赖布局，和处理父布局(CoordinatorLayout)滑动手势的机会。如果我们想实现控件之间任意的交互效果，完全可以通过自定义
Android CoordinatorLayout高级用法之自定义Behavior
01-04
上次简单的说了一下CoordinatorLayout的基本用法(android特性之CoordinatorLayout用法探析实例)。其中CoordinatorLayout给我们提供了一种新的事件的处理方式，Behavior。还记得那一串字符串吗？ app:layout_behavior=@string/appbar_scrolling_view_behavior 其实它并不是一个字符串资源，而它代表的是一个类，就是一个Behavior，这玩意其实还可以自定义的。 首先，来让我见识一下它的真面目： public static abstract class Behavior<V ex
安卓Behavior用法
ruiruiddd的博客
10-22 3949
原帖: link 一个神奇的控件——Android CoordinatorLayout与Behavior使用指南简名关注42016.07.07 18:36:10字数 1,086阅读 72,577CoordinatorLayout是support.design包中的控件，它可以说是Design库中最重要的控件。 本文通过模仿知乎介绍了自定义Behavior，通过模仿百度地图介绍了BottomSheetBehavior的使用。 1.CoordinatorLayout介绍 官方对CoordinatorLayout
Android CoordinatorLayout进阶教程-自定义Behavior实例-标题抽屉效果-标题透明度渐变效果
最新发布
aaaym的博客
12-21 640
Behavior名为行为控制，当我们需要在CoordinatorLayout中我们要实现与子视图中复杂的手势交互时，这个时候我们可能需要自定义Behavior行为控制，在自定义的Behavior我们可以通过对应的回调去处理相应的业务逻辑。
Android CoordinatorLayout之自定义Behavior
假装你是大灰狼的专栏
01-02 706
一、认识CoordinatorLayout CoordinatorLayout作为support:design库里的核心控件，在它出现之前，要实现View之间嵌套滑动等交互操作可不是件容易的事，复杂、难度大，基本绕不开View的事件机制，CoordinatorLayout很大程度上解决了这个痛点，方便我们实现各种炫酷的交互效果。 如果你还没用过CoordinatorLayout，可先了解它的基本用...
Material Design系列之Behavior实现Android知乎首页
09-01
在Android知乎首页的实现中，Behavior的主要作用是控制`Toolbar`、`FloatingActionButton`（FAB）以及Tab导航的动画隐藏和显示。这种交互设计的目标是，当用户向上滑动查看更多的内容时，自动收起这些元素以提供更大...
Android项目开发之UI设计器
09-02
Android项目开发中的UI设计器是开发人员构建应用程序用户界面的重要工具。UI设计器允许开发者通过图形化的方式创建和编辑布局文件，提供了两种主要的声明UI的方式：通过XML文件（不带预览界面）或AXML文件（带预览...
android 浮动layout,android - 使用CoordinatorLayout中的浮动操作按钮和behavior_overlapTop - 堆栈内存溢出...
weixin_30775883的博客
05-26 1023
我正在尝试使用NestedScrollView在CoordinatorLayout添加一个floating action button ，该floating action button具有56dp的app:behavior_overlapTop 。我的fab的layout_anchor设置在Appbar ，当CollapsingToolbarLayout崩溃时它隐藏得很好，但由于在overlapT...
Android自定义Behavior
07-18
BottomSheetBehavior、SwipeDismissBehavior、自定义Behavior等。原理和教程请移步严振杰的博客：http://blog.csdn.net/yanzhenjie1003。
ScrollingViewBehavior 源码分析
d_o_n_g2的博客
09-01 694
代码路径位于：com.google.android.material.appbar.AppBarLayout 首先看下构造方法：分为无参和有参两种类型。 有参方法主要是设置了behavior_overlapTop这个值。暂时不看这个值。 public ScrollingViewBehavior() { } public ScrollingViewBehavior(Context context, AttributeSet attrs) {
Android自定义Behavior第十六式之空中楼阁
陈小缘的博客
12-29 9481
上个月鸿神在群里推荐一位同学的Flutter版WanAndroid项目的时候发现了一个炫酷的效果：
android behavior教程,Material Design系列之自定义Behavior支持所有View
weixin_42511255的博客
06-01 351
本文实例为大家分享了Android自定义Behavior支持所有View ，供大家参考，具体内容如下一、实现效果图这个右下角的FAB，动画当然可以多种多样，可以放在界面的任何地方，我们这里只举个例子。但是v7包中提供的Behavior目前只能是FloatingActionButton来用，所以今天我们实现的这个Behavior是支持所有的View的，可以用在ImageView、Button、Lay...
Android UI Material Design交互设计(五)--CollapsingToolbarLayout 折叠布局
yanwenyuan0304的专栏
07-04 406
Material Design 交互设计在Android上的应用，Design Support Library 是在2015年 Google官方发布的一个全新兼容函数库，它使得开发这可以在Android2.1（API 7）及以上的设备中实现交互设计的效果。这个函数库提供了一些了的控件，主要包括：Snackbar 、NavigationView、FloatingActionButton、TextI...
Android 自定义Behavior
weixin_30384031的博客
06-03 223
一、Behavior的介绍 1、什么是Behavior 上篇文章我们讲到CoordinatorLayout 配合AppBarLayout、CollapsingToolbarLayout实现了Toolbar的隐藏和折叠，但他们之间能够进行交互，其实就是通过一个介质CoordinatorLayout.Behavior 实现的。Behavior是Coordina...
CoordinatorLayout的使用（四）——通过AppBarLayout源码分析联动机制
VictorCatFish的博客
12-17 1239
一、整体交互逻辑 上一篇文章，我们从CoordinatorLayout源码出发，分析了一下Behavior几个重点方法的调用逻辑和流程。知道了整个交互的分发流程。但是具体是怎么让一个不是ScrollingView类型的View(如本篇要讲的AppBarLayout继承制LinearLayout的)怎么产生滑动效果的呢？这就是本篇所要讲解的内容了。 首先，我们先用一张图说明下整个交互逻辑，这里N...
android——behavior(textview跟随button移动)
wy313622821的博客
10-23 370
1、textview跟随button移动 效果图： 代码： mainactivity public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.act.
Android CoordinatorLayout Behavior
旧路
03-16 734
&nbsp; &nbsp; &nbsp; &nbsp;Behavior是Android Support Design库里面新增的布局概念，主要的作用是用来协调CoordinatorLayout里面直接Child Views之间交互行为的。 特别要注意的点是Behavior只能作用于CoordinatorLayout的直接Child View． &nbsp; &nbsp; &nbsp; ...
行为设计工具Behavior Designer中文版教程与功能详解
Behavior Designer是一款专为游戏开发者设计的强大工具，它提供了一个直观的可视化编辑器，使得设计师、程序员和美术人员能够创建复杂的AI系统，即使没有编程经验也能轻松构建。行为树（Behaviortree）是其核心概念...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值