主页Tab工具栏实现

主页Tab工具栏实现

2.1 工具栏

打开activity_main.xml进行修改

1、把根布局声明改为android.support.design.widget.CoordinatorLayout，它用来配合其他控件做各种效果的集成，实际上它相当于RelativeLayout与LinerLayout的综合体。

2、用android.support.design.widget.AppBarLayout与android.support.v7.widget.Toolbar组件嵌套写工具栏的内容如下：

<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:elevation="0dp" > <android.support.v7.widget.Toolbar android:id="@+id/title_toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" app:titleTextColor="@color/gray_3c" android:background="@color/gray_f" app:contentInsetStartWithNavigation="0dp" app:layout_scrollFlags="scroll|enterAlways" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="20dp" android:layout_gravity="left" android:text="北京" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left" android:layout_marginLeft="2dp" android:src="@mipmap/down_arrow"/> <android.support.design.widget.TabLayout android:id="@+id/toolbar_tab" android:layout_width="wrap_content" android:layout_height="?attr/actionBarSize" android:layout_gravity="center" android:background="@color/gray_f" app:tabMode="fixed" app:layout_scrollFlags="scroll" app:tabIndicatorColor="@color/colorAccent" app:tabSelectedTextColor="@color/colorAccent" app:tabTextColor="@color/gray_3c" app:tabIndicatorHeight="1dp" > <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="正在热映"/> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="即将上映"/> </android.support.design.widget.TabLayout> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/search48" android:layout_marginRight="20dp" android:layout_gravity="right" /> </android.support.v7.widget.Toolbar></android.support.design.widget.AppBarLayout>

一些属性解释：

app:contentInsetStartWithNavigation="0dp"：24.+版本后的toolbar的icon与标题之间默认会多出16dp间距，所以需要加上contentInsetStartWithNavigation属性来恢复正常距离

app:layout_scrollFlags：

app:layout_scrollFlags=" scroll" 滚动下方列表时Tab跟着向上滚动。

app:layout_scrollFlags=" enterAlways" 滚动下方列表时Tab不滚动。

app:layout_scrollFlags="scroll|enterAlways" 向上滚动列表时TabLayout先滚动出屏幕，列表项再滚动出屏幕；再向下滚动返回时TabLayout先滚动回原来位置，列表项再往回滚动。

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" 配合enterAlways使用，同时设置layout的最小高度值及高度，向下滚动时TabLayout先滚动至最小高度，列表项再跟着滚动，然后TabLayout再跟着滚动到设置高度。

app:layout_scrollFlags="scroll|exitUntilCollapsed" 需要设置最小高度，向上滚动时TabLayout滚动至最小高度不再滚动，列表继续滚动。

app:layout_scrollFlags="scroll|snap" 吸附在列表项上，当向上滚动的时候要么全部滚动出屏幕，要么全部滚动出屏幕。（回头详细介绍这几个效果的展现方式）

TabLayout的属性解释：

app:tabIndicatorColor ：指示条的颜色

app:tabIndicatorHeight ：指示条的高度

app:tabSelectedTextColor ： tab被选中时的字体颜色

app:tabTextColor ： tab未被选中时的字体颜色

app:tabMode="scrollable" ： 默认是fixed：固定的，标签很多时候会被挤压，不能滑动。

通过以上布局之后效果如下：

工具栏