学习 Android 开发的过程中,UI 控件往往是最直观也最容易踩坑的部分。本文整理了我在学习《第一行代码》后的实践笔记,涵盖 Toolbar、自定义标题栏、菜单、SnackbarCoordinatorLayout、可折叠标题栏、SwipeRefreshLayout 下拉刷新、FloatingActionButton 悬浮按钮 等常见控件的使用方法和心得体会。通过这些总结,希望能帮助你快速掌握 Android 界面开发的核心知识点,让界面更灵活、更具交互感eve~

Toolbar

Toolbar是什么?

  • Toolbar 是 Android 5.0)后引入的新控件,用来替代以前的 ActionBar,可以自由控制位置、样式
  • 因为是可自定义的,所以比 ActionBar 灵活得多

Toolbar 的常见功能

  1. 应用标题
    默认显示 App 名称,你可以改成自定义标题
  2. 导航按钮(返回键 / 菜单按钮)
    可以添加返回箭头、菜单按钮,或者换成你想要的图标
  3. 菜单
    可以在右上角加“搜索”“更多”等按钮
  4. 完全自定义布局
    Toolbar 内部可以放 TextView、ImageView,甚至自定义控件

Toolbar的使用(配合菜单)

  • 可以直接在layout布局文件中使用:
<Toolbarandroid:layout_width="match_parent"android:layout_height="40dp"android:id = "@+id/toolbar"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"app:popupTheme = "@style/ThemeOverlay.AppCompat.Dark"app:layout_constraintTop_toTopOf="parent"android:title="你好"></Toolbar>

以上代码中有两个较为陌生的属性:

  • android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"代表顶部导航栏的主题颜色

@style/ThemeOverlay.AppCompat.Dark.ActionBar代表白色字体图标;@style/ThemeOverlay.AppCompat.Light表示深色字体图标

  • app:popupTheme = "@style/ThemeOverlay.AppCompat.Dark" 表示菜单的主体颜色

@style/ThemeOverlay.AppCompat.Light→ 白色弹窗
@style/ThemeOverlay.AppCompat.Dark → 深色弹窗

  • app:navigationIcon
    设置左上角的导航图标(常见是返回箭头)

菜单项这样来写:

   <itemandroid:id="@+id/it1"android:icon="@drawable/ic_launcher_background"android:title="TODO"app:showAsAction = "always"></item>
<itemandroid:id="@+id/it2"android:icon="@drawable/ic_launcher_foreground"android:title="TOD1"app:showAsAction = "ifRoom"></item>
<itemandroid:id="@+id/it3"android:title="TOD2"android:icon="@drawable/ic_launcher_foreground"app:showAsAction = "never"></item>

app:showAsAction = "always"
代表表现的方式:

always代表一定要显示在顶部导航栏,否则不显示

ifRoom代表如果能显示显示,不能显示就去菜单项

never一定在菜单项

最后把菜单项膨胀到视图,一定要使用这个方法,因为有菜单时,系统会回调这个方法;

public boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.toolbai,menu);return true;
}
public boolean onOptionsItemSelected(MenuItem item) {if (item.getItemId() == R.id.action_search) {Toast.makeText(this, "点击了搜索", Toast.LENGTH_SHORT).show();return true;}return super.onOptionsItemSelected(item);
}

设置toolbar

Toolbar toolbars = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbars);

设置导航按钮(返回箭头)

getSupportActionBar().setDisplayHomeAsUpEnabled(true);
toolbars.setNavigationOnClickListener(v -> finish());

注意:toolbar最好使用androidx

androidx.appcompat.widget.Toolbar

使用Androidx的toolbar时需要添加依赖,依赖如下:

implementation 'androidx.appcompat:appcompat:1.6.1'

当然我们也可以自定义toolbar,在toolbar中自定义控件:

Toolbar toolbar = findViewById(R.id.custom_toolbar);
setSupportActionBar(toolbar);
// 去掉系统默认标题,使用我们自己的 TextView
getSupportActionBar().setDisplayShowTitleEnabled(false);

getSupportActionBar().setDisplayShowTitleEnabled(false);核心就是设置后setSupportActionBar的这一句代码,我们就可以使用自定义控件了,那么具体怎么自定义,那就看你想要什么样子的效果啦;

不过需要注意一点,这里只是去掉了默认的标题,所以系统默认的标题不显示了,但是我们仍然可以使用其他方法,比如设置返回图标;

好了,Toolbar的简单学习先到这里;

FloatingActionButton

这是悬浮按钮,我们可以做点击事件

在xml文件中简单使用如下

<com.google.android.material.floatingactionbutton.FloatingActionButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="bottom|right"android:layout_margin="20dp"android:id = "@+id/fa"android:elevation="2dp"android:src = "@drawable/ic_launcher_foreground"/>

属性解释:

android:elevation="2dp"
数值越大,阴影面积大,但浅,反之则相反;

android:src = "@drawable/ic_launcher_foreground"可用来添加图片

Snackbar

一个功能类似toast提示框,与toast不同的是,可以和用户交互

floatingActionButton.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {Snackbar.make(view,"嘿嘿",Snackbar.LENGTH_LONG).setAction("确定", new View.OnClickListener() {@Overridepublic void onClick(View view) {Toast.makeText(MainActivity.this,"雪雪学安卓",Toast.LENGTH_SHORT).show();}}).show();}
});

Snackbar.make(view,"嘿嘿",Snackbar.LENGTH_LONG);

  • make方法是确认提示主体,第一个参数是界面任意一个view,snackbar会自动选择最上层那一个,第二个参数是提示语

  • setAction方法
    通过setaction方法和用户交互,第一个参数是按钮效果,第二个参数做监听

最后别忘记show()!

CoordinatorLayout布局

这个布局和帧布局差不多

但是它可以监听所有的子控件,从而做出最佳响应:比如悬浮按钮和提示框重合问题

需要注意的是:

那前提得是子控件,所以提示框传入的view参数得是coordinatorlayout的子控件了;

glide依赖如下

    implementation 'com.github.bumptech.glide:glide:4.16.0'

Recycleview进阶版

可能照片资源过大,所以这个时候就需要它了;

依赖如下:

implementation 'com.github.bumptech.glide:glide:4.16.0'

Glide.with(mcontext).load(fruit.getImageid()).into(holder.imageView);

第一个参数是context,第二个是把这个id加载到第三个参数的布局中

GridLayoutManager layoutManager = new GridLayoutManager(this,2);

代表两列

<androidx.coordinatorlayout.widget.CoordinatorLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><com.google.android.material.appbar.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><androidx.appcompat.widget.Toolbarandroid:layout_width="match_parent"android:layout_height="40dp"android:id = "@+id/toolbar"android:theme="@style/Widget.AppCompat.Light.ActionBar"app:popupTheme = "@style/ThemeOverlay.AppCompat.Light"app:layout_scrollFlags="scroll|enterAlways|snap"app:layout_constraintTop_toTopOf="parent"android:title="你好"></androidx.appcompat.widget.Toolbar></com.google.android.material.appbar.AppBarLayout><androidx.recyclerview.widget.RecyclerViewandroid:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"android:id="@+id/recy"></androidx.recyclerview.widget.RecyclerView>

陌生属性介绍:

  • com.google.android.material.appbar.AppBarLayout
    这个布局为了顶部导航栏的显示

  • app:layout_behavior="@string/appbar_scrolling_view_behavior" 为了顶部导航栏的显示,否则可能遮挡顶部导航栏;

  • app:layout_scrollFlags="scroll|enterAlways|snap"

scroll
作用:视图会随着内容滚动而一起滚动(向上滑时隐藏,向下滑时显示

enterAlways
作用:
向下滚动时立即显示视图(不需要滚动到顶部)

snap
作用: 滚动停止时自动"吸附"到最近的边界(要么完全显示,要么完全隐藏, 提供更流畅的用户体验

exitUntilCollapsed

作用:

  • 视图会滚动退出,但不会完全消失,而是停留在折叠状态
  • 必须scroll 标志一起使用
  • 需要定义 minHeight 属性指定折叠后的高度

我们通常是scrollexitUntilCollapsed搭配使用!

SwipeRefreshLayout下拉刷新

依赖:

implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'

xml文件:用法包在recyview外面表示刷新

<androidx.swiperefreshlayout.widget.SwipeRefreshLayoutandroid:layout_width="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"android:id = "@+id/swip"android:layout_height="match_parent"><androidx.recyclerview.widget.RecyclerViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:id="@+id/recy"></androidx.recyclerview.widget.RecyclerView>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

在mainactivity

我把过程中难以理解的代码都标注出来啦

SwipeRefreshLayout swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swip);
swipeRefreshLayout.setColorSchemeColors(R.color.black);//刷新的颜色
swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
//每次刷新都会回调@Overridepublic void onRefresh() {//经常得到数据之后,开始刷新,所以要在子线程中new Thread(new Runnable() {@Overridepublic void run() {try {Thread.sleep(2000);} catch (InterruptedException e) {throw new RuntimeException(e);}//回到主线程中runOnUiThread(new Runnable() {@Overridepublic void run() {//适配器刷新Notifyfruitadapots.notifyDataSetChanged();//表示刷新事件结束,隐藏刷新进度条swipeRefreshLayout.setRefreshing(false);}});}}).start();}
});

可折叠式表示栏

CoordinatorLayout

这是最外层的布局

然后你需要把你的用于折叠的照片,还有顶部导航栏,都设置在**appbarlayout**布局中

<com.google.android.material.appbar.AppBarLayoutandroid:layout_height="250dp"android:layout_width="match_parent"android:id = "@+id/appbar"><com.google.android.material.appbar.CollapsingToolbarLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:id = "@+id/coll"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"app:contentScrim="?attr/colorPrimary"app:layout_scrollFlags="snap|scroll|exitUntilCollapsed"><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:id = "@+id/iv"app:layout_collapseMode="parallax"android:scaleType="centerCrop"></ImageView><androidx.appcompat.widget.Toolbarandroid:layout_width="match_parent"android:layout_height="50dp"android:id = "@+id/toolbar"app:layout_collapseMode="pin"></androidx.appcompat.widget.Toolbar></com.google.android.material.appbar.CollapsingToolbarLayout></com.google.android.material.appbar.AppBarLayout>

定义在CollapsingToolbarLayout

  • android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 代表设置一个主题

  • app:contentScrim="?attr/colorPrimary"代表这个布局在趋于折叠和折叠后的背景色

  • app:layout_scrollFlags="snap|scroll|exitUntilCollapsed"appbarlayout中的属性

app:layout_collapseMode="parallax"表示折叠模式

有三种折叠模式:

Pin代表在折叠时永不消失,这里代表顶部导航栏,在折叠会回固定在顶部,通常和toolbar一起联合使用;

parallax模式(视差模式)
效果:控件以较慢速度滚动,产生景深效果,我们还可以设置它的滚动的速度,更有感觉。

滚动的速度通过此来控制,数值越小,速度越慢:
app:layout_collapseParallaxMultiplier="0.7"

默认模式(无模式)
效果:控件会随滚动完全消失,一般不设置,无折叠效果。

中间内容:经常是recycleview等等

<androidx.core.widget.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"><androidx.cardview.widget.CardViewandroid:layout_width="match_parent"android:id = "@+id/card"app:cardCornerRadius="4dp"android:layout_margin="10dp"android:layout_height="wrap_content"><TextViewandroid:layout_width="match_parent"android:id = "@+id/tv"android:layout_height="wrap_content"></TextView></androidx.cardview.widget.CardView></LinearLayout></androidx.core.widget.NestedScrollView>

app:layout_behavior="@string/appbar_scrolling_view_behavior"
这个属性搭配折叠效果;

NestedScrollView**只能有一个直接子项布局**

体会

编者对于在运用折叠式标题栏时有了一些新的体会

  1. 当你在某控件中设置parallax,即使折叠后仍然显示当前折叠时的背景,它不会因为折叠就直接消失显示pin模式下的控件,假如parallax设置的是背景图,那么背景图会和pin模式下的视图重叠,直接你看不到是因为通常toobar设置的是pin,toolbar的会挡住背景图,当你尝试把toolbar设置为透明时,你会发现有重合的问题qvq;
  2. 折叠后的高度由谁决定?
    AI中会解释道:由toolbar的高度决定,但你仔细看,你就会发现是由使用pin模式的控件决定的,因为toolbar设置了pin,所以AI才会这样解释,当我们toolbar中的设置为100dp,那么折叠后的高度就是100dp了;此时又发现一个属性minheigh(控制 CollapsingToolbarLayout的最小可见高度),它也会影响高度,当它的高度大于PIN模式下控件的高度时,那么此时折叠后的高度就是minheight了,所以如果是minHeighttoolbar的高度要高,最后的结果就是上面是toolbar,折叠后仍然留有一部分高度是minheight的剩余高度;
  3. 可折叠模式写在coll布局的直接子view中;
  4. 当有很多空间都设置了pin模式,按照在xml文件中的排布在顶部依次显示;
  5. 可折叠式标题栏的核心:

最外层coor的一个布局

中间套appbarlayout负责响应滑动:android:fitsSystemWindows="true"这里这个属性true代表toolbar在状态栏下方,避免系统的窗口区域和布局重叠

里面是coll的一个布局:里面写两个重要属性:app:layout_scrollFlags,控制滚动的效果,app:contentScrim 折叠后显示的背景色(不写会出现透明/白色突兀问题);

在未折叠的布局中写属性控制折叠后的效果;

在内容区例如recycleview或者scroll中写app:layout_behavior="@string/appbar_scrolling_view_behavior"不然滑动不会带动 AppBar 折叠;

希望编者的理解对你有帮助哦!

悬浮按钮升级版

<com.google.android.material.floatingactionbutton.FloatingActionButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="16dp"app:layout_anchor="@id/appbar"app:layout_anchorGravity="bottom|end"></com.google.android.material.floatingactionbutton.FloatingActionButton>

app:layout_anchor="@id/appbar" 锚定谁

app:layout_anchorGravity="bottom|end" 锚定谁的哪里

anchor锚点

这么设置就会出现在标题栏的区域内

另外:

collapsingToolbarLayout.setTitle("i like");

这里也可以设置折叠后导航栏的标题搭配顶部导航栏的使用

本次分享到这里结束!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/bicheng/95280.shtml
繁体地址,请注明出处:http://hk.pswp.cn/bicheng/95280.shtml
英文地址,请注明出处:http://en.pswp.cn/bicheng/95280.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络---http(超文本传输协议)

1. HTTP的定义与核心属性 HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;是万维网&#xff08;WWW&#xff09;的核心通信协议&#xff0c;定义了客户端&#xff08;如浏览器、APP&#xff09;与服务器之间如何传输“超文本”&#xff08…

【qml-7】qml与c++交互(自动补全提示)

背景&#xff1a; 【qml-5】qml与c交互&#xff08;类型单例&#xff09; 之前记录过qml与c交互的方式&#xff0c;目前为止我使用的是“类型单例”方式。这些名字是我自己起的&#xff0c;只为说明问题&#xff0c;严谨的还是以手册为准。 “类型单例”方式时提到过自动补全…

网页提示UI操作-适应提示,警告,信息——仙盟创梦IDE

代码<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>原生动态提示框</title><style>…

第八篇 永磁同步电机控制-MTPA、MTPV

永磁同步电机控制系列课程&#xff1a; 第一篇 永磁同步电机控制-认识电机 第二篇 永磁同步电机控制-电机的分类 第三篇 永磁同步电机控制-硬件基础知识 第四篇 永磁同步电机控制-软件基础知识 第五篇 永磁同步电机控制-数学模型 第六篇 永磁同步电机控制-控制方法 第七…

JAVA:Spring Boot 集成 Temporal 实现订单处理系统

🛠 1、简述 在现代分布式系统中,订单处理涉及多步骤工作流(如库存扣减、支付确认、物流派单等)。为了确保这些步骤的 可靠性、可观测性 和 容错性,我们可以使用 Temporal 实现工作流管理。 本文将介绍如何在 Spring Boot 中集成 Temporal,并通过一个订单处理的实际案例…

服务器硬件电路设计之 SPI 问答(六):如何提升服务器硬件电路中的性能?如何强化稳定性?

在服务器 SPI 硬件设计中&#xff0c;通信性能&#xff08;如传输速率、数据吞吐量&#xff09;与稳定性&#xff08;抗干扰、误码率&#xff09;直接决定外设响应效率&#xff0c;需从硬件设计、参数配置、干扰抑制三方面系统优化。一、性能优化核心策略&#xff1a;根据 SPI …

Web 聊天室消息加解密方案详解

目录 ​编辑 一、Web 聊天室消息加解密需求与技术约束 1.1 核心安全需求 1.2 技术约束 二、主流消息加解密方案详解 2.1 方案 1&#xff1a;对称加密&#xff08;AES-256-GCM&#xff09; 2.1.1 方案概述 2.1.2 核心原理 2.1.3 实现步骤&#xff08;分场景&#xff09…

组合导航 | RTK、IMU与激光雷达组合导航算法:原理、实现与验证

RTK、IMU与激光雷达组合导航算法:原理、实现与验证 文章目录 RTK、IMU与激光雷达组合导航算法:原理、实现与验证 一、组合导航系统原理与数学模型 1.1 传感器特性与互补性分析 1.2 系统状态方程构建 1.3 多源观测方程设计 (1)RTK观测模型 (2)激光雷达观测模型 (3)多源观…

使用Cadence工具完成数模混合设计流程简介

众所周知&#xff0c;Cadence的Virtuoso是模拟设计领域的核心工具&#xff0c;市占率达到75%&#xff0c;随着近些年来Cadence在数字版图设计&#xff08;APR&#xff09;领域的崛起&#xff0c;invs&#xff0c;PVS等一众工具也都成了很多公司的首选后端流程工具。依照强强联合…

FunASR人工智能语音转写服务本地部署测试

前提条件&#xff1a;本机&#xff1a;windows11 &#xff0c;已安装docker1.下载镜像使用命令下载docker镜像docker pull registry.cn-hangzhou.aliyuncs.com/funasr_repo/funasr:funasr-runtime-sdk-online-cpu-0.1.13下载完成后&#xff0c;建立文件夹储存之后需要下载的模型…

Python OpenCV图像处理与深度学习

Python OpenCV图像处理与深度学习 1. Python OpenCV入门&#xff1a;图像处理基础 2. Python OpenCV开发环境搭建与入门 3. Python OpenCV图像处理基础 4. Python OpenCV视频处理入门 5. Python OpenCV图像几何变换入门 6. Python OpenCV图像滤波入门 7. Python OpenCV边缘检测…

C# SIMD编程实践:工业数据处理性能优化案例

性能奇迹的开始 想象一下这样的场景&#xff1a;一台精密的工业扫描设备每次检测都会产生200万个浮点数据&#xff0c;需要我们计算出最大值、最小值、平均值和方差来判断工件是否合格。使用传统的C#循环处理&#xff0c;每次计算需要几秒钟时间&#xff0c;严重影响生产线效率…

XHR 介绍及实践

What is it? XML(XMLHttpRequest) 是浏览器提供的一种用于前端页面和后端服务器进行异步通信的编程接口。它允许在不重新加载整个页面的情况下&#xff0c;与服务器交换数据并更新部分页面内容&#xff0c;是 AJAX 技术的核心。 What is it used for? 异步请求&#xff1a;在…

【量化回测】backtracker整体架构和使用示例

backtrader整体框架 backtrader 是一个量化回测的库&#xff0c;支持多品种、多策略、多周期的回测和交易。更重要的是可以集成 torch 等神经网络分析模块。Cerebro类是 backtrader 的核心。Strategy类、Broker和Sizer类都是由Cerebro类实例化而来。 整体流程 backtrade 自带的…

【python+requests】一键切换测试环境:Windows 下环境变量设置指南

一键切换测试环境&#xff1a;Windows 下环境变量设置指南教你如何通过一个命令让测试脚本自动识别不同环境的配置文件你是否遇到过这种情况&#xff1a;同一套测试脚本&#xff0c;需要在测试环境、开发环境、预发布环境、生产环境等多种配置中切换&#xff1f;每次都要手动修…

备份压缩存储优化方案:提升效率与节省空间的完整指南

在数字化时代&#xff0c;数据备份已成为企业运营的关键环节。本文将深入探讨备份压缩存储优化方案&#xff0c;从技术原理到实施策略&#xff0c;为您提供一套完整的存储空间节省与性能提升解决方案。我们将分析不同压缩算法的适用场景&#xff0c;揭示存储架构优化的关键技巧…

【图像算法 - 25】基于深度学习 YOLOv11 与 OpenCV 实现人员跌倒识别系统(人体姿态估计版本)

摘要&#xff1a; 本文将详细介绍如何利用先进的深度学习目标检测算法 YOLOv11 结合 OpenCV 计算机视觉库&#xff0c;构建一个高效、实时的人员跌倒识别系统。跌倒检测在智慧养老、安防监控、工业安全等领域至关重要。我们将从环境搭建、数据准备、模型训练到跌倒行为判断逻辑…

数据结构--栈(Stack) 队列(Queue)

一、栈&#xff08;Stack&#xff09;1. 栈的定义栈&#xff08;Stack&#xff09;是一种 先进后出&#xff08;LIFO, Last In First Out&#xff09; 的数据结构。就像一摞书&#xff1a;最后放的书最先拿走。2. 栈的常用方法&#xff08;Stack 类&#xff09;Stack<E> …

FART 主动调用组件深度解析:破解 ART 下函数抽取壳的终极武器

版权归作者所有&#xff0c;如有转发&#xff0c;请注明文章出处&#xff1a;https://cyrus-studio.github.io/blog/ FART 的主动调用组件 在 Android 逆向与脱壳领域&#xff0c;早期的自动化脱壳方案&#xff08;如 DexHunter、FUPK3&#xff09;主要运行在 Dalvik 环境&…

基于有限元分析法的热压成型过程中结构变形和堆积matlab模拟与仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.部分程序 4.算法理论概述 5.完整程序 1.程序功能描述 在压印过程中&#xff0c;一般情况下&#xff0c;我们遵循质量&#xff0c;动量和能量守恒的原则进行仿真。然后建立偏微分方程组&#xff0c;然后通过有限元的…