Android 《NavigationView》

2017-10-18 本文已影响45人泅渡者

NavigationView

官方翻译
在通用导航范例中，我们讨论了Android应用程序中可用的各种导航结构。其中最灵活的是导航抽屉。在2015年I / O大会期间，Google发布了NavigationView，这使得它比以前的更容易创建。
随着Android 5.0 Lollipop的发布，material design风格的导航抽屉跨越屏幕的全高，并显示在ActionBar上，并与半透明的StatusBar重叠。阅读材料material design风格导航抽屉文件，了解您的导航抽屉样式的规格。

我们先看下面两个图：

image.png

这两个图正是由于风格的不同，但是并不影响NavigationView的使用。

配置

compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.android.support:design:25.3.1'

使用
这个案例中我们是将ToolBar与DrawerLayout结合，
不了解的可以点击进去看看：ToolBar

创建布局：activity_nav.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- This DrawerLayout has two children at the root  -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include
        layout="@layout/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>


    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <FrameLayout
                android:id="@+id/flContent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
        </LinearLayout>

        <android.support.design.widget.NavigationView
            android:id="@+id/nvView"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@android:color/white"
            app:headerLayout="@layout/nav_header"
            app:menu="@menu/drawer_view"/>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>

注：如果我们想要覆盖ToolBar 的样式那么跟布局就必须是DrawerLayout同时要将toolbar移至FrameLayout上面。

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>

drawer_view.xml 抽屉菜单布局

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_first_fragment"
            android:icon="@drawable/lable_one"
            android:checked="true"
            android:title="First" />
        <item
            android:id="@+id/nav_second_fragment"
            android:icon="@drawable/lable_two"
            android:title="Second" />
        <item
            android:id="@+id/nav_third_fragment"
            android:icon="@drawable/lable_three"
            android:title="Third" />
        <item android:title="Sub items">
            <menu>
                <group android:checkableBehavior="single">
                    <item
                        android:id="@+id/nav_four"
                        android:icon="@drawable/lable_two"
                        android:title="Sub item 1" />
                    <item
                        android:id="@+id/nav_five"
                        android:icon="@drawable/lable_three"
                        android:title="Sub item 2" />
                </group>
            </menu>
        </item>
    </group>
</menu>

创建Activity ：NavigationViewSimple.class

/**
 * Created by 泅渡者
 * Created on 2017/10/18.
 */

public class NavigationViewSimple extends AppCompatActivity {
    private DrawerLayout mDrawer;
    private Toolbar toolbar;
    private NavigationView nvDrawer;
    private ActionBarDrawerToggle toggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_nav);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        // Find our drawer view
        mDrawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        toggle = setupDrawerToggle();

        nvDrawer = (NavigationView) findViewById(R.id.nvView);
        mDrawer.addDrawerListener(toggle);
        setupDrawerContent(nvDrawer);


    }

    private ActionBarDrawerToggle setupDrawerToggle() {
        return new ActionBarDrawerToggle(this, mDrawer, toolbar, R.string.drawer_open, R.string.drawer_close);
    }

    private void setupDrawerContent(NavigationView navigationView) {
        navigationView.setNavigationItemSelectedListener(
                new NavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(MenuItem menuItem) {
                        selectDrawerItem(menuItem);
                        return true;
                    }
                });
    }

    public void selectDrawerItem(MenuItem menuItem) {

        Fragment fragment = null;
        switch (menuItem.getItemId()) {
            case R.id.nav_first_fragment:
                fragment = PageFragment.newInstance(1);
                break;
            case R.id.nav_second_fragment:
                fragment = PageFragment.newInstance(2);
                break;
            case R.id.nav_third_fragment:
                fragment = PageFragment.newInstance(3);
                break;
            case R.id.nav_four:
                fragment = PageFragment.newInstance(4);
                break;
            default:
                fragment = PageFragment.newInstance(5);
        }
        // 插入Fragment
        FragmentManager fragmentManager = getSupportFragmentManager();
        fragmentManager.beginTransaction().replace(R.id.flContent, fragment).commit();

        // 改变状态
        menuItem.setChecked(true);
        // 改变标题
        setTitle(menuItem.getTitle());
        // 关闭抽屉
        mDrawer.closeDrawers();
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (toggle.onOptionsItemSelected(item)) {
            return true;
        }
        switch (item.getItemId()) {
            case android.R.id.home:
                mDrawer.openDrawer(GravityCompat.START);
                return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // 同步切换状态恢复实例后状态
        toggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        //通过任何配置更改的抽屉
        toggle.onConfigurationChanged(newConfig);
    }
}

这里有两个比较少用的方法：
onPostCreate()：当Activity彻底运行起来之后回调onPostCreate方法.
onConfigurationChanged():一半是屏幕发生横竖屏切换时调用，这里用来通知ActionBarDrawerToggle ，改变自己状态。
同时为了看到侧滑菜单的点击效果，我这里创建了一个PageFragment，这个大家可以随意创建。我就不多写了。
好了我们看下运行后的效果。

1.gif

以上就是对Fragment Navigation Drawer的应用。代码均已上传。
需要代码点击获取

Android 《NavigationView》

NavigationView

注：如果我们想要覆盖ToolBar 的样式那么跟布局就必须是DrawerLayout同时要将toolbar移至FrameLayout上面。

猜你喜欢

热点阅读