DrawerLayout + NavigationView 侧滑菜单，ViewPager + Fragment 快速构建主界面_drawerlayout结合navigationview 动态添加fragment到主页面的例子

安卓的 Material Design 添加了不少的新控件，可以帮助我们快速开发。比如侧滑菜单、浮动按钮、导航条（不是以前蛋疼的ActionBar）、菜单条，还自带了不少特效，当然只要从API 17以上才有效果。有的是19，有的是21。所以，如果要做兼容的话，也是比较蛋疼的。但好在目前的趋势是，4.4一下的手机也是越来越少了，最好都是5.0的就好了。

以前的各种开源大神写的依赖库，虽然很好用，但是没用一个依赖库，都要琢磨一番，并且每个公司的设计都不一样，还要修改一番，心碎啊。有了新的，我们淡然得研究一番了。

侧滑菜单 + ViewPager + Fragment + 导航条，快速搭建一个项目的主界面，还是比较爽的，代码也是比较清晰的，先上图吧。

先看布局代码

<?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/drawerLayout"
                                        android:layout_width="match_parent"
                                        android:layout_height="match_parent"
                                        android:clipToPadding="true"
                                        android:fitsSystemWindows="true">

    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
                                                     android:layout_width="match_parent"
                                                     android:layout_height="match_parent"
                                                     android:orientation="vertical">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/material_primary_dark"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/material_primary_dark"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@android:color/white"
                app:tabTextColor="#aaffffff"/>
        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/head_navigation_view"
        app:menu="@menu/menu_navigation_view"/>

</android.support.v4.widget.DrawerLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

侧滑菜单 NavigationView 一定要包在 DrawerLayout 的布局中。CoordinatorLayout 就相当于一个LinearLayout，AppBarLayout 就用来包裹导航条的。至于其中的一些属性，可以看我上篇文章的。

其中 NavigationView 的 app:headerLayout=”@layout/head_navigation_view” 就是你在图片上看到的一个美女玩手机背景图片 + ImageView + TextView 。

其中 NavigationView 的 app:menu=”@menu/menu_navigation_view” 就导航下面的每一条 Item 。

主界面代码

package com.example.zhou.materialtest;

import android.os.Bundle;
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.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.Toast;

import com.zhou.ui.adapter.HomeFragmentAdapter;

import java.util.Arrays;

public class MainActivity extends AppCompatActivity {

    private Toolbar mToolbar;
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private NavigationView mNavigationView;
    private DrawerLayout mDrawerLayout;

    private HomeFragmentAdapter mHomeFragmentAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        initView();
        initToolbar();
        initViewPager();
        initNavigationView();
    }

    private void initView() {
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mTabLayout = (TabLayout) findViewById(R.id.tabs);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        mNavigationView = (NavigationView) findViewById(R.id.navigationView);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
    }

    private void initViewPager() {
        String[] titles = {"科技新闻", "靓丽美女", "极客信息", "德莱联盟"};
        mHomeFragmentAdapter = new HomeFragmentAdapter(getSupportFragmentManager(), Arrays.asList(titles));
        mViewPager.setAdapter(mHomeFragmentAdapter);
        mTabLayout.setupWithViewPager(mViewPager); // 将TabLayout和ViewPager关联起来。
        mTabLayout.setTabsFromPagerAdapter(mHomeFragmentAdapter); // 给Tabs设置适配器

        mViewPager.setCurrentItem(0);
    }

    private void initToolbar() {
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        mToolbar.setTitle("greek lee");
        mToolbar.setSubtitle("zhou");
        mToolbar.setLogo(R.mipmap.ic_launcher);
        mToolbar.setNavigationIcon(R.mipmap.ic_launcher);
        // getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        // mToolbar.setOnMenuItemClickListener(this);
    }

    private void initNavigationView() {

        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

            private MenuItem mPreMenuItem;

            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                if (mPreMenuItem != null) {
                    mPreMenuItem.setChecked(false);
                }

                Toast.makeText(getApplicationContext(), item.getTitle(), Toast.LENGTH_SHORT).show();

                item.setChecked(true);
                mDrawerLayout.closeDrawers();
                mPreMenuItem = item;
                return true;
            }
        });

    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == android.R.id.home) {
            // 打开抽屉侧滑菜单
            mDrawerLayout.openDrawer(GravityCompat.START);
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater menuInflater = getMenuInflater();
        menuInflater.inflate(R.menu.menu_home, menu);
        return super.onCreateOptionsMenu(menu);
    }

    private long exitTime = 0;

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {
            // 按下的如果是BACK，同时没有重复.
            if ((System.currentTimeMillis() - exitTime) > 2000) {
                Toast.makeText(getApplicationContext(), "再按一次退出程序", Toast.LENGTH_SHORT).show();
                exitTime = System.currentTimeMillis();
            } else {
                finish();
            }
        }
        return true;
    }


}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

没写什么注释，不是好习惯。不过代码都很简单，相信都能搞定的。

主要是初始化一下ViewPager，在HomeFragmentAdapter 里面塞了4个Fragment，通过 setupWithViewPager() 方法让 ViewPager 和TabLayout 联动起来。

然后就是初始化导航条 Toolbar，设置了一些参数，返回图片，文字，还有很多，大家可以自己找下。

然后初始化侧滑菜单，主要是监听 setNavigationItemSelectedListener()，菜单的点击事件。

再就是写了一个菜单，就一个搜索按钮和一个朋友按钮，这样该有的都有了。需要什么，完全可以自定义。

代码也不是很多，ViewPager适配器 HomeFragmentAdapter，主要注意 getPageTitle() 这个方法，一定要重写，这个适合 TabLayout 联动的关键（视觉上）。

package com.zhou.ui.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

import com.zhou.ui.fragment.Fragment1;
import com.zhou.ui.fragment.Fragment2;
import com.zhou.ui.fragment.Fragment3;
import com.zhou.ui.fragment.Fragment4;

import java.util.List;

/**
 * Created by zhou on 2016/6/1.
 */
public class HomeFragmentAdapter extends FragmentStatePagerAdapter {

    private List<String> mTitles;

    public HomeFragmentAdapter(FragmentManager fm, List<String> mTitles) {
        super(fm);
        this.mTitles = mTitles;
    }

    @Override
    public Fragment getItem(int position) {
        String str = mTitles.get(position);
        Fragment fragment = null;
        switch (position) {
            case 0:
                fragment = Fragment1.newInstance(str);
                break;
            case 1:
                fragment = Fragment2.newInstance(str);
                break;
            case 2:
                fragment = Fragment3.newInstance(str);
                break;
            case 3:
                fragment = Fragment4.newInstance(str);
                break;
        }
        return fragment;
    }

    @Override
    public int getCount() {
        return mTitles.size();
    }

    /**
     * 联动 TabLayout 上的 Title
     * @param position
     * @return
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles.get(position);
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

注意几点

1.API 要17以上，如果要沉浸栏，就需要19以上，我用的是19。比较懒，没写兼容啦~

2.继承 AppCompatActivity 类。

3.AndroidManifest.xml 中的主题要加上，继承自 Theme.AppCompat 一类的，这是必须

<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
1
2

4.如果要用沉浸栏，要加上：颜色自定

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
1
2
3

<!-- 附上我的引用的主题 -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>

        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <!--<item name="android:navigationBarColor">@android:color/transparent</item>-->
    </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

最近在转 Android Studio，构建出的项目文件很大，没办法上传 CSDN了，所有上传了 GitHub，如果是Eclipse，自己 copy 一下吧，只是导包比较烦。不知道是我电脑卡，还是 AS 卡。夜深了，撸一把，明天上班了。

源码地址：http://download.csdn.net/detail/u012301841/9716021