CoordinatorLayout三种用法总结

最新推荐文章于 2024-05-10 12:42:48 发布

L代码

最新推荐文章于 2024-05-10 12:42:48 发布

阅读量4.9k

点赞数

分类专栏： android 文章标签： CoorDinatorLayout AppBarLayout FloatingActionButton TabLayout

本文链接：https://blog.csdn.net/qq_34882418/article/details/81190363

版权

android 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

前言

之前都不知道这个控件布局，在有需求之后，采取研究的。充分的吸收了前辈的经验，因网上帖子质量参差不齐，为了以后再次用到不再浪费时间，故做一个总结，供自己记录，如果有幸能帮到其他人，也让我很开心。没有动态图，还请见谅，有心研究可以看看

准备

compile 'com.android.support:appcompat-v7:26.+'
compile 'com.android.support:design:26.+'

首先我们需要引入第二句的包。第一句是我们自带的，为了避免在使用TabLayout时报错，我们把他们的版本号一致就好。

一、CoordinatorLayout+FloatingActionButton

他们两个不是必须组合在一起的。之所以放在一起，是因为CoordinatorLayout为父布局时，弹出的Snackbar会自动顶起FloatingActionButton，而不至于压在后者之上。故组合。

<android.support.design.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:layout_height="match_parent">

     <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="15dp" />

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

召唤Snackbar

//    Snackbar用法
    findViewById(R.id.faBtn).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(view,"已删除一个会话",Snackbar.LENGTH_SHORT)
                    .setAction("撤销", new View.OnClickListener() {
                        @Override
                        public void onClick(View view) {

                            Toast.makeText(CoorDinatorActivity.this, "撤销了删除", Toast.LENGTH_SHORT).show();

                        }
                    }).show();
        }
    });

二、 CoordinatorLayout+AppBarLayout

toolbar根据滑动隐藏

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

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

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

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

兄弟们，RecyclerView的部分自行补齐吧。
三点：
1.AppBarLayout包含Toolbar
2.滑动部分添加app:layout_scrollFlags=”scroll|enterAlways”
3.RecyclerView或者说滑动部分添加layout_behavior

三、CoordinatorLayout+ AppBarLayout+TabLayout

这是最麻烦的了，也就麻烦在TabLayout的应用上

主布局

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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:layout_width="match_parent"
        android:layout_height="250dp">

        <ImageView android:layout_width="match_parent"
                   android:layout_height="200dp"
                   android:background="?attr/colorPrimary"
                   android:scaleType="fitXY"
                   android:src="@mipmap/tool_bg"
                   app:layout_scrollFlags="scroll|enterAlways"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="?attr/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="#000"
            app:tabTextColor="#fff"/>

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


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

很简单，AppBarLayout内包含跟随滑动隐藏的子view和一个不会到顶停留的TabLayout
不变的两点：
1.滑动隐藏的加上app:layout_scrollFlags=”scroll|enterAlways”
2.滑动的控件加上layout_behavior属性

关于TabLaout的使用我会单独出一篇，回头附上链接，就算完成了。

三->四第三部分的进阶视觉特差

我不知道为什么是这个名字，我理解的是淡入淡出，toolbar的滑动效果
主布局

<android.support.design.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:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbarlayout"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/ollapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@mipmap/tool_bg"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:title="安排"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/TabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="?attr/colorPrimary"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabIndicatorHeight="4dp"
            app:tabSelectedTextColor="#000"
            app:tabTextColor="#fff" />
    </android.support.design.widget.AppBarLayout>


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

结构是这样

不变的两点：
1.滑动隐藏的加上app:layout_scrollFlags=”scroll|enterAlways”
2.滑动的控件加上layout_behavior属性
这个进阶有两处：
1.app:layout_collapseMode=”pin”，toolbar的title会跟随滑动上升
2.CollapsingToolbarLayout的引入。结构内包含toolbar和其背景

总结
这是Coordinatorlayout的基本用法，高深的我还没接触到。本篇只是说了用法，深的我也不懂，各位老师发现有什么问题，知会一下，谢谢。

重点声明参考链接，我是主要根据这位老师的文章学习的，自己制作demo，有一定理解，才敢班门弄斧。谢谢

L代码

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CoordinatorLayout三种用法总结

前言之前都不知道这个控件布局，在有需求之后，采取研究的。充分的吸收了前辈的经验，因网上帖子质量参差不齐，为了以后再次用到不再浪费时间，故做一个总结，供自己记录，如果有幸能帮到其他人，也让我很开心。没有动态图，还请见谅，有心研究可以看看准备compile 'com.android.support:appcompat-v7:26.+'compile 'com.android.supp...
复制链接

扫一扫