Toolbar与DrawerLayout

移动开发 2023-06-05 05:56:36 阅读次数: 0

Toolbar

还记得我们每次打开的程序的标题栏吗？那不是 toolbar 做的,那是 actionbar 做的, Toolbar 可以说是Actionbar 的升级版了。 Toolbar 不仅有 Actionbar 的所有功能,而且还更加灵活.在项目运行在虚拟机上时，都可以看见屏幕上方有一个栏目（下图红框圈出的部分），此为系统默认的DarkActionBar ，可在 themes.xml 中查看。

是用于替换该栏目的，以便于我们更灵活的编辑栏目内容，所以我们先将主题文件中的 DarkActionBar改为 NoActionBar ，再次运行就可以发现顶端的栏目不见了

常用属性

属性
app:navigationIcon 导航图标，一般情况下放回退按钮，点击退回上一个界面。
android:background 工具栏颜色
app:title 标题
app:titleTextColor 标题文字颜色
app:titleMarginStart 标题与左侧间距
app:subtitle 子标题
app:subtitleTextColor 子标题颜色
app:logo 工具栏logo

案例及效果

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/purple_500"
            app:title="Sirwz"
            app:titleTextColor="@color/white"
            app:titleMarginStart="10dp"
            app:subtitle="在线"
            app:subtitleTextColor="@color/purple_200"
            app:logo="@mipmap/shequ"
         	app:navigationIcon="@drawable/ic_baseline_chevron_left_24"
            app:menu="@menu/mains"/>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PUHvfJ19-1660120311772)(C:/Users/Administrator/Desktop/%25E7%25AC%2594%25E8%25AE%25B0%25E6%2595%25B4%25E7%2590%2586/%25E7%25AC%2594%25E8%25AE%25B0%25E5%259B%25BE%25E7%2589%2587/QQ%25E6%2588%25AA%25E5%259B%25BE20220810150350.png)]

溢出菜单

首先我们在res的menu目录中创建一个menu资源文件 toolbar_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:add="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/yhs"
        android:title="用户"
        add:showAsAction="never"/>
    <item
        android:id="@+id/szs"
        android:title="设置"
        add:showAsAction="never"/>
    <item
        android:id="@+id/qts"
        android:title="其他"
        add:showAsAction="never"/>
</menu>

在 Toolbar.xml文件中添加

app:menu="@menu/toolbar_menu

溢出菜单的点击事件

  toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
    
    
            @Override
            public boolean onMenuItemClick(MenuItem item) {
    
    
                if (item.getItemId()==R.id.yhs)
                    Toast.makeText(MainActivity.this,"用户按钮被点击",Toast.LENGTH_SHORT).show();
                if (item.getItemId()==R.id.szs)
                    Toast.makeText(MainActivity.this,"设置按钮被点击",Toast.LENGTH_SHORT).show();
                if (item.getItemId()==R.id.qts)
                    Toast.makeText(MainActivity.this,"其他按钮被点击",Toast.LENGTH_SHORT).show();
                return false;
            }
        });

DrawerLayout 滑动菜单

2.1 基本框架

布局----在这个布局中允许放入两个直接子控件

屏幕中显示的内容

滑动菜单中显示的内容

   <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
       <!--主屏幕中显示的内容-->
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/purple_500"
            app:title="Sirwz"
            app:titleTextColor="@color/white"
            app:titleMarginStart="10dp"
            app:subtitle="在线"
            app:subtitleTextColor="@color/purple_200"
            app:logo="@mipmap/shequ"
            app:navigationIcon="@drawable/ic_baseline_chevron_left_24"
            app:menu="@menu/mains"/>
       <!--滑动菜单中的内容-->
       <!--android:layout_gravity="start"指定了滑动菜单在屏幕的哪边 start是指系统语言是从左到右读就在右边，反之就在左边-->
       <!--android:layout_gravity="start"必须要指定，指定了的就是滑动菜单--> <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/fab"
            android:layout_gravity="bottom|end"
            android:layout_margin="15dp"
            android:elevation="10dp"
            android:src="@drawable/ic_baseline_close_24"/>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

点击Toolbar的图标弹出滑出菜单

        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View view) {
    
    
                dla.openDrawer(GravityCompat.START);
            }
        });

NavigationView(实现图片圆形化)

滑动窗口里面用TextView太丑了，尝试尝试NavigationView

  1. 引入开源项目CircleImageView,可以轻松实现图片圆形化
dependencies { 
··· implementation 'de.hdodenhof:circleimageview:3.0.1' 
}
  1. 创建menu，作为滑动菜单 mains1.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:add="http://schemas.android.com/apk/res-auto">
    <group>
        <item
            android:id="@+id/pys"
            android:title="朋友"
            android:icon="@drawable/ic_baseline_emoji_people_24"
            add:showAsAction="never"/>
        <item
            android:id="@+id/wzs"
            android:title="位置"
            android:icon="@drawable/ic_baseline_location_on_24"
            add:showAsAction="never"/>
        <item
            android:id="@+id/kfs"
            android:title="客服"
            android:icon="@drawable/ic_baseline_support_agent_24"
            add:showAsAction="never"/>
    </group>
</menu>
  1. 在layout创建headerLayout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:gravity="center"
    android:background="@color/purple_200"
    android:layout_height="200dp">
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/txs"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:src="@drawable/ic_baseline_sick_24"
        android:layout_centerInParent="true"
        android:layout_centerVertical="true"/>
    <!--android:src="@drawable/nav_icon"指定一张图片-->
    <TextView
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="炸炸最正"
        android:layout_below="@+id/txs"
        android:layout_centerInParent="true"
        android:textSize="15sp"
        android:textColor="@color/white"/>
</RelativeLayout>
  1. 修改基本框架
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nve"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/xinx"
        app:menu="@menu/mains1"/>
</androidx.drawerlayout.widget.DrawerLayout>

​ 5.给滑动菜单设置点击事件

点击事件和溢出菜单的点击事件是一样的

FloatingActionButton 悬浮按钮

基本框架

<com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/fab"
            android:layout_gravity="bottom|end"
            android:layout_margin="15dp"
            android:elevation="10dp"
            android:src="@drawable/ic_baseline_close_24"/>

Snackbar 可交互提示

Toast并非是不如Snackbar，他们有不同的应用场景。

Toast只能告诉用户现在发生了什么事情，用户只能被动接收这件事情。

Snackbar允许在提示中加入一个可交互按钮，当用户点击按钮的时候，就可以执行一些额外的逻辑操作

基本框架
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view,"已删除三条数据",Snackbar.LENGTH_LONG).setAction("取消", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this,"取消删除",Toast.LENGTH_SHORT).show();
                    }
                }).show();
            }
        });

CoordinatorLayout（加强版帧布局）

但是此时我们会发现Snackbar弹出的时候会把悬浮按钮遮住，但是这个问题我们可以用CoordinatorLayout解决

CoordinatorLayout可以是一种加强版的FrameLayout(帧布局)

CoordinatorLayout会监听所有子控件的各种事件，并且自动帮助我们做出最为合理的响应

基本框架
<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        ....
        </androidx.drawerlayout.widget.DrawerLayout>

其实就是把原本的FrameLayout布局改成了androidx.coordinatorlayout.widget.CoordinatorLayout就行了效果就是当点击悬浮按钮Snackbar出现的时候，悬浮按钮会上移来适应Snackbar是自己不会被Snackbar遮住

但是Snackbar并不是CoordinatorLayout的子控件，而是DrawerLayout的子控件,为什么也能成功呢

是因为Snackbar.make()传入了一个view,这是用来指定Snackbar是哪个View触发的，所以传入的是悬浮按钮控件本身，悬浮按钮控件是CoordinatorLayout的子控件，所以能成功

案例（Toobar + DraweLayout）

主布局
<?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/dla"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/purple_500"
            app:title="Sirwz"
            app:titleTextColor="@color/white"
            app:titleMarginStart="10dp"
            app:subtitle="在线"
            app:subtitleTextColor="@color/purple_200"
            app:logo="@mipmap/shequ"
            app:navigationIcon="@drawable/ic_baseline_chevron_left_24"
            app:menu="@menu/mains"/>
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/fab"
            android:layout_gravity="bottom|end"
            android:layout_margin="15dp"
            android:elevation="10dp"
            android:src="@drawable/ic_baseline_close_24"/>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nve"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/xinx"
        app:menu="@menu/mains1"/>
</androidx.drawerlayout.widget.DrawerLayout>
子布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:gravity="center"
    android:background="@color/purple_200"
    android:layout_height="200dp">
    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/txs"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:src="@drawable/ic_baseline_sick_24"
        android:layout_centerInParent="true"
        android:layout_centerVertical="true"/>
    <TextView
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="炸炸最正"
        android:layout_below="@+id/txs"
        android:layout_centerInParent="true"
        android:textSize="15sp"
        android:textColor="@color/white"/>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:add="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/yhs"
        android:title="用户"
        add:showAsAction="never"/>
    <item
        android:id="@+id/szs"
        android:title="设置"
        add:showAsAction="never"/>
    <item
        android:id="@+id/qts"
        android:title="其他"
        add:showAsAction="never"/>
</menu>

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:add="http://schemas.android.com/apk/res-auto">
    <group>
        <item
            android:id="@+id/pys"
            android:title="朋友"
            android:icon="@drawable/ic_baseline_emoji_people_24"
            add:showAsAction="never"/>
        <item
            android:id="@+id/wzs"
            android:title="位置"
            android:icon="@drawable/ic_baseline_location_on_24"
            add:showAsAction="never"/>
        <item
            android:id="@+id/kfs"
            android:title="客服"
            android:icon="@drawable/ic_baseline_support_agent_24"
            add:showAsAction="never"/>
    </group>
</menu>
Acitivity
package com.hoop.myapplication;

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.MenuItem;
import android.view.View;
import android.view.WindowInsets;
import android.widget.Toast;

import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.snackbar.Snackbar;

public class MainActivity extends AppCompatActivity {
    
    

    private Toolbar toolbar;
    private FloatingActionButton fab;
    private DrawerLayout dla;

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

        toolbar= findViewById(R.id.toolbar);
        dla=findViewById(R.id.dla);
        fab = findViewById(R.id.fab);


        fab.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View view) {
    
    
                Snackbar.make(view,"已删除三条数据",Snackbar.LENGTH_LONG).setAction("取消", new View.OnClickListener() {
    
    
                    @Override
                    public void onClick(View view) {
    
    
                        Toast.makeText(MainActivity.this,"取消删除",Toast.LENGTH_SHORT).show();
                    }
                }).show();
            }
        });



        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View view) {
    
    
                dla.openDrawer(GravityCompat.START);
            }
        });

        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
    
    
            @Override
            public boolean onMenuItemClick(MenuItem item) {
    
    
                if (item.getItemId()==R.id.yhs)
                    Toast.makeText(MainActivity.this,"用户按钮被点击",Toast.LENGTH_SHORT).show();
                if (item.getItemId()==R.id.szs)
                    Toast.makeText(MainActivity.this,"设置按钮被点击",Toast.LENGTH_SHORT).show();
                if (item.getItemId()==R.id.qts)
                    Toast.makeText(MainActivity.this,"其他按钮被点击",Toast.LENGTH_SHORT).show();
                return false;
            }
        });
    }
}

m.getItemId()==R.id.yhs)
Toast.makeText(MainActivity.this,“用户按钮被点击”,Toast.LENGTH_SHORT).show();
if (item.getItemId()==R.id.szs)
Toast.makeText(MainActivity.this,“设置按钮被点击”,Toast.LENGTH_SHORT).show();
if (item.getItemId()==R.id.qts)
Toast.makeText(MainActivity.this,“其他按钮被点击”,Toast.LENGTH_SHORT).show();
return false;
}
});
}
}

猜你喜欢

转载自blog.csdn.net/m0_60623666/article/details/126269408
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022