Android CoordinatorLayout使用

一、简介

CoordinatorLayout翻译为协调者布局，是在 Google IO/15 大会发布的，是用来协调其子View们之间动作的一个容器，遵循Material Design风格，包含在 com.android.support:design中。CoordinatorLayout是一个超级强大的FrameLayout，结合AppBarLayout、 CollapsingToolbarLayout等可产生各种炫酷的效果。

二、使用

在项目的build.gradle引入material design库
老版本(项目未迁移至AndroidX)：

implementation 'com.android.support:design:28.0.0'

新版本（项目已迁移至AndroidX），本文使用：

 implementation 'com.google.android.material:material:1.1.0'

1、CoordinatorLayout结合AppBarLayout 使用

效果图：

1111.gif

布局文件使用：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="#222222"
            android:gravity="center"
            android:text="该区域可折叠"
            android:textColor="@android:color/white"
            android:textSize="30sp"
            app:layout_scrollFlags="scroll" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#DD012D"
            android:gravity="center"
            android:text="该区域为上滑至头部固定区域"
            android:textColor="@android:color/white"
            android:textSize="20sp" />
    </com.google.android.material.appbar.AppBarLayout>
    <androidx.core.widget.NestedScrollView
        android:id="@+id/rv_demo1_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <TextView
            android:layout_width="match_parent"
            android:text="这是一个滚动布局"
            android:textSize="200sp"
            android:background="#00ff00"
            android:layout_height="wrap_content"/>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

说明：
CoordinatorLayout须要作为顶层父View，子View想要与CoordinatorLayout实现"联动性"效果的首要条件是这个View必须实现了NestedScrollingChild接口(例如：NestedScrollView、RecyclerView等控件)。CoordinatorLayout子控件如果需要联动，需要设置app:layout_behavior属性，上面AppBarLayout没有设置是因为本身有个默认的app:layout_behavior查看源码如下：

public class AppBarLayout extends LinearLayout implements CoordinatorLayout.AttachedBehavior {
//...
}

2、AppBarLayout中ScrollFlags值

XML使用app:layout_scrollFlags设置，代码中获取该控件AppBarLayout.LayoutParams再使用setScrollFlags(int)设置
XML设置方法：

app:layout_scrollFlags="scroll|enterAlways" 

代码中设置方法：

TextView text= ... //确保该View是被AppBarLayout包裹的
AppBarLayout.LayoutParams params = 
    (AppBarLayout.LayoutParams) text.getLayoutParams();
params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL
    | AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS);

几种设置效果如下：

• scroll (SCROLL_FLAG_SCROLL)
  视图将与滚动事件直接相关。需要设置此标志才能使任何其他标志生效。如果此视图之前的任何同级视图没有此标志，则此值无效。

app:layout_scrollFlags="scroll"

• enterAlways (SCROLL_FLAG_ENTER_ALWAYS)
  当进入（在屏幕上滚动）时，视图将在任何向下滚动事件上滚动，无论滚动视图是否也在滚动。这通常被称为“快速推出”模式。

app:layout_scrollFlags="scroll|enterAlways"

• enterAlwaysCollapsed (SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED)
  “enterAlways”的另一个标志，它将返回的视图修改为仅在最初滚动回其折叠高度。一旦滚动视图到达其滚动范围的末尾，此视图的其余部分将滚动到视图中。折叠高度由视图的最小高度定义。

android:minHeight="30dip"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" 

• exitUntilCollapsed (SCROLL_FLAG_EXIT_UNTIL_COLLAPSED)
  退出时（从屏幕上滚动），视图将滚动到“折叠”为止。折叠高度由视图的最小高度定义。

android:minHeight="30dip"
app:layout_scrollFlags="scroll|exitUntilCollapsed" />

• snap (SCROLL_FLAG_SNAP)
  在滚动结束时，如果视图仅部分可见，则它将被捕捉并滚动到最近的边。例如，如果视图只显示其底部的25%，则它将完全从屏幕上滚下。相反，如果它的底部75%是可见的，那么它将完全滚动到视图中。

app:layout_scrollFlags="scroll|snap"

3、结合 CollapsingToolbarLayout 使用

效果图：

2222.gif

布局文件：

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true"
    android:layout_height="match_parent"
    >
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:fitsSystemWindows="true"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="#ff0000"
            app:collapsedTitleGravity="center"
            app:expandedTitleGravity="left|bottom"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="杨幂"
            app:toolbarId="@+id/toolbar">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:srcCompat="@mipmap/ym" />
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                app:layout_collapseMode="pin"
                />   
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>
    <androidx.core.widget.NestedScrollView
        android:id="@+id/rv_demo1_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
            <TextView
                android:layout_width="match_parent"
                android:text="这是一个滚动布局"
                android:textSize="200sp"
                android:background="#00ff00"
                android:layout_height="wrap_content"/>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

CollapsingToolbarLayout部分属性

• app:contentScrim CollapsingToolbarLayout完全折叠后的背景颜色
• app:titleEnabled 是否显示标题
• app:title 标题
• app:toolbarId toolbar 对应的view id
• app:statusBarScrim 折叠后状态栏的背景
• app:scrimVisibleHeightTrigger 设置收起多少高度时，显示ContentScrim的内容
• app:scrimAnimationDuration 展开状态和折叠状态之间，内容转换的动画时间
• app:expandedTitleTextAppearance 布局张开的时候title的样式
• app:expandedTitleMarginTop 布局张开的时候title的margin top
• app:expandedTitleMarginStart 布局张开的时候title的margin start
• app:expandedTitleMarginEnd 布局张开的时候title的margin end
• app:expandedTitleMarginBottom 布局张开的时候title的margin bottom
• app:expandedTitleMargin 布局张开的时候title的margin
• app:expandedTitleGravity 布局张开的时候title的位置
• app:collapsedTitleTextAppearance 布局折叠的时候title的样式
• app:collapsedTitleGravity 布局折叠的时候title的gravity

4、CoordinatorLayout 中的 Behavior

Behavior行为控制器：实现了用户可以在子视图上进行的一个或多个交互。这些交互可能包括拖动，滑动，甩动或任何其他手势。
Behavior中常用的重写的方法：

 /**
  * 确定使用Behavior的View要依赖的View的类型
  * 只要是CoordinatorLayout内的View的状态发送了变化,该方法就会执行
  * @param parent     顶层父控件CoordinatorLayout
  * @param child      我们设置这个Behavior的View
  * @param dependency 值会不断的变化,他会轮询CoordinatorLayout下所有所属的子View
  * @return 这里判断dependency所属的View是哪一个, 返回true，onDependentViewChanged才执行,否则不执行
  */
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency)

/**
  * 当被依赖的View状态改变时回调
  * @param parent     顶层父控件CoordinatorLayout
  * @param child      我们设置这个Behavior的View
  * @param dependency 值会不断的变化,他会轮询CoordinatorLayout下所有所属的子View
  * @return 当我们改变了child的大小或者位置的时候我们需要返回true
  */
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency)

/**
  * 当被依赖的View移除时回调
  * @param parent  顶层父控件CoordinatorLayout
  * @param child 我们设置这个Behavior的View
  * @param dependency 值会不断的变化,他会轮询CoordinatorLayout下所有所属的子View
  */
@Override
public void onDependentViewRemoved(@NonNull CoordinatorLayout parent, @NonNull View child, @NonNull View dependency) 

简单案例（向上滑动时底部控件渐渐隐藏，向下滑动时底部控件渐渐显示）：
效果

3333.gif

自定义一个Behavior

public class Demo1Behavior extends CoordinatorLayout.Behavior<View> {
    public Demo1Behavior() {
        super();
    }
    public Demo1Behavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        //这里判断dependency所属的View是哪一个,返回true，onDependentViewChanged才执行,否则不执行
        return dependency instanceof AppBarLayout;
    }
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        /*
         *这里获取dependency的top值,也就是AppBarLayout的top,因为AppBarLayout
         *在是向上滚出界面的,我们的因为是和AppBarLayout相反,所以取绝对值.
         */
        float translationY = Math.abs(dependency.getTop());
        child.setTranslationY(translationY);
        return true;
    }
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">
     <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="#222222"
            android:gravity="center"
            android:text="该区域可折叠"
            android:textColor="@android:color/white"
            android:textSize="30sp"
            app:layout_scrollFlags="scroll" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#DD012D"
            android:gravity="center"
            android:text="该区域为上滑至头部固定区域"
            android:textColor="@android:color/white"
            android:textSize="20sp" />
    </com.google.android.material.appbar.AppBarLayout>
    <androidx.core.widget.NestedScrollView
        android:id="@+id/rv_demo1_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <TextView
            android:layout_width="match_parent"
            android:text="这是一个滚动布局"
            android:textSize="200sp"
            android:background="#00ff00"
            android:layout_height="wrap_content"/>
    </androidx.core.widget.NestedScrollView>
    //行为控制器引用 app:layout_behavior=".demo1.Demo1Behavior"
    <TextView
        android:layout_gravity="bottom"
        app:layout_behavior=".demo1.Demo1Behavior"
        android:layout_width="match_parent"
        android:background="#ff00ff"
        android:layout_height="50dip"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

三、案例

防招商银行8.1全部菜单布局，上滑顶部区域隐藏，导航条悬浮，点击导航条可快速定位。

1、效果图

44444.gif

2、布局文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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=".demo5.Demo5Activity">
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/abl_demo5_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="#222222"
            android:gravity="center"
            android:text="该区域可折叠"
            android:textColor="@android:color/white"
            android:textSize="30sp"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed" />
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tb_demo5_content"
            android:layout_width="match_parent"
            android:layout_height="50dip"
            android:background="#ffffff">
        </com.google.android.material.tabs.TabLayout>
    </com.google.android.material.appbar.AppBarLayout>
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_demo5_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

3、页面代码及数据适配器代码

public class Demo5Activity extends AppCompatActivity {
    private RecyclerView rv_demo5_content;
    private List<Demo5Bean> data;
    private TabLayout tb_demo5_content;
    private AppBarLayout abl_demo5_content;
    private GridLayoutManager gridLayoutManager;
    private RecyclerView.SmoothScroller smoothScroller;
    private List<Integer> titlePosition;
    //是否正在滚动
    private boolean isScroll;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_demo5);
        tb_demo5_content = findViewById(R.id.tb_demo5_content);
        rv_demo5_content = findViewById(R.id.rv_demo5_content);
        abl_demo5_content = findViewById(R.id.abl_demo5_content);
        initData();
        initTabLayout();
        initRecyclerView();
    }
    private void initData() {
        data = new ArrayList<Demo5Bean>();
        titlePosition = new ArrayList<Integer>();
        Demo5Bean bean = null;
        for (int i = 0; i < 5; i++) {
            bean = new Demo5Bean("标题" + i, Demo5Adapter.VIEW_TYPE_TITLE);
            data.add(bean);
            titlePosition.add(i + (i * 10));
            for (int i1 = 0; i1 < 10; i1++) {
                bean = new Demo5Bean(i + "_内容" + i1, Demo5Adapter.VIEW_TYPE_MENU);
                data.add(bean);
            }
        }
    }
    private void initTabLayout() {
        for (Demo5Bean datum : data) {
            if (datum.getItemType() == Demo5Adapter.VIEW_TYPE_TITLE) {
                  tb_demo5_content.addTab(tb_demo5_content.newTab().setText(datum.getName()));
            }
        }
        tb_demo5_content.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                if(!isScroll) {
                    //收缩折叠区
                    abl_demo5_content.setExpanded(false);
                    int tabPosition = tab.getPosition();
                    int titlePosition = getTitlePosition(tabPosition);
                    smoothScroller.setTargetPosition(titlePosition);
                    gridLayoutManager.startSmoothScroll(smoothScroller);
                }
            }
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
            }
            @Override
            public void onTabReselected(TabLayout.Tab tab) {
            }
        });
    }
    private void initRecyclerView() {
        gridLayoutManager = new GridLayoutManager(this, 4);
        gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                if (position < data.size()) {
                    Demo5Bean bean = data.get(position);
                    if (bean.getItemType() == Demo5Adapter.VIEW_TYPE_TITLE) {
                        //是标题则占4个item
                        return 4;
                    } else if (bean.getItemType() == Demo5Adapter.VIEW_TYPE_MENU) {
                        //是menu则正常占用一个item
                        return 1;
                    } else {
                        return 0;
                    }
                } else {
                    //FooterView 占4个item
                    return 4;
                }
            }
        });
        //计算最后填充FooterView填充高度，全屏高度-状态栏高度-tablayout的高度(这里固定高度50dp)-title标题高度（40）-最后分组高度（3排menu每个70），用于recyclerView的最后一个item FooterView填充高度
        int screenH = getScreenHeight();
        int statusBarH = getStatusBarHeight(this);
        int tabH = dip2px(this,50);
        int titleH = dip2px(this,40);
        int lastMenusH= dip2px(this,70)*3;
        int lastH = screenH - statusBarH - tabH -titleH-lastMenusH;
        if(lastH<=0){
            lastH=0;
        }
        Demo5Adapter mAdapter = new Demo5Adapter(data, this,lastH);
        rv_demo5_content.setLayoutManager(gridLayoutManager);
        rv_demo5_content.setAdapter(mAdapter);
        //RecyclerView平滑Scroller
        smoothScroller = new LinearSmoothScroller(this) {
                    @Override
                    protected int getVerticalSnapPreference() {
                        return LinearSmoothScroller.SNAP_TO_START;
                    }
                    @Nullable
                    @Override
                    public PointF computeScrollVectorForPosition(int targetPosition) {
                        return gridLayoutManager.computeScrollVectorForPosition(targetPosition);
                    }
                };
        rv_demo5_content.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
                if(newState==RecyclerView.SCROLL_STATE_IDLE){
                    isScroll=false;
                }else{
                    isScroll=true;
                }
            }
            @Override
            public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                TabLayout.Tab tabAt = tb_demo5_content.getTabAt(getTabPosition(gridLayoutManager.findFirstVisibleItemPosition()));
                if (tabAt != null && !tabAt.isSelected()) {
                    tabAt.select();
                }
            }
        });
    }
    private int getTitlePosition(int tabPosition) {
        //根据tabPosition找出TitlePosition
        return titlePosition.get(tabPosition);
    }
    private int getTabPosition(int menuPosition) {
       return titlePosition.indexOf(menuPosition);
    }
    private int getScreenHeight() {
        return getResources().getDisplayMetrics().heightPixels;
    }
    public int getStatusBarHeight(Context context) {
        int result = 0;
        int resourceId = context.getResources()
                .getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            result = context.getResources().getDimensionPixelSize(resourceId);
        }
        return result;
    }
    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
}

4、数据适配器

public class Demo5Adapter extends RecyclerView.Adapter {
    public static final int VIEW_TYPE_TITLE = 0;
    public static final int VIEW_TYPE_MENU = 1;
    public static final int VIEW_TYPE_FOOTER = 2;
    private final LayoutInflater inflater;
    private List<Demo5Bean> data;
    private Context context;
    private int lastH;
    public Demo5Adapter(List<Demo5Bean> data, Context context,int lastH) {
        this.data = data;
        this.context = context;
        this.lastH = lastH;
        inflater = LayoutInflater.from(context);
    }
    @Override
    public int getItemViewType(int position) {
        if (position == data.size()) {
            return VIEW_TYPE_FOOTER;
        } else {
            Demo5Bean demo5Bean = data.get(position);
            return demo5Bean.getItemType();
        }
    }
    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        RecyclerView.ViewHolder viewHolder = null;
        switch (viewType) {
            case VIEW_TYPE_TITLE:
                viewHolder = new Demo5TitleViewHolder(inflater.inflate(R.layout.itme_demo5_title, parent, false));
                break;
            case VIEW_TYPE_MENU:
                viewHolder = new Demo5MenuViewHolder(inflater.inflate(R.layout.itme_demo5_menu, parent, false));
                break;
            case VIEW_TYPE_FOOTER:
                View view = new View(parent.getContext());
                view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, lastH));
                viewHolder = new Demo5FooterViewHolder(view);
                break;
        }
        return viewHolder;
    }
    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        switch (getItemViewType(position)) {
            case VIEW_TYPE_TITLE:
                ((Demo5TitleViewHolder) holder).tv_item_demo5_title.setText(data.get(position).getName());
                Log.i("TTT",holder.itemView.getMeasuredHeight()+"VIEW_TYPE_TITLE");

                break;
            case VIEW_TYPE_MENU:
                ((Demo5MenuViewHolder) holder).tv_item_demo5_menu.setText(data.get(position).getName());
                Log.i("TTT",holder.itemView.getMeasuredHeight()+"VIEW_TYPE_MENU");
                break;
        }
    }
    @Override
    public int getItemCount() {
        return data.size() + 1;
    }
    public static class Demo5TitleViewHolder extends RecyclerView.ViewHolder {
        private final TextView tv_item_demo5_title;
        public Demo5TitleViewHolder(@NonNull View itemView) {
            super(itemView);
            tv_item_demo5_title = itemView.findViewById(R.id.tv_item_demo5_title);
        }
    }
    public static class Demo5MenuViewHolder extends RecyclerView.ViewHolder {
        private final TextView tv_item_demo5_menu;
        public Demo5MenuViewHolder(@NonNull View itemView) {
            super(itemView);
            tv_item_demo5_menu = itemView.findViewById(R.id.tv_item_demo5_menu);
        }
    }
    public static class Demo5FooterViewHolder extends RecyclerView.ViewHolder {
        public Demo5FooterViewHolder(@NonNull View itemView) {
            super(itemView);
        }
    }
}

5、实体Bean

public class Demo5Bean {
    private String name;
    private int itemType;
    public Demo5Bean(String name, int itemType) {
        this.name = name;
        this.itemType = itemType;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getItemType() {
        return itemType;
    }
    public void setItemType(int itemType) {
        this.itemType = itemType;
    }
}

6、其他说明

AppBarLayout代码主动折叠与打开

//打开AppBarLayout
appBarLayout.setExpanded(true);
//关闭AppBarLayout
appBarLayout.setExpanded(false);

---

参考：https://blog.csdn.net/zping0808/article/details/104669944/