本项目使用 约束布局和 自定义视图相结合的方法绘制界面。
这篇文章主要介绍了
约束布局
,即
ConstraintLayout
。
新建布局资源文件
在res->layout
文件夹中击右键,创建一个Root element
为androidx.constraintlayout.widget.ConstraintLayout
的Drawable Resource File
,点击确定,会发现src
目录多了.java
文件和.xml
文件。
配置布局中元素
Android Studio为开发者提供了三种开发模式:
-
纯代码
-
代码与预览混合
-
图形用户界面
开发者可以通过点击右上角的三个图标自由切换,选择适合自己的模式。
纯代码模式
只有代码,不能实时预览,除非编译屏幕很小,否则不建议使用这个模式。
代码与预览混合模式
左边修改代码,右边实时预览界面,是开发本项目中最常使用的模式。
图形用户界面模式
通过对元素进行拖拽和直接对元素进行配置等方法进行布局设置,最简单的一种模式,但是博主认为如果熟悉代码功能之后,直接修改代码更加方便。
如图所示,左侧为可以添加的元素,可以通过拖拽方式添加;中间为当前界面的预览;右侧可以修改约束项。
约束布局的关键代码
下面以对按钮的设置为例子,对约束布局的关键代码做出解释。
<Button
android:id="@+id/new_game_button"//该元素的id
android:layout_width="240dp"//元素的宽
android:layout_height="50dp"//元素的高
android:text="@string/new_game"//按钮内内容,可以直接输入String,也可以使用String变量
style="?android:attr/borderlessButtonStyle"//无边框按钮风格
app:layout_constraintBottom_toBottomOf="parent"//该元素的底部是“parent”的底部
app:layout_constraintEnd_toEndOf="parent"//同理
app:layout_constraintStart_toStartOf="parent"//同理
app:layout_constraintTop_toBottomOf="@id/sudoku_logo"//同理
android:textAllCaps="false"//如果没有这句话按钮上的字母会全部大写
android:background="@drawable/button_background_control"//按钮背景设置
app:layout_constraintHorizontal_bias="0.5"//按钮在水平方向,左右两侧空白比例
app:layout_constraintVertical_bias="0.3"//按钮在垂直方向,左右两侧空白比例
/>
按钮上字母全部大写问题
如果采用默认设置,使用android:text="String"
后,按钮上字母将会全部大写。可以在xml文件中按钮元素的设置部分,添加android:textAllCaps="false"
,这样按钮上的字母的大小写将会和String
中的字母大小写一致。
元素位置设置
使用app:layout_constraintA_toBOf="C"
设置元素的位置,其中A
和B
可以为Start
,End
,Top
,Bottom
,C
为需要作为参考的元素,可以为parent
或其他元素的id
。例如app:layout_constraintTop_toBottomOf="@id/sudoku_logo"
代表该元素的顶部是sudoku_logo
的底部。
最后通过app:layout_constraintHorizontal_bias="n"
和app:layout_constraintVertical_bias="n"
来设置元素水平方向或垂直方向两侧的空白比例。