【Coordinatorlayout】

2021/12/13 6:23:34

本文主要是介绍【Coordinatorlayout】,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

Coordinatorlayout

  • 简介
    • 声明依赖项
  • Coordinatorlayout、AppBarLayout、CollapsingToolbarLayout结合使用
    • AppBarLayout
    • CollapsingToolbarLayout
    • 设置简单的xml文件看看效果

简介

CoordinatorLayout 是一个超级强大的FrameLayout.结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的折叠悬浮效果。
CoordinatorLayout 适用于两个主要用例:
1.作为顶级应用程序装饰或镀铬布局
2.作为与一个或多个子视图进行特定交互的容器

·app:layout_scrollFlags :(子布局设置是否可滑动)
·android:layout_gravity :属性控制组件在布局中的位置
·app:layout_behavior="@string/appbar_scrolling_view_behavior" :通知布局中包含滑动组件!
·app:layout_scrollFlags:子布局通过此确定是否可滑动.给需要滑动的组件设置app:layout_scrollFlags="scroll|enterAlways"属性。 

layout_scrollFlags:

·scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。
·enterAlways:这个flag让任意向下的滚动都会导致该view变为可见,启用快速“返回模式”。 
·enterAlwaysCollapsed:当你的视图已经设置minHeight属性又使用此标志时,你的视图只能已最小高度进入,只有当滚动视图                  到达顶部时才扩大到完整高度。 
·exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端。

声明依赖项

在应用或模块的 build.gradle 文件中添加所需工件的依赖项:

    implementation "androidx.coordinatorlayout:coordinatorlayout:1.1.0"

Coordinatorlayout、AppBarLayout、CollapsingToolbarLayout结合使用

AppBarLayout

如果我们想要实现折叠的ActionBar效果,在CoordinatorLayout中,AppBarLayout绝对是作为首选的控件。AppBarLayout是继承与LinearLayout的,默认的方向是Vertical,所以你可以把它当成垂直布局的LinearLayout来使用。
 内部的子View通过在布局中加app:layout_scrollFlags设置执行的动作:

·enterAlways :只要屏幕下滑,view就会立即拉下出来。
·scroll :子view会跟随滚动事件一起滚动,相当于添加到scrollview头部
·snap :这个属性让控件变得有弹性,如果控件下拉了75%的高度,就会自动展开,如果只有25%显示,就会反弹回去关闭。(去试试支付宝首页吧,就是加了弹性这个效果)
·exitUntilCollapsed :当scrollview滑到订部,再将子view折叠起来
·enterAlwaysCollapsed :当scrollview滑到底,再将子view展开
 <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">

     <androidx.core.widget.NestedScrollView
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             app:layout_behavior="@string/appbar_scrolling_view_behavior">

         <!-- Your scrolling content -->

     </androidx.core.widget.NestedScrollView>

     <com.google.android.material.appbar.AppBarLayout
             android:layout_height="wrap_content"
             android:layout_width="match_parent">

         <androidx.appcompat.widget.Toolbar
                 ...
                 app:layout_scrollFlags="scroll|enterAlways"/>

         <com.google.android.material.tabs.TabLayout
                 ...
                 app:layout_scrollFlags="scroll|enterAlways"/>

     </com.google.android.material.appbar.AppBarLayout>

 </androidx.coordinatorlayout.widget.CoordinatorLayout>

CollapsingToolbarLayout

CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar。
使用CollapsingToolbarLayout时,我们需要注意CollapsingToolbarLayout需要作为AppBarLayout子View。CollapsingToolbarLayout 是一个包装器,Toolbar用于实现折叠应用栏。它旨在用作AppBarLayout.

CollapsingToolbarLayout属性和含义

·app:title 设置标题
·app:collapsedTitleGravity="center" 设置标题位置
·app:contentScrim 设置折叠时toolbar的颜色,默认是colorPrimary的色值
·app:statusBarScrim 设置折叠时状态栏的颜色 ,默认是colorPrimaryDark的色值
·app:layout_collapseParallaxMultiplier 设置视差
·app:layout_collapseMode="parallax" 视差模式,在折叠的时候会有个视差折叠的效果
·app:layout_collapseMode="pin" 固定模式,在折叠的时候最后固定在顶端

设置简单的xml文件看看效果

xml布局文件用android.support.design.widget.CoordinatorLayout和android.support.design.widget.AppBarLayout等报错改为androidx.coordinatorlayout.widget.CoordinatorLayout 和com.google.android.material.appbar.AppBarLayout;AndroidX 是对support library 的一次升级:包名 从在android.support.*下面面变成androidx.*下面。命名规则不会再包含具体操作系统API的版本号。

<?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="400dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:scaleType="centerCrop"
                android:src="@drawable/dog"
                app:layout_collapseMode="parallax" />


            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="90dp"
                android:background="#5FF"
                app:layout_collapseMode="pin" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar3"
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:background="#ffffff"
                app:layout_collapseMode="parallax" />
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar2"
                android:layout_width="match_parent"
                android:layout_height="30dp"
                android:background="#000000"
                app:layout_collapseMode="parallax" />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

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

</androidx.coordinatorlayout.widget.CoordinatorLayout>


在这里插入图片描述

AppBarLayout放多个Toolbar,其中有一个设置app:layout_collapseMode="pin"固定模式,折叠的时候最后固定在顶端,其余都设置为app:layout_collapseMode=“parallax” 视差模式,在折叠的时候会有个视差折叠的效果。

github上的完整参照代码: https://github.com/18380438200/CoordinatorlayoutFull
最后效果图:
在这里插入图片描述

作者:zza

原文链接



这篇关于【Coordinatorlayout】的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程