自定义Navigation Draw Activity

自定义Navigation Drawer Activity步骤，具体代码加详细解释：

①导入包：

implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:design:28.0.0'

②右击drawable，new→vector asset选择图标，改名字（目的是导航选择相应的图标）

③res→new→Android Source File→前两行改为menu

④menu文件夹→new→menu resource file（draw_menu.xml），然后rebuild project

<?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/nav_message"
         android:icon="@drawable/ic_message"
         android:title="message"
     />
     <item
         android:id="@+id/nav_chat"
         android:icon="@drawable/ic_chat"
         android:title="chat"/>
     <item
         android:id="@+id/nav_profile"
         android:icon="@drawable/ic_profile"
         android:title="profile"/>
 </group>

 <item android:title="communicate">
     <menu>
         <item
             android:id="@+id/nav_share"
             android:icon="@drawable/ic_share"
             android:title="share"/>
         <item
             android:id="@+id/nav_send"
             android:icon="@drawable/ic_send"
             android:title="send"/>
     </menu>
 </item>
</menu>

⑤layout activity_main.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/drawer_layout"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity"
    tools:openDrawer="start">

    //主界面要加最顶部绿色的那一块工具栏以及底下的页面
    <LinearLayout
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:orientation="vertical">
        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            android:id="@+id/toolbar"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            android:elevation="4dp"
            />

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

    </LinearLayout>

    //导航栏要加入导航头和导航的主要内容（app部分）
    <com.google.android.material.navigation.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:id="@+id/nav_view"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_menu"/>

</androidx.drawerlayout.widget.DrawerLayout>

⑥fragment_chat.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="match_parent"
    android:background="#0099FF">

    //设置chat页面
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Chat Fragment"
        android:textSize="30sp"
        android:layout_centerInParent="true"
        />

</RelativeLayout>

⑦fragment_message.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="match_parent"
    android:background="#FF0000">

    //设置message页面
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Message Fragment"
        android:textSize="30sp"
        android:layout_centerInParent="true"
        />

</RelativeLayout>

⑧fragment_profile.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="match_parent"
    android:background="#00FF33">

    //设置profile页面
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Profile Fragment"
        android:textSize="30sp"
        android:layout_centerInParent="true"
        />

</RelativeLayout>

⑨nav_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:gravity="bottom"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:layout_height="176dp"
    android:background="@color/colorAccent">

    //设置导航头
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher_round"
        />

    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:paddingTop="8dp"
        android:text="Coding in flow"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="个性签名"/>

</LinearLayout>

⑩ChatFragment.java

package com.example.rubbishrecyclea;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class ChatFragment extends Fragment {
    
    

    //设置跳转到chat页面
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    
    
        return inflater.inflate(R.layout.fragment_chat,container,false);
    }
}

11.MessageFragment.java

package com.example.rubbishrecyclea;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class MessageFragment extends Fragment {
    
    

    //设置跳转到message页面
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    
    
        return inflater.inflate(R.layout.fragment_message,container,false);
    }
}

12.ProfileFragment.java

package com.example.rubbishrecyclea;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class ProfileFragment extends Fragment {
    
    

    设置跳转到Profile页面
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    
    
        return inflater.inflate(R.layout.fragment_profile,container,false);
    }
}

13.MainActicity.java

package com.example.rubbishrecyclea;

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;
/*
B部分必需，A部分相当于美化
*/
public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {
    
    

    private DrawerLayout drawer;

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

        //设置主页面的绿色工具栏（B1）
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        //添加导航头（B2）
        drawer = findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this,drawer,toolbar,R.string.navigation_drawer_open,R.string.navigation_drawer_close);
        drawer.addDrawerListener(toggle);
        toggle.syncState();

        //设置导航栏的点击跳转（A1）
        NavigationView navigationView = findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);

        //设置刚打开的主界面为message的页面（A3）
        if(savedInstanceState==null) {
    
    
            getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container, new MessageFragment()).commit();
            navigationView.setCheckedItem(R.id.nav_message);
        }
    }

    @Override
    public void onBackPressed() {
    
    

        //如果导航栏已打开，点击后关闭；若已关闭，则点击后打开
        if(drawer.isDrawerOpen(GravityCompat.START)){
    
    
            drawer.closeDrawer(GravityCompat.START);
        }else {
    
    
            super.onBackPressed();
        }
    }

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
    
    

        //根据导航栏点击的不同跳转到不同的页面（A2）
        switch (menuItem.getItemId()){
    
    
            case R.id.nav_message:
                getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,new MessageFragment()).commit();
                break;
            case R.id.nav_chat:
                getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,new ChatFragment()).commit();
                break;
            case R.id.nav_profile:
                getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,new ProfileFragment()).commit();
                break;
            case R.id.nav_send:
                Toast.makeText(getApplicationContext(),"send",Toast.LENGTH_SHORT).show();
                break;
            case R.id.nav_share:
                Toast.makeText(getApplicationContext(),"share",Toast.LENGTH_SHORT).show();
                break;
        }

        //点击导航栏的某一项后关闭导航栏
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }
}

自定义Navigation Draw Activity

猜你喜欢