序言
在我们对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