如何实现导航抽屉布局？

Posted 2023-04-13

技术标签:

【中文标题】如何实现导航抽屉布局？【英文标题】：How to implement a Navigation Drawer layout? 【发布时间】：2020-07-11 03:46:31 【问题描述】：

我想实现一个导航抽屉布局，我想使用一个切换栏来打开或关闭导航抽屉。

你能把主要活动java和xml文件的代码发给我吗？

【问题讨论】：

【参考方案1】：

我做了一个可以正常工作的新代码：

Navigation_Header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    android:background="#72B569"
    android:gravity="bottom"
    android:orientation="vertical"
    android:padding="10dp">

    <ImageView
        android:layout_
        android:layout_
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:layout_
        android:layout_
        android:paddingTop="10dp"
        android:text="Nazmul Islam"
        android:textColor="#fff"
        android:textSize="18dp"
        android:textStyle="bold" />

    <TextView
        android:layout_
        android:layout_
        android:text="nazmul@voltagelab.com"
        android:textColor="#fff"
        android:textSize="15dp" />
</LinearLayout>

Navigation_menu.xml

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

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/homes"
            android:icon="@drawable/ic_home_black_24dp"
            android:title="Home" />

        <item
            android:id="@+id/work"
            android:icon="@drawable/ic_work_black_24dp"
            android:title="Work" />
    </group>

    <item android:title="Communication">

        <menu>
            <item
                android:id="@+id/contact"
                android:icon="@drawable/ic_contact_phone_black_24dp"
                android:title="Contact" />
            <item
                android:id="@+id/share"
                android:icon="@drawable/ic_share_black_24dp"
                android:title="Share" />

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

值样式.xml

<resources>
    <!-- Base application theme. -->
    <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>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
</resources>

Manifext.xml

<activity android:name=".MainActivity"
            android:theme="@style/AppTheme.NoActionBar">

Activitymain.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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/drawer"
    android:layout_
    android:layout_
    android:fitsSystemWindows="true"
    tools:context=".MainActivity"
    tools:openDrawer="start">

    <LinearLayout
        android:layout_
        android:layout_
        android:orientation="vertical">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_
            android:layout_
            android:background="@color/colorPrimary"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" />

        <FrameLayout
            android:id="@+id/fragment_frame"
            android:layout_
            android:layout_ />
    </LinearLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigation_view"
        android:layout_
        android:layout_
        app:headerLayout="@layout/nav_header"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:menu="@menu/nav_menu"/>
</androidx.drawerlayout.widget.DrawerLayout>

MainActivity.java

package com.example.navigationscroll;

import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBarDrawerToggle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;

import android.os.Bundle;
import android.view.MenuItem;
import android.widget.Toast;

import com.google.android.material.navigation.NavigationView;

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener 

    Toolbar toolbar;
    DrawerLayout drawerLayout;
    ActionBarDrawerToggle toggle;
    NavigationView navigationView;


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

        toolbar = findViewById(R.id.toolbar);
        drawerLayout = findViewById(R.id.drawer);
        navigationView = findViewById(R.id.navigation_view);

        setSupportActionBar(toolbar);

        toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.nav_drawer_open, R.string.nav_drawer_close);

        drawerLayout.addDrawerListener(toggle);

        toggle.syncState();

        navigationView.setNavigationItemSelectedListener(this);

//------- Rotate not refresh new state --------------------

        if (savedInstanceState==null)
            getSupportFragmentManager().beginTransaction().replace(R.id.fragment_frame,
                    new first()).commit();
        
    

    @Override
    public void onBackPressed() 
        if (drawerLayout.isDrawerOpen(GravityCompat.START)) 
            drawerLayout.closeDrawer(GravityCompat.START);
         else 
            super.onBackPressed();
        
    

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) 
        switch (menuItem.getItemId()) 
            case R.id.homes:
                getSupportFragmentManager().beginTransaction().replace(R.id.fragment_frame,
                        new first()).commit();
                break;
            case R.id.work:
                getSupportFragmentManager().beginTransaction().replace(R.id.fragment_frame,
                        new second()).commit();
                break;
            case R.id.share:
                Toast.makeText(this, "Share Press", Toast.LENGTH_SHORT).show();
                break;
        

        drawerLayout.closeDrawer(GravityCompat.START);
        return true;

【讨论】：

【参考方案2】：

我用了一些简单的代码：

res>new>android资源文件>创建nav_menu

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

    <group android:checkableBehavior="single">
        <item android:id="@+id/home_id"
            android:title="Home"
            android:icon="@drawable/home"/>

        <item android:id="@+id/profile_id"
            android:title="Profile"
            android:icon="@drawable/contact"/>

        <item android:id="@+id/chat_id"
            android:title="Chat"
            android:icon="@drawable/chat"/>
    </group>

    <item android:title="Communicate">
        <menu>
            <item android:id="@+id/home_share"
                android:title="Share"
                android:icon="@drawable/share"/>

            <item android:id="@+id/contact"
                android:title="Contact"
                android:icon="@drawable/person"/>
        </menu>
    </item>
</menu>

导航标题

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    android:background="#A15858"
    android:orientation="vertical"
    android:padding="10dp"
    >
    <ImageView
        android:src="@mipmap/ic_launcher"
        android:layout_
        android:layout_/>

    <TextView
        android:layout_
        android:layout_
        android:text="Nazmul Islam"
        android:textColor="#ffffff"
        android:textStyle="bold"
        android:paddingTop="10dp"/>
    <TextView
        android:layout_
        android:layout_
        android:text="nazmulisrony@gmail.com"
        android:textColor="#fff"/>


</LinearLayout>

字符串 xml

<resources>
    <string name="app_name">Navigation Drawer</string>
    <string name="open_string">Open</string>
    <string name="close_string">Close</string>
</resources>

活动主要

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_
    tools:openDrawer="start"
    android:id="@+id/drawer"
    tools:context=".MainActivity">

    <com.google.android.material.navigation.NavigationView
        android:layout_
        android:layout_
        android:id="@+id/navigationid"
        app:menu="@menu/nav_menu_layout"
        android:background="#ffffff"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"/>

</androidx.drawerlayout.widget.DrawerLayout>

现在添加 MainActivity

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener 

    DrawerLayout drawerLayout;
    ActionBarDrawerToggle toggle;
    NavigationView navigationView;
    Intent intent;

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

        navigationView=findViewById(R.id.navigationid);

        navigationView.setNavigationItemSelectedListener(this);

        drawerLayout=findViewById(R.id.drawer);
        toggle=new ActionBarDrawerToggle(this,drawerLayout,R.string.open_string,R.string.close_string);

        drawerLayout.addDrawerListener(toggle);
        toggle.syncState();

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

然后添加这两件事

@Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) 
        if (toggle.onOptionsItemSelected(item))
            return true;
        
        return super.onOptionsItemSelected(item);
    

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) 
        if (menuItem.getItemId()==R.id.home_id)
            intent=new Intent(this,Home.class);
            startActivity(intent);
        
        return false;

【讨论】：

以上是关于如何实现导航抽屉布局？的主要内容，如果未能解决你的问题，请参考以下文章

如何实现一个滑动整个活动内容的 Android 导航抽屉？

在 Android Tv 中，如何实现图标始终可见的标题（导航抽屉）

如何在颤动的底部导航栏中添加抽屉？

如何在抽屉导航器中的屏幕反应导航中设置自定义边框半径和 zIndex？

如何实现从右侧打开抽屉菜单

如何在没有片段的情况下使用导航抽屉？