Android 侧滑栏-NavigationView的使用(全网最简单明了)

   日期:2020-10-16     浏览:89    评论:0    
核心提示: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/a

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);//关闭侧滑栏

在网上找了很久的“点击按钮弹出侧滑栏”的侧滑栏教程,很多都没有讲到这个,真的很难受,最后自己总结了一套简单的侧滑栏综合教程,希望能帮到各位

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服