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

Yuhang Li

安卓软件

发布于：2020年5月10日

次浏览

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

新建布局资源文件

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

配置布局中元素

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

• 纯代码

• 代码与预览混合

• 图形用户界面

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

纯代码模式

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

代码与预览混合模式

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

图形用户界面模式

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

约束布局的关键代码

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<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"来设置元素水平方向或垂直方向两侧的空白比例。

更新于：2020年12月31日

Android

Sudoku