Android修行手册-UI组件搭建App界面【新手向】

👉关于作者

👉即将学会

了解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://juejin.cn/user/426576084
📢欢迎点赞👍收藏🌟留言📝