CoordinatorLayout 特性和实例

最新推荐文章于 2024-04-30 04:14:31 发布

weixin_34306446

最新推荐文章于 2024-04-30 04:14:31 发布

阅读量145

点赞数

文章标签：移动开发

原文链接：https://juejin.im/post/5b5fc20a6fb9a04fd55adf2b

版权

Android属性动画解析和实例

CoordinatorLayout是在 Google IO/15 大会发布的(Android 5.0)，遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等可产生各种炫酷的效果。

先上个动图：

第一个圆用的pin；第二个圆监听了AppBarLayout的滚动做了属性动画；第三个圆是parallax；

MyApplication是Toolbar的app:title的效果；滑上去白色的toolbar背景是contentScrim设置的背景颜色。

使用时需要引入support包

implementation 'com.android.support:design:27.1.1'
复制代码

CoordinatorLayout

CoordinatorLayout是一个“加强版”的 FrameLayout，它主要有两个用途：

用作应用的顶层布局管理器
通过为子View指定 behavior 实现自定义的交互行为。

public class CoordinatorLayout extends ViewGroup implements NestedScrollingParent2
复制代码

CoordinatorLayout的直接子View具有layout_anchor属性，常作用与FloatingActionButton

layout_anchor 指定参照物， layout_anchorGravity 指定相对于参照物的位置角。

app:layout_anchor="@id/frameLayout"
app:layout_anchorGravity="top|left"
复制代码

AppBarLayout：

AppBarLayout里面可以嵌套CollapsingToolbarLayout、ToolbarLayout 以及普通的View 和 ViewGroup控件。

AppBarLayout的直接子View才有layout_scrollFlag属性，可以对滚动控件的滚动事件做出响应；

没有指定layout_scrollFlag属性的在上滑后，会固定在顶部。

scroll: 是必备的，意味着当前控件监听滚动事件；
enterAlwasys: 上滑就立即隐藏appBarLayout，下拉就立即显示appBarLayout，不管滚动控件滚动到了哪里。
exitUntilCollapsed: 上滑隐藏appBarLayout，下拉需要等滚动控件滚动到顶部后才显示appBarLayout
enterAlwaysCollapsed：
snap: 上滑下拉时，appBarLayout要么全部显示，要么全部隐藏，不会部分展示

app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed|enterAlwaysCollapsed|snap|"
复制代码

CollapsingToolbarLayout

是一个FrameLayout，里面可以包裹Toolbar/View/ViewGroup

contentScrim - 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。
expandedTitleMarginStart - 设置扩张时候(还没有收缩时)title向左填充的距离。

<android.support.design.widget.CollapsingToolbarLayout
    android:minHeight="34dp"
    app:contentScrim="#ffffff"
    app:expandedTitleMarginEnd="64dp"
    app:expandedTitleMarginStart="48dp" />
复制代码

CollapsingToolbarLayout的直接子View才有layout_collapseMode属性

parallax:会呈现出视觉特差效果一直在移动
pin: 固定位置，上滑先不动，后才慢慢移出屏幕；下拉先慢慢展示，后不动

app:layout_collapseMode="parallax"
app:layout_collapseMode="pin"
复制代码

Toolbar

behavior

只有CoordinatorLayout的直接子View才有layout_behavior；也就是说如果要自定义Behavior，则作用这个Behavior的控件必须是Coordinator的直接子View；

滚动控件(scrollView/RecycleView/ListView) 可以用系统自带的behavior： appbar_scrolling_view_behavior

app:layout_behavior="@string/appbar_scrolling_view_behavior"

appbar_scrolling_view_behavior -> android.support.design.widget.AppBarLayout$ScrollingViewBehavior

复制代码

自定义简单的behavior，先看下效果图：txDisplay对两个Button的运动轨迹做出响应。

布局xml文件：定义了两个被跟随者（被观察者）btn1、btn2，和一个观察者txDisplay，都是CoordinatorLayout的直接子View。

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".behavior.BehaviorActivity">

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="被跟随者1"
        android:textColor="#ffffff"
        android:background="@color/colorPrimary"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="被跟随者2"
        android:textColor="#ffffff"
        android:layout_marginLeft="140dp"
        android:background="@color/colorAccent"/>

    <TextView
        android:id="@+id/txDisplay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="跟随者"
        android:textColor="@color/colorPrimaryDark"
        android:layout_marginTop="240dp"
        app:layout_behavior="com.example.administrator.myapplication.behavior.SimpleBehavior"/>

</android.support.design.widget.CoordinatorLayout>
复制代码

自定义Behavior:

layoutDependsOn() 代表寻找被观察View

onDependentViewChanged() 被观察者View变化的时候回调用的方法

在onDependentViewChanged中，我们只是让TextView跟随Button的移动而移动。此外还可以对textView的颜色、透明度、字号、背景等进行各种操作。

public class SimpleBehavior extends CoordinatorLayout.Behavior<TextView> { //指定观察者的类型

    public SimpleBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, TextView child, View dependency) {
        return dependency instanceof Button; //声明被观察者是个Button
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, TextView child, View dependency) {
        child.setX(dependency.getX() + 200);  //被观察者变化时，观察者做出相应的改变
        child.setY(dependency.getY() + 200);
        child.setText(dependency.getX()+" , "+dependency.getY());
        return true;
    }
}
复制代码

Activity：

class BehaviorActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_behavior)
    //被观察者1移动
        btn1.setOnTouchListener { v, event ->
            when (event.getAction()) {
                MotionEvent.ACTION_MOVE -> {
                    v.x = event.rawX - v.width / 2
                    v.y = event.rawY - v.height / 2
                }
            }
            return@setOnTouchListener false
        }
    //被观察者2移动
        btn2.setOnTouchListener { v, event ->
            when (event.getAction()) {
                MotionEvent.ACTION_MOVE -> {
                    v.x = event.rawX - v.width / 2
                    v.y = event.rawY - v.height / 2
                }
            }
            return@setOnTouchListener false
        }
    }
}
复制代码

AppBarLayout的滚动监听

1、如果只需要知道是展开、折叠和中间状态，则可以进行一下封装。通过接口回调来监听三个状态

appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
            @Override
            public void onStateChanged(AppBarLayout appBarLayout, State expanded) {
                Log.d("STATE", expanded.name());
                if (expanded == State.EXPANDED) {
                    //展开状态
                } else if (expanded == State.COLLAPSED) {
                    //折叠状态
                } else {
                    //中间状态
                }
            }
        });
复制代码

AppBarStateChangeListener的实现

public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener {

    public enum State {
        EXPANDED,
        COLLAPSED,
        IDLE
    }

    private State mCurrentState = State.IDLE;

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        if (verticalOffset == 0) {
            if (mCurrentState != State.EXPANDED) { //展开状态
                onStateChanged(appBarLayout, State.EXPANDED);
            }
            mCurrentState = State.EXPANDED;
        } else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {
            if (mCurrentState != State.COLLAPSED) { //折叠状态
                onStateChanged(appBarLayout, State.COLLAPSED);
            }
            mCurrentState = State.COLLAPSED;
        } else {
            if (mCurrentState != State.IDLE) { //中间状态
                onStateChanged(appBarLayout, State.IDLE);
            }
            mCurrentState = State.IDLE;
        }
    }

    public abstract void onStateChanged(AppBarLayout appBarLayout, State expanded);
}
复制代码

2、如果需要得到更详细的信息，滚动距离之类的，可以调用系统接口：AppBarLayout.OnOffsetChangedListener

appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                float percent = Math.abs(verticalOffset) * 1f / appBarLayout.getTotalScrollRange();
                Log.e("zhen", "percent: " + percent);
            }
        });
复制代码

参考

CoordinatorLayout与滚动的处理

转载于:https://juejin.im/post/5b5fc20a6fb9a04fd55adf2b