CoordinatorLayout + AppBarLayout 实现标题栏置顶

简介: CoordinatorLayout + AppBarLayout 实现标题栏置顶

因为前段时间项目中需要这种效果,之前看过 鸿洋大神写过的一个 360详情界面效果,也下载了源码,做了一些尝试,然而感觉太过于局限了,并不能符合项目需求,后来就自己翻阅了一些资料,了解到了 Design 包 中的 CoordinatorLayout ,AppBarLayout 等新组件。

网上了解到的关于 AppBarLayout 很多都是结合 ToolBar 来使用的,但是我一般项目中都是自己去定义 ToolBar 所以,就根据自己的写法去尝试了一下。

下面是效果图布局:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#999999"
            android:gravity="center"
            android:minHeight="50dp"
            android:text="顶部标题"
            android:textColor="#fff"
            app:layout_scrollFlags="scroll" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#666666"
            android:gravity="center"
            android:minHeight="50dp"
            android:text="this is content"
            android:textColor="#fff"
            android:textSize="18sp"
            app:layout_scrollFlags="scroll" />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="44dp"
            android:background="#fff"
            android:orientation="horizontal">
            <TextView
                android:id="@+id/tv_title1"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="scrollFragment"
                android:textColor="@color/select_option_title"
                android:textSize="14sp" />
            <TextView
                android:id="@+id/tv_title2"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="recyclerFragment"
                android:textColor="@color/select_option_title"
                android:textSize="14sp" />
        </LinearLayout>
    </android.support.design.widget.AppBarLayout>
    <FrameLayout
        android:id="@+id/fl_control"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

需要提醒的是,CoordinatorLayout 中 对于当前滑动效果,目前只支持 v4 包下的 NestedScrollView,以及 v7 包下的 RecyclerView 。

上面布局文件中的 FrameLayout 部分也可以换成 ViewPager ,但是也要注意里面使用的控件 要符合上面所提醒的要求。

另外一点就是,为了能够和 AppBarLayout 进行联动,下面的占位控件 必须要添加的一点属性:

app:layout_behavior="@string/appbar_scrolling_view_behavior"

1

在使用 AppBarLayout 的时候,要注意设置 子控件的 app:layout_scrollFlags 属性,通过上面的布局文件就可以看出来,最后指定的标题栏,是没有设置 layout_scrollFlags 属性的,下面也简单的贴一下 scrollFlags 的属性介绍:

scroll: 所有想滚动出屏幕的view都需要设置这个flag, 没有设置这个flag的view将被固定在屏幕顶部。

enterAlways: 设置这个flag时,向下的滚动都会导致该view变为可见,启用快速“返回模式”。

enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。

exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端。

snap:在滚动结束后,如果view只是部分可见,它将滑动到最近的边界。比如,如果view的底部只有25%可见,它将滚动离开屏幕,而如果底部有75%可见,它将滚动到完全显示。

这五个属性,大家可以根据自己的想法,或者需求去具体尝试 一下效果。

相关文章
|
XML 数据格式
DrawerLayout侧滑菜单、Toolbar和沉浸式状态栏的使用
DrawerLayout侧滑菜单、Toolbar和沉浸式状态栏的使用
|
Web App开发 API 容器
CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar-Android M新控件
CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar-Android M新控件
260 0
|
XML JSON Java
Android 侧滑抽屉菜单
Android 侧滑抽屉菜单
465 1
Android 侧滑抽屉菜单
|
Android开发
Android 滑动渐变背景Toolbar、点击置顶ScrollView
Android 滑动渐变背景Toolbar、点击置顶ScrollView
216 0
Android 滑动渐变背景Toolbar、点击置顶ScrollView
|
Android开发
NestedScrollView + ExpandableListView 显示不全问题和滑动冲突问题 。
NestedScrollView + ExpandableListView 显示不全问题和滑动冲突问题 。
|
Android开发 容器
Android开发 - 解决DialogFragment在全屏时View被状态栏遮住的问题
我的上一篇文章:设置DialogFragment全屏显示 可以设置对话框的内容全屏显示,但是存在在某些机型上顶部的View被状态栏遮住的问题。经过测试,发现了一种解决办法,在DialogFragment的onCreateView()中添加一个布局监听器: @Override public View.
2469 0
|
XML Android开发 数据格式
Android标题栏随着滑动显示隐藏
这次实现标题栏随着上滑下滑显示隐藏 实现这个效果需要,Support Design库中的CoordinatorLayout和AppBarLayout进行配合才行。
3317 0
|
Android开发 数据格式 XML
Android CoordinatorLayout与NestedScrollView基于Behavior几行代码实现底部View滑入滑出
Android CoordinatorLayout与NestedScrollView基于Behavior几行代码实现底部View滑入滑出 在CoordinatorLayout的Behavior出现之前,如果实现底部的View的滑入滑出,需要写不少代码,且实现起来比较繁琐,现在通过CoordinatorLayout的Behavior,寥寥几行代码就能简洁优雅的实现。
2429 0