Android 侧滑栏
1.导入依赖(build.gradle)
因为需要用到 ” NavigationView “ Android是没有自带的
implementation 'com.android.support:design:29.0.1'
2.布局界面
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:侧滑栏菜单
3.Java代码部分
//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;
}
}
@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);//关闭侧滑栏
在网上找了很久的“点击按钮弹出侧滑栏”的侧滑栏教程,很多都没有讲到这个,真的很难受,最后自己总结了一套简单的侧滑栏综合教程,希望能帮到各位