美文网首页
Android-CoordinatorLayout+AppBar

Android-CoordinatorLayout+AppBar

作者: 独自闯天涯的码农 | 来源:发表于2022-01-05 20:23 被阅读0次

    一、控件介绍

    1. CoordinatorLayout-协调器布局

    继承自ViewGroup
    有调度协调子布局的能力,CoordinatorLayout使用新的思路通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。CoordinatorLayout通过设置子View的 Behaviors来调度子View。系统(Support V7)提供了AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior, FloatingActionButton.Behavior, SwipeDismissBehavior;V extends View; 等。
    为了使AppBarLayout可以滚动,CoordinatorLayout必须带有一个可滚动的子View,这个子View必须实现NestedScrollingChild接口,目前实现这个接口的有RecyclerView和NestedScrollView(是一个ScrollView,里面只能包含一个子View)。CoordinatorLayout包含的子视图中带有滚动属性的View需要设置app:layout_behavior属性。上述例子中的RecyclerView就添加了一个behavior属性
    app:layout_behavior=”@string/appbar_scrolling_view_behavior”

    2. AppBarLayout-应用栏布局

    继承自LinearLayout
    在 AppBarLayout里面的子View有app:layout_scrollFlags 属性来控制AppBarLayout滑动时子View的效果。
    app:layout_scrollFlags有四个值:

    1. noScroll:等同于不设置任何 layout_scrollFlags,AppBarLayout 的子 View 是没有滚动效果的,固定在那里。
    2. scroll: 所有想滚动出屏幕的view都需要设置这个flag, 没有设置这个flag的view将被固定在屏幕顶部。例如,TabLayout 没有设置这个值,将会停留在屏幕顶部。 
    3. enterAlways: 设置这个flag时,向下的滚动都会导致该view变为可见,启用快速“返回模式”。 
    4. enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。 
    5. exitUntilCollapsed: 表示当View被推出屏幕时,会跟着滑动,直到折叠到View的最小高度; 
    6. snap:简单理解,就是Child View滚动比例的一个吸附效果,全部显示或全部不显示,不会局部显示。
    7. snapMargins:同snap吸附效果,如果设置的话,这个 View 将会被 snap 到它的顶部外边距和它的底部外边距的位置,而不是这个 View 自身的上下边缘
    8. 不设置app:layout_scrollFlags时默认是不滚动的 固定在那里。
    

    3. CollapsingToolbarLayout-折叠工具栏布局

    继承自FrameLayout
    CollapsingToolbarLayout可实现折叠效果。
    CollapsingToolbarLayout有一个重要的属性app:layout_collapseMode来控制子View的折叠模式:

    CollapseMode :子视图的折叠模式,在子视图设置,有三种模式。
    1. none:默认值,表示View不会有任何属性;
    2. “pin”:固定模式,在折叠的时候最后固定在顶端; 
    3. “parallax”:视差模式,在折叠的时候会有个视差折叠的效果。可以通过setParallaxMultiplier方法来设置视图差比率,其中0表示毫无视图差,完全跟内容滚动同步;1表示View完全不动。默认的视图差为0.5;
    

    其他一些属性:

    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. layout_anchor 的属性,连同 layout_anchorGravity 一起,可以用来放置与其他视图关联在一起的悬浮视图(如 FloatingActionButton)。
    

    4. Toolbar-顶部工具栏

    继承自ViewGroup
    从Android3.0(API level 11)开始,所有使用默认主题的activity都自带一个ActionBar,但是随着Android版本的迭代,ActionBar的特性不断增加,从而导致了在不同Android系统的设备上,ActionBar的显示不一致。

    从Android5.0(API level 21)开始,引进了Toolbar,它包含了ActionBar最近添加的大多数特性,同时添加到了支持库中,使得在低版本设备上也可以使用Toolbar。

    Toolbar与ActionBar的区别:
    ToolBar就是一个View,跟其它View一样包含在布局中。
    像常规View一样,Toolbar很容易来放置、实现动画以及控制。
    一个Activity中可以有多个Toolbar。

    注意事项:

    CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout联合一起使用时,有一些注意点

    1、CoordinatorLayout作为布局的父布局容器。
    2、CoordinatorLayout中给滑动的组件设置app:layout_behavior属性。
    3、AppBarLayout中给需要滑动的组件设置 app:layout_scrollFlags属性。
    4、AppBarLayout的高度固定,不能用match_parent,使用wrap_content时子view必须设置固定高度。
    5、CollapsingToolbarLayout的子视图设置layout_collapseMode属性。
    6、关联悬浮视图设置app:layout_anchor,app:layout_anchorGravity属性。
    

    二、使用

    TabLayout+Viewpager+Fragment页面布局

    <?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="250dp"
            app:layout_behavior="com.google.android.material.appbar.AppBarLayout$Behavior">
    
            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="200dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">
    
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/icon_bg"
                    app:layout_collapseMode="parallax" />
    
                <androidx.appcompat.widget.Toolbar
                    android:layout_width="match_parent"
                    android:layout_height="76dp"
                    app:layout_collapseMode="pin">
    
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:text="我的页面"
                        android:textColor="@color/purple_200"
                        android:textSize="18sp" />
    
    
                </androidx.appcompat.widget.Toolbar>
            </com.google.android.material.appbar.CollapsingToolbarLayout>
    
            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tablayout"
                android:layout_width="match_parent"
                android:layout_height="50dp" />
        </com.google.android.material.appbar.AppBarLayout>
    
    
        <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    
    
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
    

    相关文章

      网友评论

          本文标题:Android-CoordinatorLayout+AppBar

          本文链接:https://www.haomeiwen.com/subject/irqkcrtx.html