写了几篇关于Design下的UI框架,今天打算结合协调者布局CoordinatorLayout及ToolBar等多个Design下的控件。然后集成成一个小Demo供大家学习。不多说了,大家先看下效果图吧。
首先是布局文件,大体框架是DrawerLayout里面包含一个NavigationView和一个CoordinatorLayout。CoordinatorLayout中则包括AppBarLayout和ViewPager。AppBarLayout里面包含了ToolBar和TabLayout。来看下activity_main.xml:
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawerLayout_main"
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:fitsSystemWindows="false">
<!-- 内容布局-->
<include layout="@layout/include_content_main"/>
<android.support.design.widget.NavigationView
android:id="@+id/navigationView_main"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/navigation_header"
app:menu="@menu/menu_navigationview"/>
</android.support.v4.widget.DrawerLayout>
其中NavigationView的介绍,在之前的文章已经介绍了,需要了解的话请到
http://blog.csdn.net/tracy1024/article/details/52202034
内容布局的 include_content_main.xml 就是我所说的CoordinatorLayout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/coordinatorLayout_main"
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:id="@+id/appBarLayout_main"
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_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="@dimen/fab_margin"
android:onClick="clickButton"
android:src="@mipmap/ic_done"/>
</android.support.design.widget.CoordinatorLayout>
接下来我就来介绍下这个布局中的CoordinatorLayout,我习惯称作协调者布局,可以看做一个容器,协调各种子布局的联动。它属于MaterialDesign中比较重要的东东,最常见的情况下是结合CollapsingToolbarLayout一起使用,配合两个空间的不同属性设置形成比较炫酷的动画效果,本例将有涉及到。我接着介绍下上面布局文件中需要注意的地方。CoordinatorLayout内层的AppBarLayout需跟ScollingView并列,我们这里的ScollingView指的是ViewPager。而ViewPager中必须得有
app:layout_behavior="@string/appbar_scrolling_view_behavior"
这个属性。而如果AppBarLayout中的子布局想跟ViewPager联动的话,必须有
app:layout_scrollFlags="scroll|enterAlways"
这个属性与ViewPager的app:layout_behavior相呼应。这个属性代表的意思这个是可以滚动的且一旦向下拉,该属性所修饰的控件就显示。后面我会介绍该属性的其他设置方法。AppBarLayout的话我里面还多放了TabLayout。之前文章也有介绍了,需要了解的话请移步:
http://blog.csdn.net/tracy1024/article/details/52318946
然后这里的ViewPager我们需要用到一个简单的Fragment,由RecyclerView,RecyclerView里的i