【Android】Material Design编写更好的UI

2024-09-01 19:44
文章标签 android ui 编写 design 更好 material

本文主要是介绍【Android】Material Design编写更好的UI，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Toolbar

对于控件ActionBar我们非常熟悉，就是我们常见的标题栏，但ActionBar只能位于活动的顶部，因此我们更建议使用Toolbar。在新建一个项目的时候都是默认显示ActionBar，我们要使用Toolbar就需要先将标题栏改为不显示

先来看看界面各个部位的属性：

在这里插入图片描述

colorAccent：不只用来指定这样一个按钮的颜色，而是更多表达了一个强调的意思，例如一些控件的选中状态也会使用colorAccent的颜色

基本使用：

接下来就看看Toolbar的使用：

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

layout_height：这个属性我们非常熟悉了，但对于后面进行一下解释，?attr/actionBarSize 是一个主题属性引用，它引用了当前主题中定义的 ActionBar 的标准高度

android:theme：将 Toolbar 的主题设置为暗色主题

app:popupTheme：当我们为标题添加菜单按钮的时候按钮也会是暗色的主题，页面就会非常不和谐，因此将标题设置为淡色主题

接下来就看看主活动当中的设置：

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {actionBar.setDisplayHomeAsUpEnabled(true); /*actionBar.setHomeAsUpIndicator(R.drawable.ic_launcher_foreground);*/
}

setDisplayHomeAsUpEnabled()：设置了 ActionBar 的 homeAsUp 属性为 true。homeAsUp 属性的作用是让 ActionBar 的左侧显示一个向上导航的按钮（通常是一个箭头图标），点击这个按钮可以触发向上导航的行为。调用这个方法并传入 true 会启用这个按钮。如果用户点击这个按钮，它会调用 onOptionsItemSelected 方法，并传入 android.R.id.home 作为 itemId 参数。你可以在这个方法中处理点击事件，比如导航回上一个 Activity。

setHomeAsUpIndicator()：就是为这个按钮设置图标，当我们不设置的时候就会使用默认的图标，运行程序，如下图所示：

在这里插入图片描述

尝试为左上角的导航按钮注册点击事件，使按下按钮但回到上一个活动：

@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {//android.R.id.home 是 Android 框架中定义的一个资源 ID，它代表了 ActionBar 中的“向上”或“返回首页”按钮的点击事件的IDif (item.getItemId() == android.R.id.home) {finish();return true;}return super.onOptionsItemSelected(item);
}

添加菜单：

我们先设置一个目录：

<menu xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"><itemandroid:id="@+id/home"android:icon="@drawable/ic_launcher_foreground"android:title="home"app:showAsAction="always"/><itemandroid:id="@+id/find"android:icon="@drawable/ic_launcher_foreground"android:title="find"app:showAsAction="ifRoom"/><itemandroid:id="@+id/my"android:icon="@drawable/ic_launcher_foreground"android:title="my"app:showAsAction="never"/>
</menu>

将目录加载在Toolbar上：

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

此时运行程序：

在这里插入图片描述

在这里插入图片描述

为什么会出现这样的分布，就是我们在设置目录的时候设置的app:showAsAction属性，

app:showAsAction 属性可以设置的一些值及其含义：

  • always: 总是显示在 Toolbar 上。不论 Toolbar 上有多少其他菜单项，这个菜单项都会直接显示在 Toolbar 上
  • ifRoom: 如果 Toolbar 上有足够空间，就显示在 Toolbar 上。如果空间不足，它会被放置在溢出菜单（Overflow Menu）中
  • never: 从不直接显示在 Toolbar 上，总是位于溢出菜单中

滑动菜单

DrawerLayout

NavigationView

先给大家介绍如何将一个图片设置为圆形，首先需要添加依赖：

implementation("de.hdodenhof:circleimageview:3.1.0")
  1. 首先我们制定一个目录，将所有的子目录放在一个group（组）当中，为其设置属性为single：
<menu xmlns:android="http://schemas.android.com/apk/res/android"><group android:checkableBehavior="single"><itemandroid:id="@+id/home1"android:icon="@drawable/ic_launcher_foreground"android:title="find"/><itemandroid:id="@+id/find1"android:icon="@drawable/ic_launcher_foreground"android:title="find"/><itemandroid:id="@+id/my1"android:icon="@drawable/ic_launcher_foreground"android:title="my"/></group></menu>

android:checkableBehavior属性补充：

  1. None: 这是默认值。当设置为 None 时，视图可以独立地被选中或取消选中，不会影响其他具有相同 android:checkable 属性的视图。
  2. Single: 当设置为 Single 时，如果一个视图被选中，其他所有具有相同 android:checkable 属性的视图将自动取消选中。这个行为通常用于单选按钮（RadioButton）组，确保用户在一组选项中只能选择一个。
  3. All: 这个值实际上并不存在于 android:checkableBehavior 属性中。可能是你想要表达的是 Toggle 行为，当设置为 Toggle 时，视图会在被点击时在选中和未选中状态之间切换，这通常用于复选框（CheckBox）
  1. 我们为滑倒出来的布局设置一个头布局：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:padding="10dp"android:layout_height="match_parent"><de.hdodenhof.circleimageview.CircleImageViewandroid:id="@+id/iconimg"android:layout_width="70dp"android:layout_height="70dp"android:src="@drawable/draw1"android:layout_centerInParent="true"/><TextViewandroid:id="@+id/mailtext"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentStart="true"android:layout_alignParentBottom="true"android:layout_marginStart="10dp"android:layout_marginBottom="241dp"android:text="123456789@qq.com"android:textSize="15sp" /><TextViewandroid:id="@+id/userText"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_below="@+id/iconimg"android:layout_alignParentStart="true"android:layout_marginStart="20dp"android:layout_marginTop="153dp"android:gravity="start"android:text="自然醒"android:textSize="15sp" /></RelativeLayout>
  1. 修改活动中的布局，将之前的线性布局转换为：
<com.google.android.material.navigation.NavigationViewandroid:id="@+id/nav_view"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_gravity="start"app:headerLayout="@layout/nav_header"app:menu="@menu/nav_menu" />
  1. 此时我们就可以通过向右划动将布局显示出来，修改活动的代码：
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
//将一开始的选择默认设置为find1
navigationView.setCheckedItem(R.id.find1);
//注册选项的点击事件
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {@Overridepublic boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {drawrLayout.closeDrawers();return true;}
});

运行程序：

在这里插入图片描述

悬浮按钮和可交互提示

FloatingActionButton

这个控件可以轻松的实现悬浮按钮的效果，使用与Button一样

<com.google.android.material.floatingactionbutton.FloatingActionButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|end"android:layout_margin="30dp"android:src="@drawable/draw11"//设置悬浮的高度                                                         android:elevation="8dp"/>

在这里插入图片描述

SnackBar

在前面我们经常使用Toast来提示用户，但并没有让用户有选择的权力。这个控件就可以让用户可以根据提示进行选择：

FloatingActionButton floatingActionButton = (FloatingActionButton) findViewById(R.id.fab);
floatingActionButton.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Snackbar.make(v, "data delete", Snackbar.LENGTH_SHORT).setAction("Undo", new View.OnClickListener() {@Overridepublic void onClick(View v) {Toast.makeText(DrawrLayout.this, "data restored", Toast.LENGTH_SHORT).show();}}).show();}
});

此时运行程序：

在这里插入图片描述

按下悬浮按钮就会出现提示，无论你是否按下UNDO按钮到时间都会消失，当按下UNDO按钮就会根据我们的代码出现Toast提示。

CoordinatorLayout

相当于一个增强版的Framelayout,可以监听页面的子控件，然后做出合理响应。例如在上面的示例当中，当悬浮窗位于页面的右下角，按下悬浮按钮，提示弹窗弹出的时候就会遮住一部分按钮，看起来体验非常不好，当布局设置为CoordinatorLayout，按下悬浮按钮，提示弹出的时候按钮也会相应的向上移动。

卡片式布局

实际上MaterialCardView也属于FrameLayout，只是额外提供了阴影和圆角等效果。让内容显示在一张卡片当中，拥有圆角和投影

CardView

  1. 先设置RecyclerView子布局：
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_margin="5dp"app:cardCornerRadius="4dp"><LinearLayoutandroid:orientation="vertical"android:layout_width="match_parent"android:layout_height="wrap_content"><ImageViewandroid:id="@+id/FruitImage"android:layout_width="match_parent"android:layout_height="100dp"android:scaleType="centerCrop"/><TextViewandroid:id="@+id/FruitText"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_margin="5dp"android:textSize="16sp"/></LinearLayout></com.google.android.material.card.MaterialCardView>
  1. 与RecyclerView的制作一样，运行程序：

在这里插入图片描述

文章到这里就结束了！

这篇关于【Android】Material Design编写更好的UI的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1127869。

相关文章

利用Python编写一个简单的聊天机器人

利用Python编写一个简单的聊天机器人

《利用Python编写一个简单的聊天机器人》这篇文章主要为大家详细介绍了如何利用Python编写一个简单的聊天机器人,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 使用 python 编写一个简单的聊天机器人可以从最基础的逻辑开始，然后逐步加入更复杂的功能。这里我们将先实现一个简单的
阅读更多...
Python中的可视化设计与UI界面实现

Python中的可视化设计与UI界面实现

《Python中的可视化设计与UI界面实现》本文介绍了如何使用Python创建用户界面（UI）,包括使用Tkinter、PyQt、Kivy等库进行基本窗口、动态图表和动画效果的实现,通过示例代码,展示... 目录从像素到界面：python带你玩转UI设计示例：使用Tkinter创建一个简单的窗口绘图魔法：用
阅读更多...
使用PyQt5编写一个简单的取色器

使用PyQt5编写一个简单的取色器

《使用PyQt5编写一个简单的取色器》：本文主要介绍PyQt5搭建的一个取色器,一共写了两款应用,一款使用快捷键捕获鼠标附近图像的RGB和16进制颜色编码,一款跟随鼠标刷新图像的RGB和16... 目录取色器1取色器2PyQt5搭建的一个取色器，一共写了两款应用，一款使用快捷键捕获鼠标附近图像的RGB和16
阅读更多...
element-ui下拉输入框+resetFields无法回显的问题解决

element-ui下拉输入框+resetFields无法回显的问题解决

《element-ui下拉输入框+resetFields无法回显的问题解决》本文主要介绍了在使用ElementUI的下拉输入框时,点击重置按钮后输入框无法回显数据的问题,具有一定的参考价值,感兴趣的... 目录描述原因问题重现解决方案方法一方法二总结描述第一次进入页面，不做任何操作，点击重置按钮，再进行下
阅读更多...
Android数据库Room的实际使用过程总结

Android数据库Room的实际使用过程总结

《Android数据库Room的实际使用过程总结》这篇文章主要给大家介绍了关于Android数据库Room的实际使用过程,详细介绍了如何创建实体类、数据访问对象（DAO）和数据库抽象类,需要的朋友可以... 目录前言一、Room的基本使用1.项目配置2.创建实体类（Entity）3.创建数据访问对象（DAO
阅读更多...
使用Java编写一个文件批量重命名工具

使用Java编写一个文件批量重命名工具

《使用Java编写一个文件批量重命名工具》这篇文章主要为大家详细介绍了如何使用Java编写一个文件批量重命名工具,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录背景处理1. 文件夹检查与遍历2. 批量重命名3. 输出配置代码片段完整代码背景在开发移动应用时，UI设计通常会提供不
阅读更多...
Android WebView的加载超时处理方案

Android WebView的加载超时处理方案

《AndroidWebView的加载超时处理方案》在Android开发中,WebView是一个常用的组件,用于在应用中嵌入网页,然而,当网络状况不佳或页面加载过慢时,用户可能会遇到加载超时的问题,本... 目录引言一、WebView加载超时的原因二、加载超时处理方案1. 使用Handler和Timer进行超
阅读更多...
HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

Android平台播放RTSP流的几种方案探究（VLC VS ExoPlayer VS SmartPlayer）

技术背景 好多开发者需要遴选Android平台RTSP直播播放器的时候，不知道如何选的好，本文针对常用的方案，做个大概的说明： 1. 使用VLC for Android VLC Media Player（VLC多媒体播放器），最初命名为VideoLAN客户端，是VideoLAN品牌产品，是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式，并支持DVD影音光盘，VCD影
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2