Campus Talking 小记(4)

最新推荐文章于 2024-08-09 23:36:21 发布

小浩尤其阔爱

最新推荐文章于 2024-08-09 23:36:21 发布

阅读量2.1k

点赞数 1

分类专栏： Campus Talking 文章标签： android

本文链接：https://blog.csdn.net/weixin_46097862/article/details/124247832

版权

Campus Talking 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Android应用中实现左侧抽屉滑动导航菜单，使用NavigationView替代LinearLayout以提供更好的用户体验。博主详细讲解了布局设置、依赖库的添加、NavigationView的使用，包括header头和menu列表的定义，并给出了Message_Fragment.xml的完整代码示例，最后展示了如何为Toolbar的按钮添加点击监听以打开抽屉菜单。

摘要由CSDN通过智能技术生成

Let us to make our app

各位小伙伴，我们今天又来进行我们的项目编写，我们上一篇是进行一个节目导航页的编写，如果有新的小伙伴，可以对我之前的博客进行查阅，请多多指正。
我们这次来进行，对左边抽屉滑动导航页的编写。老样子，我先把已经做好的项目样子进行一个展示：

请添加图片描述

完成以上方面，我们先做一个需求分析：
我们之所以需要一个左边抽屉菜单的原因如下：

1，由于我们这个采用的用户登陆制，所以需要一个能够修改，阅读自己的个人信息的地方。
2，如果在导航的地方进行设置自己的个人页面，就会导致自己的页面过于冗余，用户体验感不好。
3，设置左边抽屉滑动给用户更加便利的体验。

首先我们进行布局，我们在message.xml中加入DrawerLayout进行布局，

请添加图片描述

里面有两个并列的布局，一下是一个ConstrainLayout.xml布局

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toorbar"
        android:background="@color/grey"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" >
        <Button
            android:id="@+id/personal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="per"

            android:background="@drawable/head_portrait"/>
    </androidx.appcompat.widget.Toolbar>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="消息"
        android:textSize="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />


</androidx.constraintlayout.widget.ConstraintLayout>

现在我们的滑动菜单用的是一个LinearLayout，虽然用起来没有很大的问题，但是如果有更好的控件为什么不用呢？下面就来介绍一下NavigationView，不过要在AS中使用这个控件还需要添加一个依赖库：

打开你app下的build.gradle，在dependencies{}闭包中添加如下依赖

  //添加material库
    implementation 'com.google.android.material:material:1.2.1'

在Message_Fragment.xml里面的代码的编写

<com.google.android.material.navigation.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/nav_header"
    app:menu="@menu/nav_menu"/>

在这我们会发现上面有个headerLayout，menu属性这里分别是header头，一个是下面menu列表，现在就是两个xml的代码。

header头代码：

请添加图片描述

<?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="160dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#1391F8"
    android:fitsSystemWindows="true"
    android:orientation="vertical">




    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/iv_avatar"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="24dp"
        android:layout_marginBottom="30dp"
        android:padding="1dp"
        android:layout_marginEnd="24dp"
        android:src="@drawable/personal"
        app:shapeAppearanceOverlay="@style/circleImageStyle"
        app:strokeColor="#FFF"
        app:strokeWidth="2dp" />
    <!--名称-->
    <TextView
        android:layout_marginTop="16dp"
        android:layout_alignTop="@+id/iv_avatar"
        android:id="@+id/tv_name"
        android:textSize="16sp"
        android:textColor="#FFF"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@+id/iv_avatar"
        android:text="初学者-Study" />
    <!--标签-->
    <TextView
        android:layout_marginTop="8dp"
        android:id="@+id/tv_tip"
        android:textSize="14sp"
        android:layout_below="@+id/tv_name"
        android:textColor="#FFF"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@+id/iv_avatar"
        android:text="Android | Java" />

  </RelativeLayout>

下面的menu选项代码（这个类似代码在之前的导航栏就有编写）：

请添加图片描述

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
    <item android:title="个人设置" />
    <item android:title="主题设置" />
    <item android:title="通知中心" />
    <item android:title="推出登陆" />
</group>
</menu>

把它们整合在一起到下面的Message_Fragment.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/drawmenu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".menu.MessageFragment">

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toorbar"
        android:background="@color/grey"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints" >
        <Button
            android:id="@+id/personal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="per"

            android:background="@drawable/head_portrait"/>
    </androidx.appcompat.widget.Toolbar>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="消息"
        android:textSize="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />


</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/nav_header"
    app:menu="@menu/nav_menu"/>
</androidx.drawerlayout.widget.DrawerLayout>

再根据Message_fragment中的添加的Toolbar的头中添加一个Button，设置监听：

请添加图片描述

      <Button
            android:id="@+id/personal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="per"

            android:background="@drawable/head_portrait"/>

监听代码如下：

package com.example.campus_talk.menu;

import androidx.appcompat.widget.Toolbar;
import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.lifecycle.ViewModelProvider;

import android.os.Bundle;

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

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;

import com.example.campus_talk.R;

public class MessageFragment extends Fragment {

    private MessageViewModel mViewModel;
    private  DrawerLayout drawerLayout;
    Button button;
    private Toolbar toolbar;


    public static MessageFragment newInstance() {
        return new MessageFragment();
    }

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.message_fragment, container, false);
        button=view.findViewById(R.id.personal);

   drawerLayout=view.findViewById(R.id.drawmenu);
//        toolbar=view.findViewById(R.id.tootbar);
        return view;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        mViewModel = new ViewModelProvider(this).get(MessageViewModel.class);
        button.setOnClickListener(view -> drawerLayout.openDrawer(GravityCompat.START));
        // TODO: Use the ViewModel
    }

}

（前几天断更了，望各位大大原谅）越努力越幸运，相信自己！！！

小浩尤其阔爱

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Campus Talking 小记(4)

Let us to make our app各位小伙伴，我们今天又来进行我们的项目编写，我们上一篇是进行一个节目导航页的编写，如果有新的小伙伴，可以对我之前的博客进行查阅，请多多指正。我们这次来进行，对左边抽屉滑动导航页的编写。老样子，我先把已经做好的项目样子进行一个展示：完成以上方面，我们先做一个需求分析：我们之所以需要一个左边抽屉菜单的原因如下：1，由于我们这个采用的用户登陆制，所以需要一个能够修改，阅读自己的个人信息的地方。2，如果在导航的地方进行设置自己的个人页面，就会导致自己的页
复制链接

扫一扫

专栏目录