主页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>

欢迎大家来到IT世界,在知识的湖畔探索吧!

Toolbar解释：该组件也属于一个布局，在其中可以放置其他组件

一些属性解释：

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：固定的，标签很多时候会被挤压，不能滑动。

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

工具栏