MaterialDesign
2019-08-28 本文已影响0人
灿烂呀
CoordinationLayout
属性介绍：
app:layout_anchor：提供了一个layout_anchor的属性，可以用来放置与其他视图关联在一起的悬浮视图。
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/collapsing"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:id="@+id/iv"
android:layout_width="match_parent"
android:layout_height="240dp"
android:scaleType="fitXY"
android:src="@mipmap/test"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.9"
android:minHeight="22dp"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/layout_tr_content"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchor="@id/iv"
android:id="@+id/toolbar"
app:layout_behavior="com.md.demo.behavior.TranslucentBehavior"
app:navigationIcon="@mipmap/insert"
android:minHeight="30dp"
></android.support.v7.widget.Toolbar>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/help"
app:layout_anchor="@id/toolbar"
app:layout_behavior="com.md.demo.behavior.TransferHeaderBehavior"
/>
</android.support.design.widget.CoordinatorLayout>
图中红框是image （id为help），蓝色框为toolBar ，根据代码 image 关联的是toolBar ，toolBar 是关联的Image(id=iv)的，所以布局就是这种情况。
下面更改下关联关系，toolBar 依然关联 iv ，同时image 也改为关联iv
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/collapsing"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:id="@+id/iv"
android:layout_width="match_parent"
android:layout_height="240dp"
android:scaleType="fitXY"
android:src="@mipmap/test"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.9"
android:minHeight="22dp"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/layout_tr_content"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchor="@id/iv"
android:id="@+id/toolbar"
app:layout_behavior="com.md.demo.behavior.TranslucentBehavior"
app:navigationIcon="@mipmap/insert"
android:minHeight="30dp"
></android.support.v7.widget.Toolbar>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/help"
app:layout_anchor="@id/iv"
app:layout_behavior="com.md.demo.behavior.TransferHeaderBehavior"
/>
</android.support.design.widget.CoordinatorLayout>
从图中可以看到 image 跑到 iv 的下面了，至于toolBar为什么在上面是他自身决定的
同时 自定义Behavior 的时候会复写下面2个方法
@Override
public boolean layoutDependsOn(@NonNull CoordinatorLayout parent, @NonNull ImageView child, @NonNull View dependency) {
return dependency instanceof Toolbar;
}
@Override
public boolean onDependentViewChanged(@NonNull CoordinatorLayout parent, @NonNull ImageView child, @NonNull View dependency) {
if(mOriginlHeaderX==0){
mOriginlHeaderX=dependency.getWidth()/2-child.getWidth()/2;
}
if(mOriginlHeaderY==0){
mOriginlHeaderY=dependency.getHeight()-child.getHeight();
}
float percenterX =dependency.getY()/mOriginlHeaderX;
if(percenterX>1) percenterX=1;
float percentY =dependency.getY()/mOriginlHeaderY;
if(percentY>1) percentY=1;
float x =mOriginlHeaderX-mOriginlHeaderX*percenterX;
float y =mOriginlHeaderY-mOriginlHeaderY*percentY;
if(x<child.getWidth()){
x=child.getWidth();
}
child.setX(x);
child.setY(y);
return true;
}
Behavior ：是观察者模式
child 是就是添加 behavior 的 控件，即观察者，而dependency 就是被观察者，也就是被关联的控件，个人理解就是 layout_anchor 所指的控件。
比如上面的例子就是，iv 变化的时候，toolBar ,image 跟着变化。
自定义Behaviro :
public class TransferHeaderBehavior extends CoordinatorLayout.Behavior<ImageView> {
public TransferHeaderBehavior(Context context, AttributeSet attrs) {
super(context, attrs);
}
private int mOriginlHeaderX=0;
private int mOriginlHeaderY=0;
@Override
public boolean layoutDependsOn(@NonNull CoordinatorLayout parent, @NonNull ImageView child, @NonNull View dependency) {
boolean flag =dependency instanceof Toolbar;
Log.e("返回",dependency.toString()+"~"+flag+"~~"+child.toString());
return dependency instanceof Toolbar;
}
@Override
public boolean onDependentViewChanged(@NonNull CoordinatorLayout parent, @NonNull ImageView child, @NonNull View dependency) {
if(mOriginlHeaderX==0){
mOriginlHeaderX=dependency.getWidth()/2-child.getWidth()/2;
}
if(mOriginlHeaderY==0){
mOriginlHeaderY=dependency.getHeight()-child.getHeight();
}
float percenterX =dependency.getY()/mOriginlHeaderX;
if(percenterX>1) percenterX=1;
float percentY =dependency.getY()/mOriginlHeaderY;
if(percentY>1) percentY=1;
float x =mOriginlHeaderX-mOriginlHeaderX*percenterX;
float y =mOriginlHeaderY-mOriginlHeaderY*percentY;
if(x<child.getWidth()){
x=child.getWidth();
}
Log.e("返回",dependency.toString()+"~12313~~"+child.toString());
child.setX(x);
child.setY(y);
return true;
}
}
1.继承 CoordinatorLayout.Behavior<ImageView>
2.传入的泛型就是 child
3.复写 两个参数的构造方法（反射用到）
4.引入的时候，写包全名字，不能混淆
layout_collapseMode:
1.none：这个是默认属性，布局将正常显示，没有折叠的行为。
2.pin：CollapsingToolbarLayout折叠后，此布局将固定在顶部。
3.parallax：CollapsingToolbarLayout折叠时，此布局也会有视差折叠效果。
说明：
上面的例子在滑动的时候，前两种情况下 iv 这个图片是以滑动的形式消失或者出现的，如果是使用 parallax 的时候没有明显的滑动效果，而是一种收缩的视觉效果
