Toobar，DrawerLayout，NavigationVIew的简单使用（部分）

灰太狼@

已于 2022-11-24 15:06:42 修改

阅读量601

点赞数 1

文章标签： android android studio ide

于 2022-08-17 10:56:34 首次发布

本文链接：https://blog.csdn.net/weixin_58124208/article/details/126378823

版权

一.Toobar的简单使用：

我们要使用Toolbar，那么就得把原有的ActionBar隐藏起来

在manifest文件<application>里找到theme这个属性，按住ctrl+左键进去修改如下

 <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Demo_Toolbar" ---这里
        tools:targetApi="31">

  <style name="Theme.Demo_Toolbar" parent="Theme.AppCompat.Light.NoActionBar">

然后修改我们activity.xml里面的内容，将我们的toolbar引入进去

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:id="@+id/bar1"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    
</FrameLayout>

最后修改我们的Java代码

package com.example.demo_toolbar;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

        Toolbar toolbar = findViewById(R.id.bar1);
        setSupportActionBar(toolbar);

    }
}

 <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Demo_Toolbar"
        tools:targetApi="31">
        <activity
            android:label="测试"  //这是可以修改我们toolbar的标题内容
            android:name=".MainActivity"
            android:exported="true">

这样子我们就完成了toolbar代替原有的Actionbar了

接着把menu也引入进来

首先在res目录下创建一个新的Directory，然后创建一个menu文件，在这个文件里创建一个新的Menu resourse file,再创建一个关于我们toolbar的xml文件并添加内容

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item android:id="@+id/back"
        android:icon="@drawable/complete"
        android:title="Backup"
        app:showAsAction="always"/>

    <item android:id="@+id/delete"
        android:icon="@drawable/info"
        android:title="delete"
        app:showAsAction="ifRoom"/>

    <item android:id="@+id/setting"
        android:icon="@drawable/setting"
        android:title="setting"
        app:showAsAction="never"/>

</menu>

修改Java代码

package com.example.demo_toolbar;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.core.view.GravityCompat;

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        Toolbar toolbar = findViewById(R.id.bar1);
        setSupportActionBar(toolbar);

    }

    public boolean onCreateOptionsMenu(Menu menu){
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {

        switch (item.getItemId()){
            
            case R.id.back:
                Toast.makeText(this, "1", Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this, "2", Toast.LENGTH_SHORT).show();
                break;
            case R.id.setting:
                Toast.makeText(this, "3", Toast.LENGTH_SHORT).show();
                break;
            default:break;
        }

        return true;
    }
    
}

运行

当然了如果你觉得三个按钮不知道布局怎么来的，你可以去了解 item 里面 app:showAsAction="always"这个属性

二.DrawerLayout实现滑动效果

首先修改我们activity.xml文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<androidx.drawerlayout.widget.DrawerLayout
    android:id="@+id/draw_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="left">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:id="@+id/bar1"
            android:background="@color/teal_200"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    </FrameLayout>
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:text="曼联曼联"
        android:textColor="@color/black"
        android:background="#fff"/>


</androidx.drawerlayout.widget.DrawerLayout>

</FrameLayout>

然后修改我们的Java代码

package com.example.demo_toolbar;

import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBar;
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.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        Toolbar toolbar = findViewById(R.id.bar1);
        setSupportActionBar(toolbar);


        drawerLayout = findViewById(R.id.draw_layout);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar!=null){
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.sg1);
        }
    }

    public boolean onCreateOptionsMenu(Menu menu){
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(@NonNull MenuItem item) {

        switch (item.getItemId()){
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                break;

            case R.id.back:
                Toast.makeText(this, "1", Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this, "2", Toast.LENGTH_SHORT).show();
                break;
            case R.id.setting:
                Toast.makeText(this, "3", Toast.LENGTH_SHORT).show();
                break;
            default:break;
        }

        return true;
    }

}

运行向右滑动

三.NavigationVIew

看着上面只有一个textview非常单调，所以我们打算做一个好看一点的

首先在app/build.gradle里面添加

    implementation 'de.hdodenhof:circleimageview:2.1.0'
    implementation 'com.github.bumptech.glide:glide:4.12.0'

在menu下添加一个新的nav_menu.xml文件。内容如下

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">


    <item android:id="@+id/back"
        android:icon="@drawable/cc"
        android:title="Backup"
        app:showAsAction="always"/>

    <item android:id="@+id/delete"
        android:icon="@drawable/bb"
        android:title="delete"
        app:showAsAction="ifRoom"/>

    <item android:id="@+id/setting"
        android:icon="@drawable/aa"
        android:title="setting"
        app:showAsAction="never"/>

</menu>

然后再layout下添加一个新的布局nav_handle.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="180dp"
    android:padding="10dp"
    android:background="?attr/colorPrimary">

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:id="@+id/icon_image"
        android:src="@drawable/ee"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/mail"
        android:layout_alignParentBottom="true"
        android:text="djisjsa@lsg.com"
        android:textSize="14sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:layout_above="@id/mail"
        android:id="@+id/username"
        android:text="黎明"
        android:textSize="14sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>


</RelativeLayout>

最后在我们的mainactivity里面替换我们的textview

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<androidx.drawerlayout.widget.DrawerLayout
    android:id="@+id/draw_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="left">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:id="@+id/bar1"
            android:background="@color/teal_200"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    </FrameLayout>


//这就是我们替换的
    <com.google.android.material.navigation.NavigationView
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:id="@+id/nan_view"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"
        />



</androidx.drawerlayout.widget.DrawerLayout>

</FrameLayout>

运行

接下来就是如何对这个界面的事件进行监听

修该我们的Java代码，在oncreate方法里面添加

NavigationView navigation = findViewById(R.id.nan_view);
        navigation.setCheckedItem(R.id.back);//这表示我们打开界面的默认选项，也可以不设置
        navigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                drawerLayout.closeDrawers();//这表示只要我们点击事件就关闭滑动菜单
                return true;
            }
        });