Android Compose基础布局——从传统XML的视角切入了解

0 为什么要有布局

和传统XML一样，若不使用具体的布局，所有控件将堆叠在一起，无法呈现所想的视图效果。

例如，下面在界面中声明了两个文本控件，但却未用布局包裹，就会导致两个控件重叠。

@Preview @Composable fun ArtistCard() { Text("Alfred Sisley") Text("3 minutes ago") }

一 垂直布局 Column

被Column布局包裹的控件将会垂直排列，就像传统XML中的LinearLayout将orientation设置为了vertical。

如下，用Column对控件进行包裹，便实现了垂直布局。

@Preview @Composable fun ArtistCardColumn() { Column { Text("Alfred Sisley") Text("3 minutes ago") } }

二 水平布局 Row

被Row布局包裹的控件将会水平排列，就像传统XML中的LinearLayout将orientation设置为了horizontal。

@Preview @Composable fun ArtistCardColumn() { Row { Text("Alfred Sisley") Text("3 minutes ago") } }

三 堆叠排列布局Box

从Box这个单词来理解这个布局的特性，Box即“箱子”，箱子中存放的物品都是堆叠或排列起来的，所以我将其称为堆叠排列布局。

Box布局的使用比较复杂，需要通过属性参数才能 实现对子控件的布局排列。下面简单介绍下Box的两个常用属性。

contentAlignment

这个属性主要用于设置Box中子控件的位置，如上下左右中。

Modifier

Modifier是Compose中各个控件最常用到的修饰属性，几乎可以为每个控件设置Modifier属性。它可以设置如同传统xml中的matchParent、padding、width、height、background等一样的效果，且可以链式调用，简化了传统xml的很多代码。

@Preview @Composable fun BoxTest() { Box( modifier = Modifier .size(300.dp) .background(Color.Cyan), contentAlignment = Alignment.BottomStart ) { Image(painter = painterResource(R.drawable.ic_launcher_background), "") Icon(painter = painterResource(R.drawable.ic_launcher_foreground), "") } }

实际应用

我们可以利用Box布局来实现一个类似于网易云黑胶唱片的效果

效果展示

代码

class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) enableEdgeToEdge() setContent { HelloWorldComposeTheme { Surface { VinylRecordView() } } } } } // 歌曲数据类 data class Song( val name: String, val artist: String, val coverRes: Int, @RawRes val rawRes: Int ) //当前播放歌曲 val curSong = Song("我害怕", "薛之谦", R.drawable.demo_music1, R.raw.demo_music1) //黑胶唱片效果实现 @Preview @Composable fun VinylRecordView() { var diskRotation by remember { mutableFloatStateOf(0f) } val rotationSpeed = 0.042f // 每帧递增度数，可调（速度） val isPlaying = remember { mutableStateOf(true) } // 动画：黑胶旋转 LaunchedEffect(isPlaying.value) { while (isPlaying.value) { diskRotation += rotationSpeed * 16 // 16是大致每帧毫秒 if (diskRotation > 360f) diskRotation -= 360f delay(16) } // 这里不处理归零，保持在当前角度，暂停状态 } Box( modifier = Modifier .fillMaxWidth() .fillMaxHeight() .aspectRatio(1f)//裁切为正方形 .graphicsLayer(rotationZ = diskRotation),//设置旋转动画 contentAlignment = Alignment.Center ) { //黑胶 Box( modifier = Modifier .clip(CircleShape) .background(Color.Black, CircleShape) .fillMaxSize(0.7f) .align(Alignment.Center) ) { Image( painter = painterResource(id = R.drawable.ic_disc), contentDescription = null, modifier = Modifier .fillMaxSize() .clip(CircleShape) ) } // 封面 Box( modifier = Modifier .clip(CircleShape) .background(Color.White, CircleShape) .fillMaxSize(0.5f) .align(Alignment.Center) ) { Image( painter = painterResource(id = curSong.coverRes), contentDescription = null, modifier = Modifier .fillMaxSize() .clip(CircleShape) ) } } }

四 其余布局

除了上述所提及的基础布局外，Compose还提供了很多其他的布局。如BoxWithConstraints对应xml中的ConstraintLayout；LazyVerticalGrid对应xml中的GridLayout布局等等。还有Compose提供了许多开箱即用的布局，例如ModalNavigationDrawer、TopAppBar等，只需要再进行具体的元素填充即可完成所需要的界面。