当前位置：网站首页>Toolbar 和 DrawerLayout 滑动菜单
Toolbar 和 DrawerLayout 滑动菜单
2022-08-11 05:22:00 【hqhe260】
Toolbar
还记得我们每次打开的程序的标题栏吗？那不是 tool bar 做的,那是 acti onbar 做的, Tool bar 可以说是
Acti onbar 的升级版了。 Tool bar 不仅有 Acti onbar 的所有功能,而且还更加灵活.
在themes 中将DarkActi onBar 改为 NoActi onBar ，再次运行就可以发现顶端的栏目不见了
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#8BD54A"
app:logo="@mipmap/ss"
app:menu="@menu/toolbar_item"
app:navigationIcon="@drawable/ic_baseline_keyboard_arrow_left_24"
app:subtitle="yes"
app:subtitleTextColor="@color/black"
app:title="today is sun"
app:titleMarginStart="50dp"
app:titleTextColor="@color/black">
</androidx.appcompat.widget.Toolbar>常用属性
属性 说明
app:navigationIcon 导航图标，一般情况下放回退按钮，点击退回上一个界面。
android:background 工具栏颜色
app:title 标题
app:titleTextColor 标题文字颜色
app:titleMarginStart 标题与左侧间距
app:subtitle 子标题
app:subtitleTextColor 子标题颜色
app:logo 工具栏logo
添加工具栏点击事件
给Toolbar加上id，我们就可以在java代码里获取并监听用户对工具栏图标的点击：
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
@Override
protected 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();
}
});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:icon="@drawable/ic_baseline_account_circle_24"
android:title="用户"
app:showAsAction="never">
</item>
<item android:id="@+id/toolbar_setting"
android:icon="@drawable/ic_baseline_settings_24"
android:title="设置"
app:showAsAction="never">
</item>
<item android:id="@+id/toolbar_add"
android:icon="@drawable/ic_baseline_add_24"
android:title="其他"
app:showAsAction="never">
</item>
</menu>在 toolbar中添加 app:menu="@menu/toolbar_item"
2 DrawerLayout 滑动菜单
布局----在这个布局中允许放入两个直接子控件
屏幕中显示的内容
滑动菜单中显示的内容
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 内容区 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="内容区"
android:textSize="20sp"/>
<Button
android:id="@+id/btn_open_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="打开左边"/>
<Button
android:id="@+id/btn_open_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="打开右边"/>
</LinearLayout>
<!-- 左边菜单 -->
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/menu_drawer_left"/>
<!-- 右边菜单 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="@color/black"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="右边菜单"
android:textColor="@color/white"
android:textSize="20sp"
android:textStyle="bold"/>
<Button
android:id="@+id/btn_close_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="关闭"/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
- 外层是DrawerLayout，第一个子view是内容区，侧滑内容紧跟其后。
- 侧滑内容可以有好几个
android:layout_gravity="end"标识从左边还是右边滑出
点击Toolbar的图标弹出滑出菜单
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private DrawerLayout mDrawer;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = findViewById(R.id.toolbar);
mDrawer = findViewById(R.id.mDrawer);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mDrawer.openDrawer(GravityCompat.START);
//Toast.makeText(MainActivity.this, "返回", Toast.LENGTH_SHORT).show();
}
});NavigationView
滑动窗口里面用TextView太丑了，尝试尝试NavigationView 1 .
引入开源项目 CircleImageView,可以轻松实现图片圆形化
dependencies { ··· implementation ' de .hdodenhof : ci rcleimageview : 3 . 0 . 1 ' }
创建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/call"
android:icon="@drawable/ic_baseline_add_24"
android:title="打电话" >
</item>
<item
android:icon="@drawable/ic_baseline_settings_24"
android:id="@+id/navFriend"
android:title="朋友" >
</item>
<item
android:icon="@drawable/ic_baseline_account_circle_24"
android:id="@+id/navLocation"
android:title="位置" >
</item>
</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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="198dp"
android:background="@color/teal_200"
android:padding="10dp">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/iconImage"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerInParent="true"
android:src="@mipmap/a" />
<TextView
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_height="wrap_content"
android:layout_below="@+id/iconImage"
android:text="平安是福"
android:id="@+id/aa"
android:layout_marginTop="15dp"
android:textSize="20dp"
>
</TextView>
</RelativeLayout>. 修改基本框架
<com.google.android.material.navigation.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/navView"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/drawerlayout_men" />
FloatingActionButton 悬浮按钮和可交互提示
基本框架
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@drawable/ic_baseline_done_outline_24"
app:elevation="8dp"/>Snackbar
Toast提示是不是有点拉，可以用Snackbar提示。 但是Toast并非是不如Snackbar，他们有不同的应用场景。
Toast只能告诉用户现在发生了什么事情，用户只能被动接收这件事情。
Snackbar允许在提示中加入一个可交互按钮，当用户点击按钮的时候，就可以执行一些额外的逻辑 操作
public void onClick(View view) {
Snackbar.make(view, "是否要删除数据", Snackbar.LENGTH_SHORT).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会监听所有子控件的各种事件，并且自动帮助我们做出最为合理的响应
<?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/mDrawer"
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="60dp"
android:background="#8BD54A"
app:logo="@mipmap/ss"
app:menu="@menu/toolbar_item"
app:navigationIcon="@drawable/ic_baseline_keyboard_arrow_left_24"
app:subtitle="yes"
app:subtitleTextColor="@color/black"
app:title="today is sun"
app:titleMarginStart="50dp"
app:titleTextColor="@color/black">
</androidx.appcompat.widget.Toolbar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@drawable/ic_baseline_done_outline_24"
app:elevation="8dp"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
其实就是把原本的FrameLayout布局改成了androidx.coordinatorlayout.widget.CoordinatorLayout就 行了 效果就是当点击悬浮按钮Snackbar出现的时候，悬浮按钮会上移来适应Snackbar是自己不会被
Snackbar遮住
但是Snackbar并不是CoordinatorLayout的子控件，而是DrawerLayout的子控件,为什么也能成功 呢?
是因为Snackbar.make()传入了一个view,这是用来指定Snackbar是哪个View触发的，所以传入的是悬浮 按钮控件本身，悬浮按钮控件是CoordinatorLayout的子控件，所以能成功
边栏推荐
猜你喜欢
![云计算学习笔记——第三章 计算虚拟化[一]](/img/a7/48634b3466797908ed13dc847c675d.png)
随机推荐
云计算学习笔记——第二章 虚拟化与容器
数据库基础-入门看这篇
＞＞开发工具：开发工具排名对比
azkaban集群部署
无字母数字RCE
关于修改挂载到宿主机上的mysql配置文件不生效这件事
ES6-class类
GBase 8s性能简介
error: The following untracked working tree files would be overwritten by merge: .hbuilderx/launch
mysql基本概念之存储引擎
NodeRed系列—nodered安装及基本操作
GBase 8s的多线程结构
OSI TCP/IP学习笔记
【转载】图表：数读2022年上半年国民经济
慢查询语句的优化思路
GBase 8s 执行计划查询分析
Redis哨兵模式
常用的转义字符
let 块级作用域
若依分离版—增加通知公告预览功能