NavigationView和TabLayout使用

Material design和Support library控件，主要包括TextInputLayout、SwitchCompat、SnackBar、FloatingActionButton、Shadows、Ripples、TabLayout、RecyclerView、Card、NavigationView、BottomSheet、Palette等控件，这里重点讲NavigationView和TabLayout.

详细控件使用请点击此传送门

下面通过gif图看一下要实现的效果:(文章结尾附上源码)

1 添加design依赖包

在你的model的build.gradel里的dependencies中添加:

  compile 'com.android.support:design:23.4.0'

2 主布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context="com.design.MainActivity">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolBar"
        android:background="@color/green"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"         app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dp">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <android.support.design.widget.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:background="@color/colorPrimary"
                app:tabTextColor="@color/white"
                app:tabSelectedTextColor="@color/green"
                app:tabIndicatorColor="@color/white"
                android:layout_height="wrap_content">
            </android.support.design.widget.TabLayout>
            <android.support.v4.view.ViewPager
                android:id="@+id/viewPager"
                android:layout_width="match_parent"
                android:layout_weight="1"
                android:layout_height="0dp"/>
        </LinearLayout>
        <android.support.design.widget.NavigationView
            android:id="@+id/navigationView"
            android:background="@color/white"
            android:layout_width="match_parent"
            android:layout_gravity="start"
            app:menu="@menu/menu"
            app:headerLayout="@layout/header"
            app:itemTextColor="@color/color_selector"
            app:itemIconTint="@color/color_selector"
            android:layout_height="match_parent">
        </android.support.design.widget.NavigationView>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

3 主要代码

package com.design;

import android.support.design.widget.NavigationView;
import android.support.design.widget.TabLayout;
import android.support.v4.view.GravityCompat;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

import com.design.adapter.MyAdapter;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private ViewPager mViewPager;
    private TabLayout mTabLayout;
    private List<String> mList = new ArrayList<>();
    private Toolbar mToolbar;
    private NavigationView mNavigationView;
    private DrawerLayout mDrawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
        mToolbar = (Toolbar) findViewById(R.id.toolBar);
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);
        mNavigationView = (NavigationView) findViewById(R.id.navigationView);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, 0,0);
        mDrawerLayout.addDrawerListener(toggle);
        toggle.syncState();

        for(int i=0;i<3;i++){
            mList.add("第"+i+"页");
        }
        mViewPager.setAdapter(new MyAdapter(getSupportFragmentManager(),mList));
        mTabLayout.setupWithViewPager(mViewPager);
        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                switch (item.getItemId()){
                    case R.id.item_1:
                        finish();
                        break;
                }
                mDrawerLayout.closeDrawer(GravityCompat.START);
                return true;
            }
        });
    }
}

4 爬坑须知

1 导入依赖包的时候23.4.0的版本号要和你的compileSdkVersion匹配上，不然就会报错
2 主代码里面顺序很重要，如果随意改动顺序就显示不出来
3  细节的属性都在NavigationView布局文件中，仔细研究吧

代码在design modle里面不是在app里面
代码在design modle里面不是在app里面
代码在design modle里面不是在app里面

源码下载