Android自定义Behavior(1)-给你想要的PgOne

效果图

2017-08-22 11_01_38.gif

思路

用自定义Behavior来做

xml文件代码

  <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
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.support.design.widget.CollapsingToolbarLayout
        app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:scaleType="centerCrop"
            android:src="@mipmap/pg_one"
            app:layout_collapseMode="parallax"
            android:layout_width="match_parent"
            android:layout_height="300dp" />

        <FrameLayout
            app:layout_collapseParallaxMultiplier="0.3"
            app:layout_collapseMode="parallax"
            android:id="@+id/fl_view_1"
            android:layout_gravity="bottom"
            android:layout_width="match_parent"
            android:layout_height="100dp">

        </FrameLayout>

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    app:behavior_overlapTop="30dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include layout="@layout/include_eleme" />
</android.support.v4.widget.NestedScrollView>

<android.support.v7.widget.Toolbar
    android:background="#FF6749CA"
    app:layout_anchor="@id/fl_view_1"
    android:id="@+id/tool_bar_view_1"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize">

</android.support.v7.widget.Toolbar>


<TextView
    android:layout_marginRight="40dp"
    android:layout_gravity="center|right"
    android:textStyle="bold"
    android:textColor="@color/white"
    android:textSize="30sp"
    android:text="PgOne"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/view_behavior_1"/>
</android.support.design.widget.CoordinatorLayout>

正常定义的ToolBar在最上方，这时候需要一个参照物，利用的是app:layout_anchor 这个属性来定位ToolBar的位置，而这个参照物就是FrameLayout

效果图中 NestedScrollView 叠加上部一段距离，用app:behavior_overlapTop这个属性来实现。

整个效果图只有PgOne再动，那么自定义Behavior中，依赖方就是这个TextView，那么依赖谁呢？ 当让是滑动的ToolBar，使用自定义Behavior 用app:layout_behavior 这个属性。

自定义Behavior

  @SuppressWarnings("unused")
public class View1Behavior extends CoordinatorLayout.Behavior<TextView>{

//自定义Behavior 一定要复写两个参数的构造方法
public View1Behavior(Context context, AttributeSet attrs) {
    super(context, attrs);
}

//如果依赖的是 toolbar 才去处理
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, TextView child, View dependency) {
    return dependency instanceof Toolbar;
}

private float startX ;
private float startY ;
private float stubX = 10 ; //矫正像素

//这个方法主要是根据被依赖控件的位置，来改变依赖控件的时时滑动位置
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, TextView child, View dependency) {
    if (startX == 0) {
        startX = child.getX();
    }

    if (startY == 0) {
        startY = dependency.getY();
    }
    child.setY(dependency.getY());

    float persent = dependency.getY() / startY;
    dependency.setAlpha( 1 - persent);
    float x = startX - ((dependency.getWidth() - child.getWidth()) * (1 -persent)) + child.getWidth()/2 - stubX;
    child.setX(x);
    return true;
}
}

dependency 被依赖方 这里指的是ToolBar

child 依赖方 这里指的是TextView

可以加群 136705426 跟着谷歌混饭吃