【Android Studio构建第一个Kotlin应用】

Android Studio构建第一个Kotlin应用

参考：

Android Studio报：Connection timed out: connect. If you are behind an HTTP proxy错误

探索界面布局编辑器

• 每个界面由一个Fragment组成，初始界面显示的FirstFragment，双击fragment_first.xml可以查看具体的布局设计界面。

res——>layout——f>ragment_first.xml

1. Palette：包含您可以拖到布局中的各种视图和视图组。
2. Component Tree：显示布局中的组件层次结构。
3. 工具栏：点击这些按钮可在编辑器中配置布局外观及更改布局属性。
4. 设计编辑器：在 Design 视图和/或 Blueprint视图中修改布局。
5. Attributes：用于对所选视图的属性进行控制的控件。
6. 视图模式：采用 Code 模式图标、Design 模式图标 或 Split 模式图标 模式查看布局。Split 模式会同时显示 Code 和 Design 窗口。
7. 缩放和平移控件：控制编辑器内的预览大小和位置。

当您打开 XML 布局文件时，系统会默认打开设计编辑器，如图 1 所示。如需在文本编辑器中修改布局 XML，请点击窗口右上角的 Code 模式图标 按钮。请注意，在 Code 视图中修改布局时，Palette、Component Tree 和 Attributes 窗口不可用。

提示：您只需按 Alt + Shift + Right/Left arrow（在 Mac 上按 Control + Shift + Right/Left arrow），即可在设计编辑器和文本编辑器之间切换。

详细看使用布局编辑器构建界面

查看code，修改Textview的Text属性

android:text="@string/hello_first_fragment"

右键该代码，选择Go To > Declaration or Usages，跳转到values/strings.xml，看到高亮文本

<string name="hello_first_fragment">Hello first fragment</string>

注意，不要全选一行，全选会跳转至attrs.xml文件

修改字符串属性值为“Hello Kotlin!”。更进一步，修改字体显示属性，在Design视图中选择
textview_first文本组件，在Common Attributes属性下的textAppearance域，设置相关的文字显示属性。


重新运行应用程序，查看显示效果。

向页面添加更多的布局

本步骤将向第一个Fragment添加更多的视图组件

查看视图的布局约束

在fragment_first.xml，查看TextView组件的约束属性：

详细查看使用 ConstraintLayout 构建自适应界面

添加按钮和约束

从Palette面板中拖动Button到

调整Button的约束，设置Button的Top>BottonOf textView

app:layout_constraintTop_toBottomOf="@+id/textview_first" />

约束条件可以是

		app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"

也可以是

		tools:ignore="MissingConstraints"

调整Next按钮
Next按钮是工程创建时默认的按钮，查看Next按钮的布局设计视图，它与TextView之间的连接不是锯齿状的而是波浪状的，表明两者之间存在链（chain），是一种两个组件之间的双向联系而不是单向联系。删除两者之间的链，可以在设计视图右键相应约束，选择Delete（注意两个组件要双向删除）


或者在属性面板的Constraint Widget中移动光标到相应约束点击删除。

同时，删除Next按钮的左侧约束。

添加新的约束

添加Next的右边和底部约束至父类屏幕（如果不存在的话），Next的Top约束至TextView的底部。最后，TextView的底部约束至屏幕的底部。效果看起来如下图所示：

更改组件的文本

fragment_first.xml布局文件代码中，找到toast_button按钮的text属性部分

android:id=“@+id/toast_button”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:layout_marginTop=“450dp”
android:insetBottom=“0dp”
android:text=“Button”

这里text的赋值是一种硬编码，点击文本，左侧出现灯泡状的提示，选择 Extract string resource。

弹出对话框，令资源名为toast_button_text，资源值为Toast，并点击OK。

于是，在资源文件string.xml定义了字符串，以上操作可以手动在string.xml文件中定义并引用。

<resources>
   ... 
   <string name="toast_button_text">Toast</string>
</resources>

更新Next按钮

在属性面板中更改Next按钮的id，从button_first改为random_button。

在string.xml文件，右键next字符串资源，选择 Refactor > Rename，修改资源名称为random_button_text，点击Refactor 。随后，修改Next值为Random。

添加第三个按钮

向fragment_first.xml文件中添加第三个按钮，位于Toast和Random按钮之间，TextView的下方。新Button的左右约束分别约束至Toast和Random，Top约束至TextView的底部，Buttom约束至屏幕的底部，看起来的效果：

检查xml代码，确保不出现类似app:layout_constraintVertical_bias这样的属性，即不手动设置偏移量。
完善UI组件的属性设置
更改新增按钮id为count_button，显示字符串为Count，对应字符串资源值为count_button_text。于是三个按钮的text和id属性如下表：

Button	Text	Id
LeftButton	Toast	@+id/toast_button
–	–	–
MiddleButton	Count	@+id/count_button
–	–	–
RightButton	Random	@+id/random_button
同时，更改TextView的文本为0。修改后的fragment_first.xml的代码

<?xml version="1.0"