赞
踩
因为需要用到 ” NavigationView “ Android是没有自带的
implementation 'com.android.support:design:29.0.1'
nav_menu.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/fragment_05" android:title="界面1" /> <item android:id="@+id/fragment_06" android:title="界面2" /> <item android:id="@+id/fragment_07" android:title="界面3" /> <item android:id="@+id/fragment_08" android:title="界面4" /> <item android:id="@+id/fragment_09" android:title="界面5" /> <item android:id="@+id/fragment_10" android:title="界面6" /> </group> </menu>
nav_header.xml——NavigationView布局中的头部布局
<?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" android:padding="10dp" android:background="?attr/colorPrimary"> <ImageView android:id="@+id/icon_image" android:layout_width="100dp" android:layout_height="100dp" android:layout_margin="10dp" android:src="@mipmap/ic_launcher" /> <TextView android:id="@+id/username" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/icon_image" android:layout_margin="10dp" android:text="用户名" android:textColor="@android:color/black" android:textSize="18sp" android:textStyle="bold" /> <TextView android:id="@+id/mail" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/username" android:layout_margin="10dp" android:text="***@qq.com" android:textSize="14sp" android:textColor="@android:color/black"/> </RelativeLayout>
以上代码效果为:一个头像,一个昵称,一个邮箱号;
activity_main——主界面
<?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:custom="http://schemas.android.com/tools" 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:padding="0dp" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="50dp" android:orientation="horizontal" android:background="@color/colorPrimary" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="horizontal" android:layout_gravity="center_vertical"> <ImageButton android:id="@+id/btn_nva" android:layout_width="wrap_content" android:layout_height="match_parent" android:paddingLeft="10dp" android:src="@drawable/nav" android:background="@null" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:orientation="horizontal"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textView_topTitle" android:text="标题" android:textSize="25dp" android:textColor="@color/colorTitle" android:layout_gravity="center_vertical" android:textAlignment="center" custom:ignore="RtlCompat" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:orientation="horizontal"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" android:orientation="horizontal"> </LinearLayout> </LinearLayout> </LinearLayout> <FrameLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1"> </FrameLayout> </LinearLayout> </RelativeLayout> <com.google.android.material.navigation.NavigationView android:id="@+id/nav_view" android:layout_width="200dp" android:layout_height="match_parent" android:layout_gravity="start" app:menu="@menu/nav_menu" app:headerLayout="@layout/nav_header"/> </androidx.drawerlayout.widget.DrawerLayout>
界面效果为:一个顶部标题栏(内含三个模块布局),一个碎片布局,左边为侧滑栏布局
其中主要实现NavigationView(侧滑栏)语句为:
<com.google.android.material.navigation.NavigationView android:id="@+id/nav_view" android:layout_width="200dp" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/nav_header" app:menu="@menu/nav_menu"/> android:layout_gravity:侧滑栏打开位置(start,left,right) app:headerLayout:侧滑栏头部布局 app:menu:侧滑栏菜单
//package com.example.jnjs_10_14; import android.os.Bundle; import android.view.MenuItem; import android.view.View; import android.widget.FrameLayout; import android.widget.ImageButton; import android.widget.TextView; import android.widget.Toast; import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import androidx.core.view.GravityCompat; import androidx.drawerlayout.widget.DrawerLayout; import com.google.android.material.navigation.NavigationView; public class MainActivity extends AppCompatActivity implements View.OnClickListener, NavigationView.OnNavigationItemSelectedListener { private TextView textView_topTitle; private FrameLayout content; private NavigationView nav_view; private ImageButton btn_nva; private DrawerLayout drawer_layout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } private void initView() { textView_topTitle = (TextView) findViewById(R.id.textView_topTitle);//标题 content = (FrameLayout) findViewById(R.id.content);//Fragment碎片布局 //左侧隐藏的NavigationView布局 nav_view = (NavigationView) findViewById(R.id.nav_view); nav_view.setNavigationItemSelectedListener(this);//nva菜单的Item点击事件钮监听 //左上角导航按钮 btn_nva = (ImageButton) findViewById(R.id.btn_nva); btn_nva.setOnClickListener(this);//监听是否按下导航按钮 //activity_main文件内最外层布局 drawer_layout = (DrawerLayout) findViewById(R.id.drawer_layout); drawer_layout.setOnClickListener(this); } @Override public void onClick(View v) { switch (v.getId()){ case R.id.btn_nva://左上角导航按钮 drawer_layout.openDrawer(GravityCompat.START);//设置左边菜单栏显示出来 break; } } /* 侧滑栏导航item点击事件监听 */ @Override public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) { switch (menuItem.getItemId()){ case R.id.fragment_05: Toast.makeText(MainActivity.this, "界面1", Toast.LENGTH_SHORT).show(); //加载碎片 getSupportFragmentManager().beginTransaction().replace(R.id.content,new Fragment_05()).commit(); drawer_layout.closeDrawer(GravityCompat.START);//关闭侧滑栏 break; case R.id.fragment_06: Toast.makeText(MainActivity.this, "界面2", Toast.LENGTH_SHORT).show(); break; case R.id.fragment_07: Toast.makeText(MainActivity.this, "界面3", Toast.LENGTH_SHORT).show(); break; case R.id.fragment_08: Toast.makeText(MainActivity.this, "界面4", Toast.LENGTH_SHORT).show(); break; case R.id.fragment_09: Toast.makeText(MainActivity.this, "界面5", Toast.LENGTH_SHORT).show(); break; case R.id.fragment_10: Toast.makeText(MainActivity.this, "界面6", Toast.LENGTH_SHORT).show(); break; } return false; } }
以上代码实现了点击按钮弹出侧滑栏,对于滑动弹出侧滑栏的代码只需要使用“滑动监听”配合以下代码即可
drawer_layout.openDrawer(GravityCompat.START);//设置左边菜单栏显示出来 drawer_layout.closeDrawer(GravityCompat.START);//关闭侧滑栏
在网上找了很久的“点击按钮弹出侧滑栏”的侧滑栏教程,很多都没有讲到这个,真的很难受,最后自己总结了一套简单的侧滑栏综合教程,希望能帮到各位