Android【Toolbar、DrawerLayout 滑动菜单、 FloatingActionButton 悬浮按钮、Snackbar可交互提示、 Coordinator】
2024-06-02 03:05:40
目录
1.Toolbar
1.1基本框架
1.2常用属性
1.3添加工具栏点击事件
1.4 溢出菜单
1.5 溢出菜单的点击事件
2 DrawerLayout 滑动菜单
2.1 基本框架
2.2 NavigationView
3 FloatingActionButton 悬浮按钮和可交互提示
3.1 基本框架
4 Snackbar
4.1 基本框架
5 CoordinatorLayout
5.1 基本框架
5.2 具体用法
1.Toolbar
还记得我们每次打开的程序的标题栏吗？那不是 toolbar 做的 , 那是 actionbar 做的 , Toolbar 可以说是 Actionbar 的升级版了。 Toolbar 不仅有 Actionbar 的所有功能 , 而且还更加灵活 .
在项目运行在虚拟机上时，都可以看见屏幕上方有一个栏目（下图红框圈出的部分），此为系统默认的
DarkActionBar ，可在 themes.xml 中查看。
去掉系统默认栏目的的方法：
以便于我们更灵活的编辑栏目内容，所以我们先将主题文件中的 DarkActionBar
改为 NoActionBar ，再次运行就可以发现顶端的栏目不见了
1.1基本框架
<?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:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:id="@+id/drawer"tools:context=".MainActivity"><androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="@color/teal_200"app:navigationIcon="@drawable/ic_baseline_arrow_back_ios_24"app:title="Xisq's APP"app:titleTextColor="#2A91E3"app:subtitle="Android学习笔记"app:logo="@mipmap/logo"app:titleMarginStart="60dp"app:menu="@menu/toolbar_menu"/></androidx.drawerlayout.widget.DrawerLayout>
注意尖括号里不是普通的 Toolbar ，而是 androidx.appcompat.widget.Toolbar 。
1.2常用属性
|
属性
|
说明
|
|
app:navigationIcon
|
导航图标，一般情况下放回退按钮，点击退回上一个界面。
|
|
android:background
|
工具栏颜色
|
|
app:title
|
标题
|
|
app:titleTextColor
|
标题文字颜色
|
|
app:titleMarginStart
|
标题与左侧间距
|
|
app:subtitle
|
子标题
|
|
app:subtitleTextColor
|
子标题颜色
|
|
app:logo
|
工具栏 logo
|
1.3添加工具栏点击事件
给 Toolbar 加上 id ，我们就可以在 java 代码里获取并监听用户对工具栏图标的点击：
package com.hp.demo;import androidx.annotation.NonNull;
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.widget.Toast;import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.navigation.NavigationView;
import com.google.android.material.snackbar.Snackbar;public class MainActivity extends AppCompatActivity {private Toolbar toolbar;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);toolbar=findViewById(R.id.toolbar);toolbar.setNavigationOnClickListener(new View.OnClickListener() {@Override public void onClick(View view) {Toast.makeText(MainActivity.this, "返回", Toast.LENGTH_SHORT).show();}});}
}1.4 溢出菜单
首先我们在 res 的 menu 目录中创建一个 menu 资源文件 toolbar_menu.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/toolbar_user"android:title="用户"android:icon="@drawable/ic_baseline_perm_identity_24"app:showAsAction="never"/><item android:id="@+id/toolbar_settings"android:title="设置"android:icon="@drawable/ic_baseline_settings_24"app:showAsAction="never"/><item android:id="@+id/toolbar_add"android:title="其他"android:icon="@drawable/ic_baseline_add_24"app:showAsAction="never"/>
</menu>1.5 溢出菜单的点击事件
package com.hp.demo;import androidx.annotation.NonNull;
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.widget.Toast;import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.navigation.NavigationView;
import com.google.android.material.snackbar.Snackbar;public class MainActivity extends AppCompatActivity {private Toolbar toolbar;private DrawerLayout drawer;private NavigationView nv_nav;private FloatingActionButton fab;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);toolbar=findViewById(R.id.toolbar);toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {@Overridepublic boolean onMenuItemClick(MenuItem item) {switch (item.getGroupId()){case 0:Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();break;case 1:Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();break;case 2:Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();break;}return false;}});}
}2 DrawerLayout 滑动菜单
2.1 基本框架
布局 ---- 在这个布局中允许放入两个直接子控件
屏幕中显示的内容
滑动菜单中显示的内容
<?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:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:id="@+id/drawer"tools:context=".MainActivity"><!--主屏幕中显示的内容-->
<FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="@color/teal_200"app:navigationIcon="@drawable/ic_baseline_arrow_back_ios_24"app:title="Xisq's APP"app:titleTextColor="#2A91E3"app:subtitle="Android学习笔记"app:logo="@mipmap/logo"app:titleMarginStart="60dp"app:menu="@menu/toolbar_menu"/></FrameLayout><!--滑动菜单中的内容--> <!--android:layout_gravity="start"指定了滑动菜单在屏幕的哪边start是指系统语言是从左到右读就在右边，反之就在左边--><!--android:layout_gravity="start"必须要指定，指定了的就是滑动菜单--><com.google.android.material.navigation.NavigationViewandroid:id="@+id/nv_nav"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="start"app:menu="@menu/nav_item"app:headerLayout="@layout/nav_header"/></androidx.drawerlayout.widget.DrawerLayout>
点击 Toolbar 的图标弹出滑出菜单
package com.hp.demo;import androidx.annotation.NonNull;
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.widget.Toast;import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.navigation.NavigationView;
import com.google.android.material.snackbar.Snackbar;public class MainActivity extends AppCompatActivity {private Toolbar toolbar;private DrawerLayout drawer;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);toolbar=findViewById(R.id.toolbar);drawer=findViewById(R.id.drawer);toolbar.setNavigationOnClickListener(new View.OnClickListener() {@Override public void onClick(View view) {drawer.openDrawer(GravityCompat.START);}});}
}2.2 NavigationView
1.引入开源项目 CircleImageView, 可以轻松实现图片圆形化
dependencies { ··· implementation 'de.hdodenhof:circleimageview:3.0.1'
}
2. 创建 menu ，作为滑动菜单 drawerlayout_men.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/nav_1"android:title="朋友"android:icon="@drawable/ic_baseline_accessibility_24"/><item android:id="@+id/nav_2"android:title="位置"android:icon="@drawable/ic_baseline_location_on_24"/><item android:id="@+id/nav_3"android:title="记事本"android:icon="@drawable/ic_baseline_event_note_24"/></group>
</menu>
3. 在 layout 创建 headerLayout nav_header.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:background="#2196F3"><de.hdodenhof.circleimageview.CircleImageViewandroid:id="@+id/civ_img"android:layout_width="70dp"android:layout_height="70dp"android:src="@mipmap/tou"android:layout_centerInParent="true"/><TextViewandroid:layout_below="@id/civ_img"android:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="24sp"android:textColor="@color/white"android:layout_centerHorizontal="true"android:text="八嘎呀路" />
</RelativeLayout>
4. 修改基本框架
<com.google.android.material.navigation.NavigationViewandroid:id="@+id/nv_nav"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="start"app:menu="@menu/nav_item"app:headerLayout="@layout/nav_header"/>
5. 给滑动菜单设置点击事件
private NavigationView nv_nav;...nv_nav=findViewById(R.id.nv_nav);nv_nav.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {@Overridepublic boolean onNavigationItemSelected(@NonNull MenuItem item) {if (item.getItemId()==R.id.nav_1){Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();}else if (item.getItemId()==R.id.nav_2){Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();}else if (item.getItemId()==R.id.nav_3){Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();}return true;}});3 FloatingActionButton 悬浮按钮和可交互提示
3.1 基本框架
<com.google.android.material.floatingactionbutton.FloatingActionButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"app:backgroundTint="#FFEB3B"android:id="@+id/fab"android:layout_gravity="bottom|end"android:layout_margin="16dp"android:elevation="8dp"android:src="@drawable/ic_baseline_done_outline_24"/></androidx.coordinatorlayout.widget.CoordinatorLayout>4 Snackbar
Toast 提示是不是有点拉，可以用 Snackbar 提示。但是 Toast 并非是不如 Snackbar ，他们有不同的应用场景。Toast只能告诉用户现在发生了什么事情，用户只能被动接收这件事情。Snackbar允许在提示中加入一个可交互按钮，当用户点击按钮的时候，就可以执行一 些额外的逻辑操作
4.1 基本框架
package com.hp.demo;import androidx.annotation.NonNull;
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.widget.Toast;import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.navigation.NavigationView;
import com.google.android.material.snackbar.Snackbar;public class MainActivity extends AppCompatActivity {private FloatingActionButton fab;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);fab=findViewById(R.id.fab);fab.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {Snackbar.make(view,"删除数据",Snackbar.LENGTH_SHORT).setAction("取消", new View.OnClickListener() {@Overridepublic void onClick(View view) {Toast.makeText(MainActivity.this, "数据已恢复", Toast.LENGTH_SHORT).show();}}).show();}});
5 CoordinatorLayout
但是此时我们会发现 Snackbar 弹出的时候会把悬浮按钮遮住，但是这个问题我们可以用CoordinatorLayout 解决CoordinatorLayout可以是一种加强版的 FrameLayout( 帧布局 )CoordinatorLayout会监听所有子控件的各种事件，并且自动帮助我们做出最为合理的 响应
5.1 基本框架
<?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:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:id="@+id/drawer"tools:context=".MainActivity"><!--主屏幕中显示的内容-->
<FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="@color/teal_200"app:navigationIcon="@drawable/ic_baseline_arrow_back_ios_24"app:title="Xisq's APP"app:titleTextColor="#2A91E3"app:subtitle="Android学习笔记"app:logo="@mipmap/logo"app:titleMarginStart="60dp"app:menu="@menu/toolbar_menu"/><androidx.coordinatorlayout.widget.CoordinatorLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><com.google.android.material.floatingactionbutton.FloatingActionButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"app:backgroundTint="#FFEB3B"android:id="@+id/fab"android:layout_gravity="bottom|end"android:layout_margin="16dp"android:elevation="8dp"android:src="@drawable/ic_baseline_done_outline_24"/></androidx.coordinatorlayout.widget.CoordinatorLayout></FrameLayout><!--滑动菜单中的内容--> <!--android:layout_gravity="start"指定了滑动菜单在屏幕的哪边start是指系统语言是从左到右读就在右边，反之就在左边--><!--android:layout_gravity="start"必须要指定，指定了的就是滑动菜单--><com.google.android.material.navigation.NavigationViewandroid:id="@+id/nv_nav"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="start"app:menu="@menu/nav_item"app:headerLayout="@layout/nav_header"/></androidx.drawerlayout.widget.DrawerLayout>5.2 具体用法
package com.hp.demo;import androidx.annotation.NonNull;
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.widget.Toast;import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.navigation.NavigationView;
import com.google.android.material.snackbar.Snackbar;public class MainActivity extends AppCompatActivity {private Toolbar toolbar;private DrawerLayout drawer;private NavigationView nv_nav;private FloatingActionButton fab;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);toolbar=findViewById(R.id.toolbar);drawer=findViewById(R.id.drawer);nv_nav=findViewById(R.id.nv_nav);fab=findViewById(R.id.fab);fab.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {Snackbar.make(view,"删除数据",Snackbar.LENGTH_SHORT).setAction("取消", new View.OnClickListener() {@Overridepublic void onClick(View view) {Toast.makeText(MainActivity.this, "数据已恢复", Toast.LENGTH_SHORT).show();}}).show();}});nv_nav.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {@Overridepublic boolean onNavigationItemSelected(@NonNull MenuItem item) {if (item.getItemId()==R.id.nav_1){Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();}else if (item.getItemId()==R.id.nav_2){Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();}else if (item.getItemId()==R.id.nav_3){Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();}return true;}});toolbar.setNavigationOnClickListener(new View.OnClickListener() {@Override public void onClick(View view) {//Toast.makeText(MainActivity.this, "返回", Toast.LENGTH_SHORT).show();drawer.openDrawer(GravityCompat.START);}});toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {@Overridepublic boolean onMenuItemClick(MenuItem item) {switch (item.getGroupId()){case 0:Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();break;case 1:Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();break;case 2:Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show();break;}return false;}});}
}其实就是把原本的 FrameLayout 布局改成了 androidx.coordinatorlayout.widget.CoordinatorLayout 就行了效果就是当点击悬浮按钮 Snackbar 出现的时候，悬浮按钮会上移来适应 Snackbar 是自己不会被Snackbar 遮住但是 Snackbar 并不是 CoordinatorLayout 的子控件，而是 DrawerLayout 的子控件 , 为什么也能成功呢 ?是因为 Snackbar.make() 传入了一个 view, 这是用来指定 Snackbar 是哪个 View 触发的，所以传入的是悬浮按钮控件本身，悬浮按钮控件是 CoordinatorLayout 的子控件，所以能成功
Android【Toolbar、DrawerLayout 滑动菜单、 FloatingActionButton 悬浮按钮、Snackbar可交互提示、 Coordinator】相关推荐
- Material Design【Android-Toolbar，滑动菜单，悬浮按钮，卡片布局，下拉刷新和可折叠式标题栏及案例】
文章目录 Material Design--界面设计 1.Toolbar,标题栏 2.滑动菜单 3.悬浮按钮和可交互提示 4.卡片布局 5.下拉刷新 6.可折叠式标题栏 Material Design ...
- android 悬浮按钮和可交互提示,悬浮按钮的使用原则
当要用悬浮的时候,考虑下在哪使用?什么条件下使用?不使用行不行?使用了带来了什么效果?如果效果不好怎么办?哪些界面需要使用?一个界面都有要展示的要素,当悬浮窗的使用是不是影响本界面的因素,其他的界面的 ...
- android 悬浮按钮和可交互提示,android ——悬浮按钮及可交互提示
一.悬浮按钮 FloatingActionButton是Design Support中的一个控件,它会默认colorAccent作为按钮的颜色,还可以给按钮一个图标. 这是没有图标的 ,这是有图标的 ...
- android悬浮按钮阴影,浅谈FloatingActionButton(悬浮按钮)
一.介绍 这个类是继承自ImageView的,所以对于这个控件我们可以使用ImageView的所有属性 android.support.design.widget.FloatingActionButt ...
- android布局黑色字体颜色,Android开发之FloatingActionButton悬浮按钮基本使用、字体、颜色用法示例...
本文实例讲述了Android开发之FloatingActionButton悬浮按钮基本使用.字体.颜色用法.分享给大家供大家参考,具体如下: 这里主要讲: FloatingActionsMenu自定义 ...
- android 中的悬浮按钮,Android 中FloatingActionButton(悬浮按钮)实例详解
android 中floatingactionbutton(悬浮按钮)实例详解 一.介绍 这个类是继承自imageview的,所以对于这个控件我们可以使用imageview的所有属性 二.使用准备, ...
- android drawerlayout侧滑菜单,Android中drawerlayout侧滑菜单效果的实现
众所周知,Android中drawerlayout侧滑菜单是一个很常见的功能,而我们大多数人都是使用slidengmenu作为一个开源框架,下面爱站技术频道小编给大家介绍Android中drawerl ...
- Android自定义可拖拽的悬浮按钮---DragFloatingActionButton
悬浮按钮FloatingActionButton是Android 5.0系统添加的新控件,FloatingActionButton是继承至ImageView,所以FloatingActionButto ...
- 超酷的Android 侧滑(双向滑动菜单)效果
Java代码 下面看看我们如何使用它,达到我们想要的效果 public class MainActivity extends Activity { /** * 双向滑动菜单布局 */ privat ...
最新文章
- Windows 终端神器 MobaXterm，免费版可以在公司环境下使用
- 华为昇腾师资培训沙龙·南京场 |华为昇腾 ACL 语言开发实践全程干货来了！看完就实操系列...
- 第29节 专业英语1
- iframe 父窗口和子窗口相互的调用方法集锦
- linux scp密码参数,使用scp命令安全地传输带有参数的文件
- 单调栈之Next Greater Number
- 面试必备Linux基础知识
- 什么是 SAP Spartacus UI 的 direction 服务
- 『设计模式』--常见面向对象设计原则
- cordova报错“No installed build tools found. Install the Android build tools version - ”
- 中快捷搜索_同事用1分钟，我用半小时，原来是因为这8个Word快捷键，秒杀一切办公技巧...
- thunderx 循环获得_湖北专业生产CY310热循环风机厂商
- HTML5 响应式网页设计之页面美化（一.响应式布局）
- 雷军自述：我惨痛的大学创业失败经历
- 第七章_生成对抗网络(GAN)
- it超火图片熊猫头你最成功表情包合集
- 计算机英语中paste表示,计算机英语常用词汇
- 如果矩阵中存在字符用C语言,面试中常见的数据结构与算法题整理，想当架构师，数据结构与算法不过关可不行（数组+字符串，共60题）...
- 计算机访问网络延迟越低越好吗,网速和网络延迟(网络延迟取决于什么)
- 第三方自动投票软件制作教程
热门文章
- canvas实现画板功能——选择颜色、线条粗细、橡皮擦、撤销等功能
- java图形源代码_Java分形几何图形源代码实例JAVA源码下载
- 计算机网络组建与维护,计算机网络组建与维护大作业.docx
- 视频基础教程之——How To Kiss Someone Passionately
- 如何利用站外推广的Facebook红人群组，提高亚马逊流量？
- ajax局部刷新对应的div,ajax局部刷新一个div下的jsp
- 看完相当于学过并实践用过arduino! ——复现arduino开发板的众多小实验
- java 代码块_详解java中的四种代码块
- phpcms v9笔记之模板制作案例
- phpcms v9 模板标签技巧，模板标签常用方法