FloatingActionButton
CoordinatorLayout为FloatingActionButton提供了layout_anchor
、layout_anchor_gravity
属性来设置FAB对应的位置。
AppBarLayout
AppBarLayout是用来包装界面中的顶部栏布局的,可以包括Toolbar、TabLayout等相对固定布局,当相同界面中一个指定了app:layout_behavior="@string/appbar_scrolling_view_behavior"
属性的滑动布局进行滑动时,AppBarLayout可以根据设置的属性对滑动行为进行响应,常见的布局设置方式如下:
<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">
<! --Your Scrollable View -->
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
...
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
...
app:layout_scrollFlags="scroll|enterAlways">
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
AppBarLayout中所含控件对于属性的响应方式是通过设置layout_scrollFlags
来实现的,分别有以下几个标志,使用滑动布局代表NestedScrollView或者RecyclerView等可滑动的控件:
- scroll:滑动事件发生时,该View可以响应滑动,呈现滑入或滑出效果。未设置该标志的View将在AppBarLayout内相对固定不动。
- enterAlways:手指下滑时,该View立即滑出显示。
- enterAlwaysCollapsed:在View声明了minHeight的情况下,手指下滑时,该View立即滑出显示,只不过滑动显示出minHeight即固定,直到滑动布局达到顶部时,继续下滑才完整显示。
- exitUntilCollapsed:手指上滑时,该View只会滑动隐藏到minHeight就不会继续滑动了。
- snap:当该View处于半隐藏半出现状态时,自动滑动到完全隐藏或完全显示。
scroll
标志是其他标志的基础,只有设置了该标志才有滑出滑入的效果,其他的标志都是来定义具体滑出滑入的行为。同时AppBarLayout是个LinearLayout,设置了scroll
标志的子View必须放在没有设置该标志的子View前面,否则会无法正常滑动。
默认状态下当滑动布局滑动到顶部时,AppBarLayout的子布局才会滑动显示出来,如果要在手指下滑时就显示AppBarLayout,可以在子布局中设置enterAlways
。如果设置了minHeight,还可以设置enterAlwaysCollapsed
使下滑动作只显示到AppBarLayout子布局的minHeight,下滑到顶部时才完整显示出来。
手指上滑时总会隐藏AppBarLayout内部布局,不过此时可以指定exitUntilCollapsed
属性,使隐藏到minHeight即不继续隐藏。
snap
标志用来使布局不会停留在中途状态,会自动隐藏或显示。
值得注意的是,滑动布局必须是实现了NestedScrollingChild接口的类,例如NestedScrollView、RecyclerView,如果使用ScrollView,AppBarLayout将无法正常响应滑动行为。
CollapsingToolbarLayout
AppBarLayout只能对标题栏的滑动行为进行设置,CollapingToolbarLayout则对滑动过程提供了更多动效。
<android.support.design.widget.AppBarLayout
android:layout_height="192dp"
android:layout_width="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
注意,当Toolbar包装了CollapsingToolbarLayout之后,标题的设置需要在CollapsingToolbarLayout中进行,可以在xml或Java代码中声明,因为标题没有设置在Toolbar当中了,所以Toolbar高度不能设置为wrap_content
,需要设为?attr/actionBarSize
。
因为此时CollapsingToolbarLayout是AppBarLayout的直接子控件,所以scroll_flags
设置在CollapsingToolbarLayout上。此时如果设置了exitUntilCollapsed
标志,因为CollapsingToolbarLayout没有设置minHeight,所以在内部的Toolbar中设置layout_collapseMode="pin"
保证当CollapsingToolbarLayout进行collapse时,Toolbar仍然固定能显示。
CollapsingToolbarLayout本身继承于FrameLayout,所以内部控件堆叠显示。可以在CollapsingToolbarLayout中添加其他控件,例如ImageView,增加显示效果,同时在CollapsingToolbarLayout中添加contentScrim
设置折叠后Toolbar颜色。
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="@android:color/holo_green_light"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="This is new title">
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="centerCrop"
android:src="@drawable/scene1"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
DrawerLayout+NavigationView
使用DrawerLayout+NavigationView,需要在DrawerLayout中添加CoordinatorLayout才能实现侧滑时背景变暗的效果
添加ToolBar:
toolbar标题出现在activity中央:添加AppBarLayout
toolbar颜色延伸到整个activity:添加CoordinatorLayout
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="timshin.com.test_navigation_drawer.MainActivity"
tools:openDrawer="start">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="timshin.com.navigation_drawer_demo.NavigationDrawerActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="@android:color/white" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="@menu/activity_navigation_drawer_drawer" />
</android.support.v4.widget.DrawerLayout>
menu文件
<group android:checkableBehavior="single"> // 组内菜单单选模式
<item
android:id="@+id/nav_camera"
android:icon="@drawable/ic_menu_camera"
android:title="Import" />
<item
android:id="@+id/nav_gallery"
android:icon="@drawable/ic_menu_gallery"
android:title="Gallery" />
<item
android:id="@+id/nav_slideshow"
android:icon="@drawable/ic_menu_slideshow"
android:title="Slideshow" />
<item
android:id="@+id/nav_manage"
android:icon="@drawable/ic_menu_manage"
android:title="Tools" />
</group>
<item android:title="Communicate"> // 内含菜单并设置标题
<menu> // 菜单,默认多选,如果外层包上group节点,会和上面的group合并在一起单选
<item
android:id="@+id/nav_share"
android:icon="@drawable/ic_menu_share"
android:title="Share" />
<item
android:id="@+id/nav_send"
android:icon="@drawable/ic_menu_send"
android:title="Send" />
</menu>
</item>
navigationView设置点击选中事件
...
mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
mNavigationView.setNavigationItemSelectedListener(this);
...
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
item.setChecked(true); // 确保第二组菜单点击保存选中状态
return true;
}