Material Design------ConstraintLayout+CollapsingToolbarLayout(--)

最新推荐文章于 2024-06-26 11:15:43 发布

一抹离愁

最新推荐文章于 2024-06-26 11:15:43 发布

阅读量860

点赞数

分类专栏： Android 文章标签： CoordinatorLayout+AppBarLayou

本文链接：https://blog.csdn.net/xueshao110/article/details/95110462

版权

Android 专栏收录该内容

97 篇文章 6 订阅

订阅专栏

ConstraintLayout

1、作为顶层布局
2、调度协调子布局

public class CoordinatorLayout extends ViewGroup implements NestedScrollingParent2 //源码

使用场景

1 CoordinatorLayout+AppBarLayout+Toolbar+TabLayout+ViewPager+RecyclerView

效果如下：

布局层次

主布局

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/co"
            app:title="标题"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"/>


        <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:id="@+id/tblayout"
            android:background="@color/colorAccent"
            app:tabIndicatorColor="#30e407"
            app:tabMode="scrollable"
            />
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_tab_pager"
        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属性

不懂layout_scrollFlags的看我这个https://blog.csdn.net/xueshao110/article/details/95076348

2 AppBarLayout嵌套CollapsingToolbarLayout

效果如下

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">
        <ImageView
            android:id="@+id/backdrop"
            android:layout_width="wrap_content"
            android:layout_height="200dp"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            android:src="@mipmap/names"
            app:layout_collapseMode="pin"
            />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/co"
            app:title="标题"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"/>

        </android.support.design.widget.CollapsingToolbarLayout>
        <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:id="@+id/tblayout"
            android:background="@color/colorAccent"
            app:tabIndicatorColor="#30e407"
            app:tabMode="scrollable"
            />

    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_tab_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />
</android.support.design.widget.CoordinatorLayout>

布局和案例1基本一样

CollapsingToolbarLayout可实现Toolbar的折叠效果。CollapsingToolbarLayout的子视图类似与LinearLayout垂直方向排放。

CollapsingToolbarLayout 提供以下属性和方法是用：
1. Collapsing title：ToolBar的标题，当CollapsingToolbarLayout全屏没有折叠时，title显示的是大字体，在折叠的过程中，title不断变小到一定大小的效果。你可以调用setTitle(CharSequence)方法设置title。
2. Content scrim：ToolBar被折叠到顶部固定时候的背景，你可以调用setContentScrim(Drawable)方法改变背景或者在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。
3. Status bar scrim：状态栏的背景，调用方法setStatusBarScrim(Drawable)。还没研究明白，不过这个只能在Android5.0以上系统有效果。
4. Parallax scrolling children：CollapsingToolbarLayout滑动时，子视图的视觉差，可以通过属性app:layout_collapseParallaxMultiplier=”0.6”改变。值de的范围[0.0,1.0]，值越大视察越大。
5. CollapseMode ：子视图的折叠模式，在子视图设置，有两种“pin”：固定模式，在折叠的时候最后固定在顶端；“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。

Toolbar 覆盖问题

把 CollapsingToolbarLayout 改一下：

app:titleEnabled="false"

Toolbar 状态栏浮在顶部

（Toolbar 去掉app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"）

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="160dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:layout_collapseParallaxMultiplier="0.8"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:title="电费VB环境都施工方绝对是高房价的"
            app:expandedTitleMarginEnd="64dp">
        <ImageView
            android:id="@+id/backdrop"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            android:src="@mipmap/names"
            app:layout_collapseMode="pin"
            />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:title="标题"
            app:layout_collapseMode="pin"
            app:titleTextColor="@color/design_default_color_primary"
            />

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

        <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:id="@+id/tblayout"
            android:background="@color/colorAccent"
            app:tabIndicatorColor="#30e407"
            app:tabMode="scrollable"

            />

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


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

        />

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