NavigationView 的使用


    對於抽屜式菜單界面很多APP都有應用,此前寫抽屜式界面都需要自定義。現在谷歌提供的 導航視圖(NavigationView與抽屜布局(DrawerLayout) 結合使用,能提供很好的側滑交互體驗。要使用NavigationView 首先還是要添加依賴:

        implementation 'com.android.support:design:26.1.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/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

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

        </android.support.v7.widget.Toolbar>

        <TextView
            android:id="@+id/tv_navigation"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="這是點擊了那個導航菜單?"
            android:textSize="20sp" />
    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_header"
        app:menu="@menu/drawer_view">

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

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

    首先說一下NavigationView的屬性:

    1、android:layout_gravity : 表示布局自身在父布局的那個位置。對於Drawerlayout 來說,是指其子布局從那邊滑出                     

         NavigationView 通常設置 android:layout_gravity="start"  

    2、app:headerLayout  : 指定一個頭布局的資源文件

    3、app:menu : 指定一個導航菜單的資源文件

    4、app:ItemBackground : 指定菜單項的背景

    5、app:ItemTextColor : 指定菜單項的文字顏色

    6、app:ItemTextAppearance : 指定菜單項的文字樣式

    7、app:ItemIconTint : 指定菜單項的圖標色彩

   其中navigation_header是一個自定義的頭布局文件,代碼如下:

<?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="150dp"
    android:background="?attr/colorPrimary"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="50dp"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/tv_navigation_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="導航視圖"
        android:textColor="@color/white_FFFFFF"
        android:textSize="20sp" />

</LinearLayout>
    還有我自定義的菜單文件 drawer_view.xml, 注意:要實現兩個組(group)之間有分割線,group得有 id:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:id="@+id/group1"
        android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@mipmap/home"
            android:title="首頁" />
        <item
            android:id="@+id/nav_teleplay"
            android:icon="@mipmap/teleplay"
            android:title="電視劇" />
        <item
            android:id="@+id/nav_movie"
            android:icon="@mipmap/movie"
            android:title="電影" />

    </group>

    <group
        android:id="@+id/group2"
        android:checkableBehavior="single">
        <item
            android:id="@+id/nav_shows"
            android:icon="@mipmap/shows"
            android:title="綜藝" />
        <item
            android:id="@+id/nav_funny"
            android:icon="@mipmap/funny"
            android:title="搞笑" />
    </group>


    <item android:title="其他">
        <menu>
            <item
                android:id="@+id/nav_setting"
                android:icon="@mipmap/setting"
                android:title="設置" />
            <item
                android:id="@+id/nav_onwer"
                android:icon="@mipmap/owner"
                android:title="關於我們" />
        </menu>
    </item>
    
</menu>

    然后這個menu 的圖片資源文件為:             

    最后在代碼中進行功能的實現,代碼如下:    

public class NavigationActivity extends AppCompatActivity {

    private NavigationView mNavigation;
    private TextView tvNavigation;
    private Toolbar mToolbar;
    private ActionBar mActionBar;
    private DrawerLayout mDrawerLayout;
    private View mHeaderView;
    private TextView mtvNavigationTitle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_navigation);
        initView();
        initEvent();
    }

    private void initView() {
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
        mNavigation = (NavigationView) findViewById(R.id.navigation);
        tvNavigation = (TextView) findViewById(R.id.tv_navigation);
        // 獲取頭布局  然后通過頭布局視圖獲取里面的控件
        mHeaderView = mNavigation.getHeaderView(0);
        mtvNavigationTitle = (TextView) mHeaderView.findViewById(R.id.tv_navigation_title);
    }

    private void initEvent() {
        setSupportActionBar(mToolbar);
        mActionBar = (ActionBar) getSupportActionBar();
        mActionBar.setDisplayHomeAsUpEnabled(true);
        mNavigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                String title = item.getTitle().toString();
                tvNavigation.setText(title);
                mtvNavigationTitle.setText(title);
                mDrawerLayout.closeDrawers();
                // 是否將項目設為選中項目
                return true;
            }
        });
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                mDrawerLayout.openDrawer(GravityCompat.START);
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}
        其中需要注意就是setNavigationItemSelectedListener 方法,返回false 是不設置點擊的項目為選中狀態,true 則設置為選中狀態。第二個就是 getHeaderView()  方法,能獲取頭布局文件的控件,進入執行控制操作。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM