Android Material Design新UI控件使用大全 三

序言

在我们对NavigationView侧滑,TextInputLayout输入框,Snackbar弹出提示框,FloatingActionBar圆形button,TabLayout顶部导航栏及CoordinatorLayout有了一定的了解后,我们最后将对AppBarLayout,CollapsingToolbarLayout进行最后的分析,我们先看两张效果图,(因为暂时没找到好的方法来录制gif,先借用网上的图)

AppBarLayout

AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件,默认的AppBarLayout是垂直方向的,它的作用是把AppBarLayout所包裹的内容都作为AppBar, 支持手势滑动操作,可以管理其中的控件在内容滚动时的行为,如图所示:

---

实现这样效果的代码布局如下:

<android.support.design.widget.AppBarLayout
     android:id="@+id/appbar"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:fitsSystemWindows="true">

     <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          android:background="?attr/colorPrimary"
          app:layout_scrollFlags="scroll|enterAlways" />

      <android.support.design.widget.TabLayout
          android:id="@+id/appbar_tab_layout"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          app:tabTextColor="@android:color/white"             app:tabSelectedTextColor="@android:color/holo_red_light"
          app:tabGravity="fill" />

  </android.support.design.widget.AppBarLayout>

注意:这里我们将Toolbar和TabLayout共同组成AppbarLayout的内容,并且AppbarLayout必须作为ToolBar的父布局

CoordinatorLayout与AppbarLayout的结合使用

我们知道,AppBarLayout是支持我们的手势滑动操作的,不过需要跟CoordinatorLayout一起搭配使用,我们先看两张效果图,然后再进行分析:

左侧是我们初始化的代码,从上至下分别为Toolbar,TabLayout,ViewPager,底部为一个FloatingActionBar