本次主要实现两个效果,抽屉效果和 主页AppBar折叠效果。
主页AppBar折叠效果的实现
实现折叠效果,我们用到的是 Support Design Library 包下的
CoordinateLayout
、AppBarLayout
、CollapsingToolbarLayout
布局以及Behaviors
。
CoordinateLayout
本质上是一个增强型的FramLayout
,它可以使不同视图组件之间相互作用,并协调动画效果。CoordinateLayout
是基于定义在Behaviors
中的规则集的,我们可以定义CoordinateLayout
内部的视图组件是如何作用并变化的。当然也有已经定义好的Behaviors
让我们使用,像SwipeDismissBehavior
、BottomSheetBehavior
等。
举例说明:FloatingActionButton
和 SnackBar
,为了实现SnackBar
出现时FloatingActionButton
向上移动,SnackBar
消失时FloatingActionButton
移动回原位置,我们就要将CoordinateLayout
作为父容器。
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/design_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end|bottom"
android:layout_margin="20dp"
android:onClick="show" />
</android.support.design.widget.CoordinatorLayout>
AppBarLayout
是一个垂直的LinearLayout,用于处理各种应用栏滚动手势。在很大程度上依赖于在CoordinatorLayout中用作直接子对象。 如果在不同的ViewGroup中使用AppBarLayout,它的大部分功能将不起作用。
CollapsingToolbarLayout
控件可以实现当屏幕滚动时收缩 ToolBar 的效果,通常直接作为AppBarLayout
的子 View。
下面是主页完整布局main.xml
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/design_content"
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"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/ct"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#fef9cd"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="@drawable/header_bg"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="65dp"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@color/lineColor_unclick"
app:tabIndicatorColor="@color/lineColor_click"
app:tabSelectedTextColor="@color/tick_white"
app:tabTextColor="@color/colorAccent2" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end|bottom"
android:layout_margin="20dp"
android:onClick="show" />
<!-- show 方法弹出 SnackBar -->
</android.support.design.widget.CoordinatorLayout>
抽屉效果实现
抽屉效果通过
DrawerLayout
和NavigationView
来实现
DrawerLayout
是ViewGroup的子类,位于android.support.v4包中。功能就是作为窗口内容的顶级容器,允许从窗口的一个或两个垂直边缘拉出交互式“抽屉”视图。抽屉的定位和布局是通过在子视图上使用android:layout_gravity
属性来控制的,这些属性对应于你希望抽屉出现的视图的哪一侧:left
、right
(或start
、end
)。需要注意的是窗口的每个垂直边缘只能有一个抽屉视图。 如果您的布局在窗口的每个垂直边缘配置了多个抽屉视图,则会在运行时引发异常。
NavigationView
专为抽屉效果而生的空间,可以直接关联 header 和 menu
官网模板
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- Your contents -->
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/my_navigation_items" />
</android.support.v4.widget.DrawerLayout>
根据以上内容,我们就可以直接组装布局文件,将main.xml
嵌入到 Activity 的布局文件里,代码如下
<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/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".activity.DesignActivity">
<include layout="@layout/main" />
<android.support.design.widget.NavigationView
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/draw_menu"
android:layout_width="wrap_content"
android:layout_height="match_parent">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
最后
抽屉效果和 AppBar 的折叠效果就实现了,
Material Design
道路阻且长,加油啊!