安卓数独游戏（二）界面绘制之约束布局-ConstraintLayout

本项目使用约束布局和自定义视图相结合的方法绘制界面。
这篇文章主要介绍了约束布局，即ConstraintLayout。

新建布局资源文件

在res->layout文件夹中击右键，创建一个Root element为androidx.constraintlayout.widget.ConstraintLayout的Drawable Resource File，点击确定，会发现src目录多了.java文件和.xml文件。

Create xml.PNG

配置布局中元素

Android Studio为开发者提供了三种开发模式：

• 纯代码

• 代码与预览混合

• 图形用户界面

开发者可以通过点击右上角的三个图标自由切换，选择适合自己的模式。

三种开发模式.PNG

纯代码模式

只有代码，不能实时预览，除非编译屏幕很小，否则不建议使用这个模式。

纯代码模式.PNG

代码与预览混合模式

左边修改代码，右边实时预览界面，是开发本项目中最常使用的模式。

代码与预览混合模式.png

图形用户界面模式

通过对元素进行拖拽和直接对元素进行配置等方法进行布局设置，最简单的一种模式，但是博主认为如果熟悉代码功能之后，直接修改代码更加方便。
如图所示，左侧为可以添加的元素，可以通过拖拽方式添加；中间为当前界面的预览；右侧可以修改约束项。

图形用户界面模式.png

约束布局的关键代码

下面以对按钮的设置为例子，对约束布局的关键代码做出解释。

按钮上字母全部大写问题

如果采用默认设置，使用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"来设置元素水平方向或垂直方向两侧的空白比例。