前排提醒:后续方法全是自己摸索整理,如果你也解决不了的问题我大概也解决不了,且要会创建Compose Project,不会的话去其他地方搜一下视频。
本app使用的编译版本和目标版本如下,不同版本可能会有变化,请查看开发者网站。
compileSdk = 33
targetSdk = 33
首先是第一个界面主页面,包含功能有导入新建和列表展示,列表项内还要有重命名,删除和长按导出功能。
主要界面如下
注意本次只实现界面效果,不添加任何功能。
1、前期准备
首先在colors文件中定义两个颜色【toolbar_color】和【gray】,这是后期要用到的上方工具栏颜色和卡片颜色。
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="toolbar_color">#57B4C5</color>
<color name="gray">#EFEFEF</color>
</resources>
随后创建MainPage函数,其中注解@Preview可以让你实时预览界面,但是如果传入了参数就无法预览了。
@OptIn(ExperimentalMaterial3Api::class)
@Composable
@Preview
fun MainPage() {
}
2、创建页面MainPage基础结构
首先要采用Scaffold结构,这样可以自定义添加上面的工具栏,而且此函数还有下工具栏BottomBar和悬浮按钮可以自行探索。
fun MainPage() {
Scaffold(
topBar = {
}
) { innerPadding ->
}
}
接着先添加topbar上面的工具栏
fun MainPage() {
Scaffold(
topBar = {
TopAppBar(
modifier = Modifier.height(50.dp), // 设置高度为 50dp
title = { Text("") },
colors = TopAppBarDefaults.smallTopAppBarColors(
containerColor = colorResource(id = R.color.toolbar_color)
),
actions = {
Row (modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically){
IconButton(onClick = { },modifier = Modifier.size(50.dp),) {
Image(painter = painterResource(id = R.drawable.btn_import),
contentDescription = "import text" )
}
Text(text = "主页",fontSize=20.sp)
IconButton(
onClick = {},
modifier = Modifier.size(50.dp)) {
Image(painter = painterResource(id = R.drawable.btn_add),
contentDescription = "add a book" )
}
}
}
)
}
) { innerPadding ->
}
}
先说上面的代码,首先直接复制粘贴不能运行,因为下面还有代码。
然后Compose的代码一般都是()内写属性{}内写子控件,所以先看TopAppBar:
fun TopAppBar(
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
navigationIcon: @Composable () -> Unit = {},
actions: @Composable RowScope.() -> Unit = {},
windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
colors: TopAppBarColors = TopAppBarDefaults.smallTopAppBarColors(),
scrollBehavior: TopAppBarScrollBehavior? = null
)
上面这个是已经定义好的函数,可以使用Ctrl+单击左键点击TopAppBar函数进行查看,从里面可以看到能够设置哪些属性。
再返回我们的代码就能看到,设置了modifier,title(必须设置),colors,actions。
modifier里面有很多内容,不建议全去看,用到再百度就行了,一般都是基础属性比如宽高,颜色,排列方式之类的。
title这个是只用当你的actions里面为空的时候才有效,会显示出来,如果你actions内添加了Row之类的布局的话,它就被覆盖了,这也是Row里面为啥再添加一个Text的原因。
colors这个也有好几个属性,包括前景,背景,内容等这里不展示了,用法就是上面的代码。
actions里面就是真正在工具栏内添加东西的地方,可以看到我们先是添加了一个Row布局,然后在里面添加了两个IconButton和一个Text;这些子控件的位置由Row来控制,所以给Row添加了间隔Arrangement.SpaceBetween,和垂直居中。
【说实话这种控制布局的方式只适用于简单布局,如果我想让中间的文本向左或者右偏个几dp,这种简单的布局就无法实现,需要用到约束布局,这个在后期应该也会用到,这里比较简单就不用约束布局了。】
3、在这之中有一些素材比如btn_import,btn_add等,都是它自带的素材具体找的方法是:
点击加号以后选择Vector_assest,然后出现如下界面
点Clip art这个图标就能打开自带的图标库,你要是用自己的也可以去其他网站下载。点开就能在搜索的地方搜你想要的了,但是是英文,所以有时候你得自己找,这里就不给提示了,多找找。
我目前的库里有这些,透明度都是70%
比如我随便点一个,然后将透明度调到70%,其他都不动。
4、添加下面的列表内容
下面我想让它显示为一个卡片形状的列表,但是如果没有数据的话列表将啥都不显示,而且我还没做到列表这块,这个功能之后再完善,现在先做一个固定的Card视图出来。
在上面代码的基础上再添加,这次主要在innerPadding部分:
fun MainPage() {
Scaffold(
topBar = {
TopAppBar(
modifier = Modifier.height(50.dp), // 设置高度为 50dp
title = { Text("") },
colors = TopAppBarDefaults.smallTopAppBarColors(
containerColor = colorResource(id = R.color.toolbar_color)
),
actions = {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
IconButton(onClick = { }, modifier = Modifier.size(50.dp)) {
Image(
painter = painterResource(id = R.drawable.btn_import),
contentDescription = "import text"
)
}
Text(text = "主页", fontSize = 20.sp)
IconButton(
onClick = {},
modifier = Modifier.size(50.dp)
) {
Image(
painter = painterResource(id = R.drawable.btn_add),
contentDescription = "add a book"
)
}
}
}
)
}
) {innerPadding ->
Column(
modifier = Modifier
.padding(innerPadding),
) {
Card(
onClick = {},
modifier = Modifier
.padding(12.dp)
.height(70.dp),
colors = CardDefaults.cardColors(
containerColor = colorResource(id = R.color.gray),
),
) {
Row(
modifier = Modifier
.fillMaxWidth()
.fillMaxHeight(),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
)
{
Row(
modifier = Modifier
.weight(0.2f)
.fillMaxHeight(),
horizontalArrangement = Arrangement.End,
verticalAlignment = Alignment.CenterVertically
)
{
IconButton(onClick = { }, modifier = Modifier.size(50.dp)) {
Image(
painter = painterResource(id = R.drawable.btn_rename),
contentDescription = "add a book"
)
}
}
Row(
modifier = Modifier
.weight(0.8f)
.fillMaxHeight()
.padding(4.dp),
horizontalArrangement = Arrangement.Start,
verticalAlignment = Alignment.CenterVertically
)
{
Text(
text = "小说名称",
modifier = Modifier
.padding(8.dp),
fontSize = 20.sp
)
}
Row(
modifier = Modifier
.weight(0.2f)
.fillMaxHeight(),
horizontalArrangement = Arrangement.Start,
verticalAlignment = Alignment.CenterVertically
)
{
IconButton(onClick = { }, modifier = Modifier.size(50.dp)) {
Image(
painter = painterResource(id = R.drawable.btn_delete),
contentDescription = "add a book"
)
}
}
}
}
}
}
}
首先从上往下看,我们先添加了一个Column,这是列视图,只有在列视图中再次添加行视图Row才能实现一个基础的列表效果,所以将Column填充到剩余的空间中(innerPadding)。
之后添加了一个卡片视图Card,就是灰色底色的部分,之后添加的控件都在这个里面。
可以看到这段代码主要以嵌套Row为主,因为只有放在Row中才能对它的子控件进行进一步排列控制,但是这样是不好的,我还没试过约束布局,不知道约束布局会不会简化这个代码的长度,先埋个坑,这里就先用好几个Row的方式实现了。
其余的都是一些基础语法,这里就不强调了,如果不知道的话可以去谷歌开发网站找找示例:
探索 Android Studio | Android Developers
到这里主页面就算完成了,下一篇就是跳转到创建小说界面了!
希望你也能做出这个效果!