重新学习Android —— （一）重新认识布局编辑器

前言#

最近在开发一款虚拟打击垫应用。

虽然它以经可以正常使用了，但是那都是使用我初高中时代所学的那一套Android开发技术，在我学习了当今更加先进的前后端框架的先进思想后（比如Flutter、Vue），我总是觉得那套技术已经不能再老旧了。

我知道这几年Android世界已经发生了天翻地覆的变化，Kotlin、ConstraintLayout、Jetpack以及Compose......懒惰和懦弱导致我一直没有学习这些新技术，顶多也就是使用Kotlin，毕竟从中专开始我就没怎么再编写过Android程序了，并且我也不打算走Android方向。但是......几年后带着积攒的一身代码洁癖的我再次编写Android程序时，再也无法忍受那些臃肿、难以维护的代码了，我必须要学习这些新技术了。

问题出现了，我不知道该从何学起，Android的官方文档晦涩难懂，国内大部分文章都是一知半解，偶尔有一些好文章就要收昂贵的费用，作为学生的我是无法负担得起。所以我在这里，我尝试着自己去啃这些新的技术。我愿意把一路上都经验总结成文章分享出来，即便是浪费掉我学生时代的最后一个假期......

Layout Editor#

在早先的Android开发中，大家都是直接手撸xml代码，很少有人使用布局编辑器，因为它鸡肋的一批。直到现在，我都不知道那玩意儿该咋用。但是当ConstraintLayout出现时，Google开始推荐大家使用布局编辑器（Layout Editor）进行布局的设计，并宣称——“使用 ConstraintLayout 构建布局时，布局编辑器的功能尤其强大”

这个Design就是布局编辑器，它允许我们使用拖拽的方式来进行布局的设计，而xml代码就由布局编辑器来生成。

我们先把根ViewGroup改成LinearLayout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

</LinearLayout>

Attributes#

都知道LinearLayout最重要的设置就是orientation，它决定了线性布局以哪个轴方向来排布子View。

选中LinearLayout，在右边的Attributes面板中，可以设置选中控件的属性。

这里设置成vertical

下面是针对TextView的ID和文字样式进行调节的示例

Palette#

Palette的意思是调色盘，在布局编辑器中它可不是调色盘，它是控件面板，布局编辑器允许从Palette中拖动控件到视图上。

Component Tree#

Component Tree显示了当前布局的组件树。

它还有个用处就是，当我们的鼠标焦点不好在视图区域选中某个View时（一般出现在多个项目堆叠的情况下），可以通过点击Component Tree中的对应项目来选中这个View。

使用String Resource#

当我们修改TextView的文本时，我们会收到如下警告

我们把文字硬编码在了布局中，Google建议我们使用String Resource来保存文件，这样我们可能很方便的创建多国语言的String Resource文件来轻松的实现国际化功能。

在布局编辑器中，当需要引用一个Resource时，直接点击右面的按钮即可，我不知道我的按钮经历了什么变成了这样。

然后我们就可以在弹出的窗口中选择或新建一个resource。

这里我新建一个，它会帮你在你的strings.xml中自动创建并在当前xml布局文件中自动引用。

dimension、color等也能像类似的方式创建并引用。

设计布局#

选中刚刚添加的TextView，在Attributes中搜索padding，为它添加padding

修改它的paddingTop为8dp，这里我们也不使用硬编码，也是放在dimen文件中。

布局编辑器会自动创建dimen文件，不用我们事先创建。

使用同样的方法设置margin。

小Tip：当设置左右边距或填充时，使用start、end代替left、right有一些好处，因为有一些语言的国家的阅读习惯是从右到左，也就是使用RTL flow，当在RTL上，start就等于右边，end等于左边。

搜索fontFamily，这里可以直接通过More fonts来联网下载需要的字体，牛批。这些字体都是开源的，无版权纠纷。

提取Style#

当我们对一个设计满意时，可以通过在Component Tree中右键，然后选择Refactor，Extract Style将它的样式提取出来。

我们可以去掉一些属性，并给该属性一个名字

然后这些属性会从布局文件中被提取到styles.xml中

添加ImageView#

当你拖动一个ImageView到视图区，资源管理器就会打开，你可以在这里选一个资源。

在Attributes面板里给它添加contentDescription
在Attributes面板里给它添加marginTop，为@dimen/layout_margin

ScrollView#

拖动一个ScrollView到布局上或者到Component Tree上，让它在星星的下面。

我们想要达到的最终效果是在ScrollView中包含一个文本，这个文本可以在屏幕大小不足时可滚动。

我们都知道ScrollView中只能包含一个子控件，如果要包含多个子控件的话，那么就在其中嵌套一个布局就好了。所以布局生成器给我们生成了这样的代码

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" />
</ScrollView>