autojs-UI底部添加BottomAppBar

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

牙叔教程简单易懂

效果

最重要的代码

使用 material 主题

activity.setTheme(com.google.android.material.R$style.Theme_MaterialComponents_DayNight_DarkActionBar);
复制代码

UI布局

CoordinatorLayout 作为父控件，包含两个子控件： FloatingActionButton 和 BottomAppBar

<androidx.coordinatorlayout.widget.CoordinatorLayout>
  <com.google.android.material.floatingactionbutton.FloatingActionButton />
  <com.google.android.material.bottomappbar.BottomAppBar />
</androidx.coordinatorlayout.widget.CoordinatorLayout>;
复制代码

FloatingActionButton 悬浮球

<com.google.android.material.floatingactionbutton.FloatingActionButton
  layout_width="wrap_content"
  desc1="小球颜色-背景色"
  backgroundTint="#d41c46"
  desc2="三角形颜色-前景色"
  tint="#ffef08"
  id="btn_report"
  layout_height="wrap_content"
  src="@drawable/ic_play_arrow_black_48dp"
/>
复制代码

悬浮球主要属性是修改颜色

背景色： backgroundTint
前景色： tint

如果想让中间的三角形变大一点，可以添加属性

scaleType="center"
复制代码

悬浮球中间的三角形， 变大了

BottomAppBar

<com.google.android.material.bottomappbar.BottomAppBar
  id="bottomAppBar"
  backgroundTint="#650d80"
  layout_width="match_parent"
  layout_height="56dp"
  layout_gravity="bottom"
/>
复制代码

BottomAppBar主要属性是修改颜色和调整高度

背景色： backgroundTint
高度： layout_height

高度不能太小，否则悬浮球和BottomAppBar的接口处，看起来不自然；

这是 layout_height="33dp" 的效果

三角形按钮

要实现三角形按钮有两步，

第一步：bottomAppBar 的缺口从半圆形改成三角形

mBottomAppBar = ui.bottomAppBar;
size = android.util.TypedValue.applyDimension(
  android.util.TypedValue.COMPLEX_UNIT_DIP,
  32,
  context.getResources().getDisplayMetrics()
);
triangleEdgeTreatment = new com.google.android.material.shape.TriangleEdgeTreatment(size, true);
shapePathModel = new com.google.android.material.shape.ShapePathModel();
shapePathModel.setTopEdge(triangleEdgeTreatment);
materialShapeDrawable = new com.google.android.material.shape.MaterialShapeDrawable(shapePathModel);
materialShapeDrawable.setTint(colors.parseColor("#ff0000"));
mBottomAppBar.setBackground(materialShapeDrawable);
复制代码

第二步：悬浮球用img代替，可以是透明的四边形，或者添加属性：旋转45度

rotation="45" 
复制代码

bottomAppBar控制三个距离的方法

第一：控制BottomAppBar座切口的拐角半径

ui.bottomAppBar.setFabCradleRoundedCornerRadius(1);
复制代码

第二：FAB边缘与BottomAppBar座切口之间的距离

ui.bottomAppBar.setFabCradleMargin(8)
复制代码

第三： FAB相对于BottomAppBar座切口的垂直偏移距离，只能用正数

ui.bottomAppBar.setCradleVerticalOffset(1);
复制代码

BottomAppBar添加spinner

环境

雷电模拟器： 4.0.63

Android版本: 7.1.2

Autojs版本: 8.8.20

名人名言

思路是最重要的, 其他的百度, bing, stackoverflow, github, 安卓文档, autojs文档, 最后才是群里问问 --- 牙叔教程

声明

部分内容来自网络本教程仅用于学习, 禁止用于其他用途

微信公众号牙叔教程