CoordinatorLayout及高级菜单栏AppBarLayout、CollapsingBarLayout

QuibblerQuibbler 2020-01-07 约 17 分钟 2402 次阅读

CoordinatorLayout及高级菜单栏AppBarLayout、CollapsingBarLayout

1、协调布局CoordinatorLayout

安卓Material Design库中一个比较难的控件就是CoordinatorLayout协调布局。协调布局CoordinatorLayout继承自ViewGroup,类似于RelativeLayout。

1.1、协调布局属性

协调布局有两个重要的属性设置app:layout_anchor和app:layout_anchorGravity属性。

app:layout_anchor:设置控件的锚点,即以另一个控件为参照设置位置  
    app:layout_anchorGravity:控件相对于锚点的位置

举个例子,FloatingButton在CoordinatorLayout布局中应用。这里并没有使用上面的两个属性

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floating_button"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_gravity="bottom|end"
        android:layout_margin="20dp"
        android:background="@drawable/bg_default" />
        
</androidx.coordinatorlayout.widget.CoordinatorLayout>

1.2、注意

CoordinatorLayout协调布局使用app:layout_anchor和app:layout_anchorGravity属性时不能以父布局为锚点,否则会报错:

Shutting down VM
FATAL EXCEPTION: main
Process: com.example.androidstudio, PID: 6540
java.lang.IllegalStateException: View can not be anchored to the the parent CoordinatorLayout
    at androidx.coordinatorlayout.widget.CoordinatorLayout$LayoutParams.resolveAnchorView(CoordinatorLayout.java:3055)
    at androidx.coordinatorlayout.widget.CoordinatorLayout$LayoutParams.findAnchorView(CoordinatorLayout.java:3038)
    at androidx.coordinatorlayout.widget.CoordinatorLayout.prepareChildren(CoordinatorLayout.java:669)

2、滚动应用栏AppBarLayout

Activity的工具栏从最开始的ActionBar到功能强大的Toolbar,后来又加入了AppBarLayout,借助协调布局能够使工具栏随着界面的滑动向上滚动。

2.1、演示布局

布局如下:

<?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:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbarlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@drawable/tab_bg_selector"
            app:layout_scrollFlags="scroll|enterAlways" />
    </com.google.android.material.appbar.AppBarLayout>
    
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
        
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floating_button"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_gravity="bottom|end"
        android:layout_margin="20dp"
        android:background="@drawable/bg_default" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

关键布局代码,用一个AppBarLayout包裹一个ToolBar,让给ToolBar加一个app:layout_scrollFlags属性,高度取自系统ActionBar高度?attr/actionBarSize。

<com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbarlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@drawable/tab_bg_selector"
            app:layout_scrollFlags="scroll|enterAlways" />
    </com.google.android.material.appbar.AppBarLayout>

2.2、AppBarLayout属性layout_scrollFalgs

AppBarLayout的滚动标志位app:layout_scrollFalgs,用来定义下级控件的滚动行为,下级控件中进行设置该属性。

①scroll

标志头部与主体一起滚动

②enterAlways

标志头部与主体一起滚动,头部滚到位后,主体继续向上或者向下滚动

③exitUntilCollapsed

保证页面上至少能看到最小化的工具栏,不会完全看不到工具栏。上滚动:先收缩头部,然后头部固定不动,主体继续向上滚动。下滚动:主体先滚动,头部不动。主体全部拉出去,头部向下展开。

④enterAlwaysCollapsed

与enterAlways标志位一起使用。该标志位有折叠操作,单独的enterAlways没有折叠操作。

⑤snap

用户松开手指,系统自行判断。接下来是全部向上滚到顶或者全部向下展开。

3、可折叠应用栏CollapsingToolBarLayout

类似支付宝主页的工具栏下拉展开效果

3.1、演示布局

布局比较麻烦,层层包裹,用AppBarLayout包裹CollapsingToolBarLayoout,再用CollapsingToolBarLayoout包裹ToolBar节点。

<com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbarlayout"
        android:layout_width="match_parent"
        android:layout_height="160dp"
        android:background="@color/colorAccent">
        
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_tool_bar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="@color/banner"
            app:expandedTitleMarginStart="40dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="可折叠工具栏">
            
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@drawable/tab_bg_selector"
                app:layout_collapseMode="none" />
                
        </com.google.android.material.appbar.CollapsingToolbarLayout>
        
    </com.google.android.material.appbar.AppBarLayout>

3.2、CollapsingBarLayout属性

有一些重要的属性需要了解,对于第二层包裹CollapsingBarLayout的属性有:

①ToolBar被折叠到顶部固定时候的背景

app:contentScrim="@color/ "

②状态栏的背景

app:statusBarScrim="@color/ "

③ToolBar的标题

app:title="ToolBar标题"

④标题距离开头距离margin

app:expandedTitleMarginStart="40dp"

⑤CollapsingToolbarLayout滚动标志

app:layout_scrollFlags="scroll|exitUntilCollapsed"

3.3、Toolbar属性layout_collapseMode

第三层包裹Toolbar设置的属性最重要的一个是app:layout_collapseMode,它有三个值

①app:layout_collapseMode = “pin” 固定模式:ToolBar不动,不受CollapsingBarLayout折叠影响

②app:layout_collapseMode = “parallax”视差模式:随着CollapsingBarLayout的折叠展开,Toolbar也收缩展开。设置了这个还须要设置折叠系数collapseParallaxMultiplier。为0时就是后面的app:layout_collapseMode 为none的模式。

app:layout_collapseParallaxMultiplier="0.2"

③app:layout_collapseMode = “none”默认值:CollapsingBarLayout折叠多少距离,ToolBar也移动多少距离。



参考博客:

        Android CoordinatorLayout

        AppbarLayout的简单用法

        AppbarLayout最详细使用说明

        AppbarLayout+双导航嵌套滑动效果

        细说 AppbarLayout,如何理解可折叠 Toolbar 的定制

         

相关推荐

精选
ViewPager和PagerAdapter、FragmentPagerAdapter、FragmentStatePager
Android

ViewPager和PagerAdapter、FragmentPagerAdapter、FragmentStatePager

ViewPager1、ViewPagerandroidx.viewpager.widget.ViewPager,Android中使用非常广泛的控件,可以说是APP必备:首次打开引导页、页面Banner广告等。常用方法:setAdapter() 设置适配器setOffscreenPageLimit() 设置缓存的页面个数,默认是 1setCurrentItem() 跳转到特定的页面setOnPage

1.1k
获取Android内置WebView内核版本
Android

获取Android内置WebView内核版本

获取Android内置WebView内核版本竟然能遇到这样奇葩的事情,网页用的技术过于新颖,以至于只支持高版本Chromium内核的,低版本安卓系统中内置的内核版本较低,无法加载前端页面。1、设置查看在系统设置里 > 应用 > 应用管理 > 显示系统应用,查看WebView组件:2、页面查看通过WebView发起的网络请求,都会带上浏览器的UA,通常页面都可以通过UA判断浏览器的内核版本。这里有两

1.1w
Android 14适配总结
Android

Android 14适配总结

Android 14适配总结毕业工作至今已经适配了三个Android大版本,从Android 11到Android 12、再到Android 13。2023年,Google即将推出的Android 14,上半年已经开始第一批适配。现在,第四个Android版本已经适配完,总结记录一下。1、Android 14计划Google一般会在2月份对外发布预告,同时放出开发者预览版。“拉通”各大平台、厂商以

1.1w