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