Android修行手册-UI组件快速搭建App界面

简介: 众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!

👉关于作者

众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣 !!!

专注于Android/Unity和各种游戏开发技巧,以及各种资源分享(网站、工具、素材、源码、游戏等)

有什么需要欢迎私我,交流群让学习不再孤单

👉即将学会

了解Android Studio布局编辑器。

👉背景

在开发阶段UI的代码虽然不需要多的技术含量,但却拥有不容忽视的工作量。要想快速的开发出布局界面,就得熟练的使用好布局编辑器。Android Studio不仅提供了很棒的布局编辑形式,还可以实时显示预览界面。

所以今天我们就要再仔细的学一遍Studio的编辑器,以便快速使用UI组件搭建APP界面。

👉实践过程

😜编辑器简介

网络异常,图片无法展示
|

啊,这该死的高级感!!!

不管打开多少次,一直都觉着界面很漂亮,在这种情况下写代码也是一种舒适啊。

  1. 基本上包含了所有的UI组件,可以直接拖拽到布局当中
  2. 当前布局的层次结构
  3. 可以更改布局/更改主题/更改预览设备等
  4. 当前界面的预览效果,可以直接在里面拖拽UI
  5. 布局编辑器是代码模式还是设计模式
  6. 当前所选UI控件的基础户属性

😜创建及转换布局

选中res下的layout文件夹,右键New-Layout Resource File创建新布局文件

网络异常,图片无法展示
|

然后在布局中增加图片和文本

网络异常,图片无法展示
|

创建布局的时候其实默认是ConstraintLayout根布局,我们要测试转换功能所以用LinearLayout为默认根布局(上图)。

切换为Design模式-右键Component Tree-选中Convert …… to ConstraintLayout,如下图:

网络异常,图片无法展示
|

转化后代码如下图:

网络异常,图片无法展示
|

和最开始的布局书写形式有了很大的变化。那么我们为什么要转一下呢?

  1. 我们只是测试,旧项目升级新项目的时候可以用到,默认创建是ConstraintLayout。
  2. 现在推荐ConstraintLayout,因为她基于约束条件的布局系统,拥有良好的适应性。
  3. 此转换方式不是百分百合适,转换的布局也会有乱的。

😜快速搜索

设计界面支持快速搜索属性:

网络异常,图片无法展示
|

😜快速设置字体样式

  1. 在Design界面,选中一个TextView
  2. 在Attributes中找到textAppearance-fontFamily
  3. 打开列表找到More选择合适字体右侧会提示下载模式或者打包模式,选中一个点击OK即可

网络异常,图片无法展示
|

😜可视化属性操作

现在的Android开发其实不需要写代码也可以搞定布局,不过程序员可能写代码更快一些。

网络异常,图片无法展示
|

选中不同的View后有不同的属性,不过主要是分为5大类

Declared Attributes:当前控件已经有了的属性,点击+号可以添加

Layout:视图宽高可见以及设置一些约束对齐

Transforms:可以设置旋转等变形效果,下图所示

Common Attributes:一些常见属性(可能是必要),如图片的src,TextView的txt和Size等

All Attributes:当前控件的所有可操作属性,必要非必要的都在这,有时候要是写代码忘记了还能在这回忆回忆。

网络异常,图片无法展示
|

😜拖拽布局

如动图GIF

网络异常,图片无法展示
|

所有的UI控件都支持拖动到布局中,Android前期最开始的时候就支持拖动,但也仅仅支持将控件拖拽到布局,再给UI控件精确定位的拖拽就不支持了,搞出来的乱糟糟还不如写代码。后来有了ConstraintLayout约束布局,该布局有除了很好的属性,支持拖拽外,还可以减少布局层级,而且多分辨率适配也表现良好。可真是集万千宠爱于一身啊。

ConstraintLayout

她是一个能够让你可视化操作的新内容(截止到现在其实也诞生很久了),位于Android Jetpack。可以达到不需要嵌套实现大型复杂布局,灵活性远高于RelativeLayout。

她拥有针对父级位置,对齐方式,屏障约束,关键帧动画等超棒的视觉和体验效果。

关于这个ConstraintLayout更多小空会专门的再开一片文章详细的讲解里面的各种骚操作。

👉其他

📢作者:小空和小芝中的小空

📢转载说明-务必注明来源:

https://zhima.blog.csdn.net/

https://www.zhihu.com/people/zhimalier

https://juejin.cn/user/4265760844943479

📢这位道友请留步☁️,我观你气度不凡,谈吐间隐隐有王者霸气💚,日后定有一番大作为📝!!!旁边有点赞👍收藏🌟今日传你,点了吧,未来你成功☀️,我分文不取,若不成功⚡️,也好回来找我。

相关文章
|
1月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
2月前
|
XML Java 数据库
安卓项目:app注册/登录界面设计
本文介绍了如何设计一个Android应用的注册/登录界面,包括布局文件的创建、登录和注册逻辑的实现,以及运行效果的展示。
229 0
安卓项目:app注册/登录界面设计
|
2月前
|
存储 Android开发 开发者
深入理解安卓应用开发的核心组件
【10月更文挑战第8天】探索Android应用开发的精髓,本文带你了解安卓核心组件的奥秘,包括Activity、Service、BroadcastReceiver和ContentProvider。我们将通过代码示例,揭示这些组件如何协同工作,构建出功能强大且响应迅速的应用程序。无论你是初学者还是资深开发者,这篇文章都将为你提供新的视角和深度知识。
|
2月前
|
数据可视化 Android开发 开发者
安卓应用开发中的自定义View组件
【10月更文挑战第5天】在安卓应用开发中,自定义View组件是提升用户交互体验的利器。本篇将深入探讨如何从零开始创建自定义View,包括设计理念、实现步骤以及性能优化技巧,帮助开发者打造流畅且富有创意的用户界面。
107 0
|
24天前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
1月前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
115 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
1月前
|
XML 前端开发 Android开发
Android:UI:Drawable:View/ImageView与Drawable
通过本文的介绍,我们详细探讨了Android中Drawable、View和ImageView的使用方法及其相互关系。Drawable作为图像和图形的抽象表示,提供了丰富的子类和自定义能力,使得开发者能够灵活地实现各种UI效果。View和ImageView则通过使用Drawable实现了各种图像和图形的显示需求。希望本文能为您在Android开发中使用Drawable提供有价值的参考和指导。
42 2
|
2月前
|
XML 前端开发 Java
安卓应用开发中的自定义View组件
【10月更文挑战第5天】自定义View是安卓应用开发的一块基石,它为开发者提供了无限的可能。通过掌握其原理和实现方法,可以创造出既美观又实用的用户界面。本文将引导你了解自定义View的创建过程,包括绘制技巧、事件处理以及性能优化等关键步骤。
|
2月前
|
测试技术 数据库 Android开发
深入解析Android架构组件——Jetpack的使用与实践
本文旨在探讨谷歌推出的Android架构组件——Jetpack,在现代Android开发中的应用。Jetpack作为一系列库和工具的集合,旨在帮助开发者更轻松地编写出健壮、可维护且性能优异的应用。通过详细解析各个组件如Lifecycle、ViewModel、LiveData等,我们将了解其原理和使用场景,并结合实例展示如何在实际项目中应用这些组件,提升开发效率和应用质量。
54 6
|
2月前
|
存储 前端开发 UED
uni-app:icon&修改tabber&unu-ui (四)
本文介绍了如何从阿里巴巴下载矢量图标并使用 `iconfont`,包括创建项目、下载文件、引入 `font.css` 到项目中以及在 `app.vue` 中引用的方法。同时,还详细说明了如何修改 `tabbar` 的样式和配置,以及如何在项目中导入和使用 `uni-ui` 组件库,包括简单的弹出框 `popup` 和带有头部或尾部图标的输入框 `input`。
105 0