Android 中NavigationView的使用

今天我們要介紹的是NavigationView的使用,他是Design包是5.0之後出現的新特性,其包含了許多新具有特色的控件。其中還有TabLayout、RecyclerView、CardView、FloatActionButton、Snackbar、TextInputLayout,還有協調者佈局CoordinatorLayout等,有興趣的可以自己研究一下。

先看一下效果圖:

這裏寫圖片描述

一、首先添加依賴

這裏寫圖片描述

二、NavigationView的佈局文件,需要定義在DrawerLayout中。DrawerLayout爲根標籤。
首先看一下佈局文件 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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.administrator.navigationviewdemo.MainActivity">


<RelativeLayout
    android:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/baby"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="afanbaby"
        android:textColor="#B0E2FF"
        android:textSize="40sp" />

</RelativeLayout>

<android.support.design.widget.NavigationView
    android:id="@+id/navigationView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="left"
    android:fitsSystemWindows="true"
    android:scrollbars="none"
    app:headerLayout="@layout/head_view"
    app:menu="@menu/menu_navigation_main" />

</android.support.v4.widget.DrawerLayout>

1.介紹NavigationView屬性:

//顯示
NavigationView從哪邊彈出(這裏是左邊彈出)
android:layout_gravity="left"
//添加一個頭佈局(xml文件,這裏我們的頭部中顯示了一張圖片)
app:headerLayout="@layout/head_view" 
//NavigationView中的每一個item,它是一個menu.
app:menu="@menu/menu_navigation_main" 

三、head_view.xml(頭佈局):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/head_view"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="fitXY"
        android:src="@drawable/head_iv" />
</LinearLayout>

四、menu_navigation_main.xml(menu文件):

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--,想在NavigationView的item之間添加上一條分隔線呢,只需要在menu中將相應的item放到一個group中,並給該group取一個id即可-->
    <item
        android:id="@+id/item1"
        android:icon="@mipmap/ic_launcher"
        android:title="文件" />
    <group android:id="@+id/item12">
        <item
            android:id="@+id/item2"
            android:icon="@mipmap/ic_launcher"
            android:title="錢包" />
    </group>
    <item
        android:id="@+id/item3"
        android:icon="@mipmap/ic_launcher"
        android:title="相冊" />
    <item
        android:id="@+id/item4"
        android:icon="@mipmap/ic_launcher"
        android:title="收藏" />

    <item
        android:icon="@mipmap/ic_launcher"
        android:title="聊天工具">

        <menu>
            <group android:checkableBehavior="single">

                <item
                    android:id="@+id/item5"
                    android:icon="@mipmap/ic_launcher"
                    android:title="qq" />
                <item
                    android:id="@+id/item6"
                    android:icon="@mipmap/ic_launcher"
                    android:title="微信" />
                <item
                    android:id="@+id/item7"
                    android:icon="@mipmap/ic_launcher"
                    android:title="陌陌" />

            </group>


        </menu>
    </item>
    <item
        android:icon="@mipmap/ic_launcher"
        android:title="其他操作">

        <menu>
            <group android:checkableBehavior="single">

                <item
                    android:id="@+id/item8"
                    android:icon="@mipmap/ic_launcher"
                    android:title="打電話" />
                <item
                    android:id="@+id/item9"
                    android:icon="@mipmap/ic_launcher"
                    android:title="發短信" />
                <item
                    android:id="@+id/item10"
                    android:icon="@mipmap/ic_launcher"
                    android:title="打開相機" />
                <item
                    android:id="@+id/item11"
                    android:icon="@mipmap/ic_launcher"
                    android:title="打開文件" />

            </group>

        </menu>
    </item>
</menu>

五、MainActivity中使用:


public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private NavigationView navigationView;
    private DrawerLayout drawerLayout;
    private View headView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        navigationView = (NavigationView) findViewById(R.id.navigationView);
        //去掉navigationView的滾動條
        disableNavigationViewScrollbars(navigationView);
         //添加頭佈局
        headView = navigationView.getHeaderView(0);
        headView.setOnClickListener(this);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
        //設置menu中的圖標是正常的顏色
        navigationView.setItemIconTintList(null);

        // 這裏我們可以設置導航菜單寬度(設置爲屏幕的二分之一)
//        ViewGroup.LayoutParams params = navigationView.getLayoutParams();
//        params.width = getResources().getDisplayMetrics().widthPixels * 1 / 2;
//        navigationView.setLayoutParams(params);
        //navigationView的菜單條目的點擊監聽  
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                switch (item.getItemId()) {
                    case R.id.item1:
                        Toast.makeText(MainActivity.this, "點擊了一個item", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.item2:
                        Toast.makeText(MainActivity.this, "點擊了二個item", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.item3:
                        Toast.makeText(MainActivity.this, "點擊了三個item", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.item4:
                        Toast.makeText(MainActivity.this, "點擊了四個item", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.item5:
                        Toast.makeText(MainActivity.this, "點擊了五個item", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.item6:
                        Toast.makeText(MainActivity.this, "點擊了六個item", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.item7:
                        Toast.makeText(MainActivity.this, "點擊了七個item", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.item8:
                        Toast.makeText(MainActivity.this, "點擊了八個item", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.item9:
                        Toast.makeText(MainActivity.this, "點擊了九個item", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.item10:
                        Toast.makeText(MainActivity.this, "點擊了十個item", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.item11:
                        Toast.makeText(MainActivity.this, "點擊了十一個item", Toast.LENGTH_SHORT).show();
                        break;
                }
                //設置item選中
                item.setCheckable(true);
                //關閉抽屜,或者drawerLayout.closeDrawer(navigationView);
                drawerLayout.closeDrawers();
                return true;
            }
        });
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.head_view:
                Toast.makeText(MainActivity.this, "點擊了頭佈局", Toast.LENGTH_SHORT).show();
                //關閉抽屜,或者drawerLayout.closeDrawer(navigationView);
                drawerLayout.closeDrawers();
                break;
        }
    }

    //去掉navigationView的滾動條(這個滾動條不在NavigationView中,而是在他的child—NavigationMenuView中,所以解決辦法就是對NavigationView調用 下面這個方法:)
    private void disableNavigationViewScrollbars(NavigationView navigationView) {
        if (navigationView != null) {
            NavigationMenuView navigationMenuView = (NavigationMenuView) navigationView.getChildAt(0);
            if (navigationMenuView != null) {
                navigationMenuView.setVerticalScrollBarEnabled(false);
            }
        }
    }

}

demo下載地址

http://download.csdn.net/detail/afanbaby/9908031

本人菜鳥一個,有什麼不對的地方希望大家指出評論,大神勿噴,希望大家一起學習進步!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章