核心是使用 DrawerLayout
+ NavigationView
实现侧滑菜单
使用 TabLayout
+ ViewPager
实现Tab效果
NavigationView
是 M 的新控件,可以轻松编写静态的菜单,看它提供的api中貌似不能动态添加菜单项
TabLayout
也是作为 M 的新控件之一,其实在此之前已经有很多大神写出很好用的 TabIndicator
了,只是这次官方统一了一下,不需要使用第三方库。
依赖库
//核心
compile 'com.android.support:design:23.0.1'
//Circle View
compile 'de.hdodenhof:circleimageview:1.3.0'
compile 'com.android.support:recyclerview-v7:23.0.1'
circleimageview只是在
drawer_header.xml
中作为显示头像之用,不想用可以删除之
侧滑菜单的布局
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
/>
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
android:fitsSystemWindows="true"
app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>
菜单项的显示
对于菜单项的显示,并不需要重新写一个布局,只需要在 menu
文件夹下建立一个菜单项文件,这应该是 NavigationView
最大的优点了,懒癌晚期的我终于有救了。
drawer.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:checked="true"
android:id="@+id/menu_item_1"
android:title="@string/item1"
/>
<item
android:id="@+id/menu_item_2"
android:title="@string/item2"
/>
<item
android:id="@+id/menu_item_3"
android:title="@string/item3"
/>
<item
android:id="@+id/menu_item_4"
android:title="@string/item4"
/>
<item
android:id="@+id/menu_item_5"
android:title="@string/item5"
/>
</group>
</menu>
显示Tab
Tab显示部分用到了 ViewPager
与 TabLayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_tabbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/toolbar_tabbar"
android:background="?attr/colorPrimary"
android:scrollbars="horizontal"
app:tabTextColor="@android:color/black"
app:tabSelectedTextColor="?attr/colorAccent"
app:tabBackground="@android:color/white"
app:tabIndicatorColor="?attr/colorAccent"
app:tabPaddingStart="8dp"
app:tabPaddingEnd="8dp"
app:tabMode="scrollable"
app:tabGravity="center"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
TabLayout
常用的属性有三个:
属性 | 含义 |
---|---|
app:tabSelectedTextColor | Tab 被选中字体的颜色 |
app:tabTextColor | Tab未被选中字体的颜色 |
app:tabIndicatorColor | Tab指示器下标的颜色 |
还有两个比较重要的属性
app:tabMode
-
fix
:表示所有tab会挤在屏幕内,不可滚动| -
scrollable
:表示Tab可以滚动
app:tabGravity
-
center
:点击接近屏幕边缘的Tab时会聚焦(当然会聚焦啦)并居中 -
fill
:点击接近屏幕边缘的Tab时会向屏幕中心移动,直至能完全显示整个Tab标签,不会居中
建立 ViewPager
与 Tab
的联系
mTabLayout.setupWithViewPager(mViewPager);
实现菜单与Tab联动
- 点击菜单,Tab滚动
//设置菜单点击监听
mNavigationview.setNavigationItemSelectedListener(this);
- Tab滚动,更改菜单选中项目
//设置ViewPager滚动监听
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//更改页面后,通知Activity更改菜单选中项
((MainActivity)getActivity()).setMenuItem(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});