跟我一起使用 compose 做一个跨平台的黑白棋游戏（2）界面布局
theme: smartblue
持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情
前言
在上一篇文章中，我们讲解了实现这个游戏的总体思路，这篇文章我们将讲解如何实现游戏界面。
本文将涉及到 compose 的自定义绘制与触摸处理，这些内容都可以在我往期的文章中找到对应的教程，如果对这部分内容不太熟悉的话，可以翻回去看看。
实现过程
效果预览
界面分析
我们想要实现的界面分为三个大部分：
- 顶部的游戏信息界面：在这个界面中标识当前棋子与棋手信息以及对局信息
- 中间的游戏棋盘
- 底部控制按钮
其中，1 和 3 都可以使用基础的 compose 组件实现，而 2 的棋盘以及棋子需要使用自定义绘制来手动绘制。
分析完成，我们首先绘制出棋盘。
绘制棋盘
棋盘同样由三个部分组成：背景、线条、棋子。
在绘制之前，我们需要先构建出绘制作用域（DrawScope），这里直接使用 Canvas 绘制：
kotlin
@Composable
fun ReversiView(
modifier: Modifier,
chessBoard: Array<ByteArray>,
onClick: (row: Int, col: Int) -> Unit
) {
Canvas(
modifier = modifier
) {
// ……
}
}
在这里，我们给 ReversiView 抽出了三个参数：
modifier 这个不用多说，几乎所有 composable 都会抽出这个参数，但是这里没有给出默认值而是选择使用必须值是因为 Canvas 明确要求必须使用 modifier 指定组件的大小，无论是指定准确值还是使用 fillMaxSize 等指定相对值都可以，但是这里会有一个坑，下面会讲到。
chessBoard 则是当前的棋盘数据数组，这里使用 Byte 来表示是因为我们要使用的算法用的是 Byte …… 其中，使用 -1 表示黑子； 1 表示 白子；0 表示空白。
onClick 是点击棋盘格子的回调匿名函数，其中 row 和 col 分别表示点击的横纵坐标（这里的坐标指格子坐标，如 7x7 表示最右下角的格子），并且我们需要对点击范围做处理，确保只回调点击格子内的触摸事件，格子外不会回调。
接下来，我们先计算出需要使用的几个参数：
kotlin
// 棋盘内容边界
val chessBoardSide = size.width * ChessBoardScale
// 棋盘线长
val lineLength = size.width - chessBoardSide * 2
// 棋盘格子尺寸
val boxSize = lineLength / 8
其中，size 是 DrawScope 提供的变量，表示的是当前绘制区域的大小；ChessBoardScale 是我们定义的一个常量，表示棋盘四周的边界比例：const val ChessBoardScale = 0.05f
绘制背景
然后先绘制出背景的木板，这里我们其实就是直接将准备好的图片放了上去：
kotlin
// 画棋盘背景
drawImage(
image = backgroundImage,
srcOffset = IntOffset(0, 0),
dstSize = IntSize(size.width.toInt(), size.width.toInt())
)
画背景这里有两点需要注意。
一是 drawImage 需要的是一个 ImageBitmap 类型的图片，这里我们可以将其理解为 compose 封装的，可以跨平台的 Bitmap 数据。
我们这里获取 ImageBitmap 的函数如下：
```kotlin // 在 ViewUtils 中 /* * 安卓平台需要的是 Int 类型的 ID， 但是在桌面端，使用的是 String 类型的路径， * 为了后期移植方便，现在直接写成 String 类型 * / @Composable fun loadImageBitmap(resourceName: String): ImageBitmap { return ImageBitmap.imageResource(id = resourceName.toInt()) }
// ……
// 在 ReversiView 中 val backgroundImage = loadImageBitmap(resourceName = R.drawable.mood.toString()) ```
上面代码的注释中我们也说了，这里单独抽出一个方法用于获取资源文件是为了之后的跨平台处理，因为不同平台对于资源加载的方式不一样，所以需要自己处理一下。
第二点需要注意的是，我们需要指定绘制的 ImageBitmap 的大小，不然取决于调用时附加的 modifier 可能会出现意想不到的结果。
指定绘制大小的方法也很简单，使用 dstSize = IntSize(size.width.toInt(), size.width.toInt()) 这个参数的作用就是将绘制的图片铺满绘制区域(size.width)
对了，因为黑白棋的棋盘是一个 8x8 格子的正方形，并且我们编写的是一个竖屏游戏，所以我们会以宽为基准作为绘制区域尺寸，所以这里我们的宽和高使用的都是 size.width ，并不是我写错了哦。
效果：
绘制线条
线条的绘制十分简单，没有什么需要注意的地方，直接画就完事了：
kotlin
// 画棋盘线
for (i in 0..8) {
// 横线
drawLine(
color = Color.Black,
start = Offset(chessBoardSide, chessBoardSide + i * boxSize),
end = Offset(lineLength+chessBoardSide, chessBoardSide + i * boxSize)
)
// 竖线
drawLine(
color = Color.Black,
start = Offset(chessBoardSide + i * boxSize, chessBoardSide),
end = Offset(chessBoardSide + i * boxSize, lineLength+chessBoardSide)
)
}
效果：
绘制棋子
绘制棋子时需要遍历 chessBoard 这个数组，并根据其中的数值大小决定需要绘制的棋子颜色，或者是否绘制棋子：
```kotlin val whiteChess = loadImageBitmap(resourceName = R.drawable.white_chess.toString()) val blackChess = loadImageBitmap(resourceName = R.drawable.black_chess.toString())
// ……
// 画棋子 for (col in 0 until 8) { for (row in 0 until 8) { if (chessBoard[col][row] == (-1).toByte()) { // 黑子 drawImage( image = blackChess, srcOffset = IntOffset(0, 0), dstOffset = IntOffset( (chessBoardSide + col * boxSize).toInt(), (chessBoardSide + row * boxSize).toInt() ), dstSize = IntSize(boxSize.toInt(), boxSize.toInt()) ) } if (chessBoard[col][row] == (1).toByte()) { // 白子 drawImage( image = whiteChess, srcOffset = IntOffset(0, 0), dstOffset = IntOffset( (chessBoardSide + col * boxSize).toInt(), (chessBoardSide + row * boxSize).toInt() ), dstSize = IntSize(boxSize.toInt(), boxSize.toInt()) ) } } } ```
绘制棋子，我们依旧使用的是直接绘制图片，其实这里我想自己画一个棋子来着，但是画了一通都觉得画出来的棋子好丑啊，所以就放弃了，索性直接用图片算了。
需要注意的是，绘制棋子需要对绘制的图片做偏移处理，使其绘制到正确的格子内：
kotlin
dstOffset = IntOffset(
(chessBoardSide + col * boxSize).toInt(),
(chessBoardSide + row * boxSize).toInt()
)
这里我们通过每个格子的大小（boxSize）乘以横向坐标（col 横向格子数）能得到 x 轴坐标，同理通过 row 计算得到 y 轴坐标。
并且，我们需要指定棋子尺寸为占满格子尺寸：dstSize = IntSize(boxSize.toInt(), boxSize.toInt())
最终效果如下（这里是棋盘的初始状态）：
完成棋盘的点击事件
给 Canvas 的 modifier 添加修饰符：
kotlin
modifier = modifier.pointerInput(Unit) {
detectTapGestures(
onTap = { offset: Offset ->
getChessCoordinate(
size, offset, onClick
)
}
)
}
其中，getChessCoordinate 定义如下：
```kotlin fun getChessCoordinate( size: IntSize, offset: Offset, onClick: (row: Int, col: Int) -> Unit ) { // 棋盘内容边界 val chessBoardSide = size.width * ChessBoardScale // 棋盘线长 val lineLength = size.width - chessBoardSide * 2 // 棋盘格子尺寸 val boxSize = lineLength / 8
if (offset.x in chessBoardSide..size.width-chessBoardSide
&& offset.y in chessBoardSide..size.width-chessBoardSide) { // 判断是否在有效范围内
// 计算点击坐标
val row = floor((offset.x - chessBoardSide) / boxSize).toInt()
val col = floor((offset.y - chessBoardSide) / boxSize).toInt()
// 回调点击函数
onClick(row, col)
Log.i("test", "ReversiView: row=$row, col=$col")
}
} ```
上面代码也很简单，和绘制时差不多，按照坐标计算出点击的是哪个格子，并回调给上级函数。
不过在计算时会先判断点击的是不是格子区域，如果不是则不会回调。
完成剩余组件
剩下的就是将底部控制UI和顶部信息UI加上即可：
```kotlin @Composable fun GameView() { val screenWidth = LocalConfiguration.current.screenWidthDp
Column(
Modifier
.fillMaxSize()
.padding(24.dp)
) {
// 顶部信息栏
Row(
Modifier
.fillMaxWidth()
.padding(bottom = 36.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Column(
Modifier
.fillMaxWidth()
.weight(0.3f)
.background(Color.LightGray),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "您",
Modifier.padding(bottom = 8.dp),
fontSize = 18.sp
)
Row(
Modifier.padding(4.dp),
verticalAlignment = Alignment.CenterVertically
) {
Image(
bitmap = loadImageBitmap(resourceName = R.drawable.black_chess.toString()),
contentDescription = "black")
Text(text = "x2", Modifier.padding(2.dp))
}
}
Column(
Modifier
.fillMaxWidth()
.weight(0.3f),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "VS",
fontSize = 24.sp,
fontWeight = FontWeight.Bold
)
}
Column(
Modifier
.fillMaxWidth()
.weight(0.3f),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "电脑",
Modifier.padding(bottom = 8.dp),
fontSize = 18.sp
)
Row(
Modifier.padding(4.dp),
verticalAlignment = Alignment.CenterVertically
) {
Image(
bitmap = loadImageBitmap(resourceName = R.drawable.white_chess.toString()),
contentDescription = "black")
Text(text = "x2", Modifier.padding(2.dp))
}
}
}
// 游戏棋盘
ReversiView(
modifier = Modifier.size(screenWidth.dp),
chessBoard = initChessBoard(),
onClick = { row: Int, col: Int ->
Log.i("test", "GameView: click row=$row, col=$col")
}
)
// 底部控制按钮
Row(
Modifier
.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceAround
) {
Button(onClick = { /*TODO*/ }) {
Text(text = "重新开始")
}
Button(onClick = { /*TODO*/ }) {
Text(text = "提示")
}
}
}
} ```
从上面的调用棋盘界面的代码中：
kotlin
ReversiView(
modifier = Modifier.size(screenWidth.dp),
chessBoard = initChessBoard(),
onClick = { row: Int, col: Int ->
Log.i("test", "GameView: click row=$row, col=$col")
}
)
我们可以看到，对于棋盘的尺寸定义，我们定义成了指定长宽均为屏幕宽度： val screenWidth = LocalConfiguration.current.screenWidthDp。
为啥长宽都用屏幕宽度，上面已经说了，那么，思考一个问题，为什么这里不直接使用 Modifier .fillMaxWidth() 呢？而非要获取到屏幕宽度后再手动设置给它呢？
这个问题，留给各位略微思考一下，下一篇文章再告诉大家为什么。（ps：其实只要你自己写一下就知道为什么了）
最终效果：
总结
自此，咱们的界面布局就算完成了，虽然现在看起来可能简陋了点，但是现在还只是在验证可行性，等所有代码写完，我们再进行亿点点优化，就会丰富好看多了。
对了，项目源码我将在这系列文章完结，也就是项目真正写完的时候上传到 Github，到时会在文中附上链接的。
- 安卓与串口通信-校验篇
- 安卓与串口通信-实践篇
- 为 Kotlin 的函数添加作用域限制（以 Compose 为例）
- 安卓与串口通信-基础篇
- Compose For Desktop 实践：使用 Compose-jb 做一个时间水印助手
- 初探 Compose for Wear OS：实现一个简易选择APP
- Compose太香了，不想再写传统 xml View？教你如何在已有View项目中混合使用Compose
- 在安卓中压缩GIF的几种方法(附实例代码)
- 魔改车钥匙实现远程控车：（1）整体思路及控制方案实现
- 跟我一起使用 compose 做一个跨平台的黑白棋游戏（3）状态与游戏控制逻辑
- 跟我一起使用 compose 做一个跨平台的黑白棋游戏（2）界面布局
- 以不同的形式在安卓中创建GIF动图
- 跟我一起使用 compose 做一个跨平台的黑白棋游戏（4）移植到compose-jb实现跨平台
- 羡慕大劳星空顶？不如跟我一起使用 Jetpack compose 绘制一个星空背景（带流星动画）
- 魔改车钥匙实现远程控车：（4）基于compose和经典蓝牙编写一个控制APP