Android Material Design 之 NavigationView

DrawerLayout

在講 NavigationView 之前，我們先來回顧一下 DrawerLayout。
DrawerLayout 是抽屜導航控件，在 v4 包中。（Android Studio 創(chuàng)建項目時會自動加入 v7 包，而 v7 包是包含 v4 包的，所以不需要再導入 v4 包了）

布局文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary" />

    </RelativeLayout>

    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/colorAccent"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:scrollbars="none" />
</android.support.v4.widget.DrawerLayout>

DrawerLayout 放到最外面一層。
DrawerLayout 下面放了一個 RelativeLayout 作為主畫面，放了一個 ListView 作為抽屜視圖。

Activity 如下

public class MainActivity extends AppCompatActivity {

    private ActionBarDrawerToggle mDrawerToggle;

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

        DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        ListView drawerList = (ListView) findViewById(R.id.left_drawer);

        drawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
        drawerList.setAdapter(new ArrayAdapter<>(this,
                R.layout.drawer_list_item,
                new String[]{"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n"}));

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("Toolbar");
        setSupportActionBar(toolbar);
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        mDrawerToggle = new ActionBarDrawerToggle(
                this,
                drawerLayout,
                toolbar,
                R.string.drawer_open,
                R.string.drawer_close
        );

        drawerLayout.setDrawerListener(mDrawerToggle);
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        mDrawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        mDrawerToggle.onConfigurationChanged(newConfig);
    }
}

drawer_list_item.xml 如下

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?android:attr/activatedBackgroundIndicator"
    android:gravity="center_vertical"
    android:minHeight="?android:attr/listPreferredItemHeightSmall"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:textAppearance="?android:attr/textAppearanceListItemSmall"
    android:textColor="#fff" />

本例中使用了 Toolbar，所以需要把主題設(shè)置成沒有 ActionBar。

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

運行效果如下

NavigationView

好了，前面都是鋪墊，本文的重點是 NavigationView。
https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-content
這是一個 Material Design 風格的抽屜視圖。Google Play、Gmail 等都是采用這樣的風格。

首先添加 design library

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

布局文件如下：

<?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">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary" />

    </RelativeLayout>

    <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"
        app:menu="@menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>

我們把 ListView 換成了 NavigationView，并設(shè)置了 Navigation 的 headerLayout 和 menu。

drawer_header.xml 如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:scaleType="fitXY"
        android:src="@drawable/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:textStyle="bold"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:text="Header View"
        android:layout_marginTop="50dp"
        android:layout_marginLeft="25dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

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/menu_home"
            android:icon="@drawable/ic_home"
            android:title="Home" />

        <item
            android:id="@+id/menu_settings"
            android:icon="@drawable/ic_settings"
            android:title="Settings" />

        <item android:title="Other">
            <menu>
                <item
                    android:id="@+id/menu_share"
                    android:icon="@drawable/ic_share"
                    android:title="Share" />
                <item
                    android:id="@+id/menu_about"
                    android:icon="@drawable/ic_info_outline"
                    android:title="About" />
            </menu>
        </item>
    </group>
</menu>

我們給 Header 和 Menu 添加點擊事件

final NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);
        navigationView.getHeaderView(0).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                drawerLayout.closeDrawer(navigationView);
                Toast.makeText(MainActivity.this, "Header View is clicked!", Toast.LENGTH_SHORT).show();
            }
        });
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.menu_home:
                        Toast.makeText(MainActivity.this, "Home is clicked!", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_settings:
                        Toast.makeText(MainActivity.this, "Settings is clicked!", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_share:
                        Toast.makeText(MainActivity.this, "Share is clicked!", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_about:
                        Toast.makeText(MainActivity.this, "About is clicked!", Toast.LENGTH_SHORT).show();
                        break;
                }
                drawerLayout.closeDrawer(navigationView);
                return false;
            }
        });

運行效果如下

源碼

https://github.com/teletian/Android/tree/master/MaterialDesignSamples/NavigationView

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • afinalAfinal是一個android的ioc，orm框架 https://github.com/yangf...
    passiontim閱讀 15,842評論 2贊 45
  • 側(cè)滑菜單這種設(shè)計，在很多 APP 上面都有看到，例如大版本3.0之前的知乎、網(wǎng)易新聞、滴滴打車等。有些熱衷于 An...
    GinkWang閱讀 26,317評論 2贊 35
  • 1. Toolbar 1.使用Toolbar，首先需要將系統(tǒng)的ActionBar隱藏，打開res/values／s...
    figure_ai閱讀 1,182評論 1贊 3
  • 一周很快就過去啦！看了看我的bucket list，這周表現(xiàn)很棒:每天都有背單詞，寫東西，聽聽力，學韓語。不知不覺...
    有頭腦的小幸運閱讀 238評論 0贊 0
  • 為iOS設(shè)計 iOS包含了以下主題： 遵從：UI是幫助用戶理解內(nèi)容并與其交互，而不是反之 清晰：任何大小的文字都清...
    糊君閱讀 1,366評論 0贊 17

友情鏈接更多精彩內(nèi)容