一、安装配置、新建项目
1、下载最新版AS
2、安装配置好环境后,点击 File -> New Project -> Empty Activity
新建默认界面显示Hello Android!
二、组件
三、基础
1、setContent
该方法作用是和在Layout/View中的setContentView是一样的。setContent的方法也是有@Compose注解的方法。所以,在setContent中写入关于UI的@Compopse方法,即可在Activity中显示
@OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
val windowSizeClass = calculateWindowSizeClass(this)
val displayFeatures = calculateDisplayFeatures(this)
ComposeDemoTheme {
// A surface container using the 'background' color from the theme
ComposeApp(windowSizeClass = windowSizeClass, displayFeatures = displayFeatures)
}
}
}
2、Modifier
该类是各个Compose的UI组件一定会用到的一个类。它是被用于设置UI的摆放位置,padding等修饰信息的类。关于Modifier相关的设置较多,在这里只介绍会经常用到的。
Modifier.padding(10.dp) // 给上下左右设置成同一个值
Modifier.padding(10.dp, 11.dp, 12.dp, 13.dp) // 分别为上下左右设值
Modifier.padding(10.dp, 11.dp) // 分别为上下和左右设值
Modifier.padding(InnerPadding(10.dp, 11.dp, 12.dp, 13.dp))// 分别为上下左右设值
Modifier.fillMaxHeight() // 填充整个宽度
Modifier.fillMaxHeight() // 填充整个高度
Modifier.fillMaxSize() // 填充整个宽度和高度
Modifier.width(100.dp) // 设置宽度
Modifier.height(60.dp) // 设置高度
Modifier.size(200.dp, 160.dp) // 设置高度和宽度
Modifier.widthIn(200.dp) // 设置最大宽度
Modifier.heightIn(200.dp) // 设置最大高度
Modifier.sizeIn(200.dp, 100.dp, 100.dp, 50.dp) // 设置最大最小的宽度和高度
Modifier.gravity(Alignment.CenterHorizontally) // 横向居中
Modifier.gravity(Alignment.Start) // 横向居左
Modifier.gravity(Alignment.End) // 横向居右
Modifier.rtl // 从右到左 Modifier.ltr // 从左到右
Modifier.plus(otherModifier) // 把otherModifier的信息加入到现有的modifier中
// Modifier的方法都返回Modifier的实例的链式调用,所以只要连续调用想要使用的方法即可
注:设置padding时,第一个padding为margin,第二个为padding,如图:
3、预览Preview
@Preview @Preview(device = Devices.PHONE) //手机样式 @Preview(device = Devices.FOLDABLE) //手表 @Preview(device = Devices.TABLET) //平板 @Preview(device = Devices.DESKTOP) //TV
annotation class Preview(
val name: String = "",
val group: String = "",
@IntRange(from = 1) val apiLevel: Int = -1,
// TODO(mount): Make this Dp when they are inline classes
val widthDp: Int = -1,
// TODO(mount): Make this Dp when they are inline classes
val heightDp: Int = -1,
val locale: String = "",
@FloatRange(from = 0.01) val fontScale: Float = 1f,
val showSystemUi: Boolean = false,
val showBackground: Boolean = false,
val backgroundColor: Long = 0,
@UiMode val uiMode: Int = 0,
@Device val device: String = Devices.DEFAULT,
@Wallpaper val wallpaper: Int = Wallpapers.NONE,
)
四、View样式大小等参数修改
1、Text
text: String,//文本内容
modifier: Modifier = Modifier,//配置view宽高、padding、margin、shape、点击、透明度等参数
color: Color = Color.Unspecified,//文字颜色
fontSize: TextUnit = TextUnit.Unspecified,//字体大小
fontStyle: FontStyle? = null,//定义字体是斜体还是普通
fontWeight: FontWeight? = null,//字体厚度
fontFamily: FontFamily? = null,//字体样式
letterSpacing: TextUnit = TextUnit.Unspecified,//字母间距
textDecoration: TextDecoration? = null,//删除线、下划线等
textAlign: TextAlign? = null,//文字位置,居中、左、右
lineHeight: TextUnit = TextUnit.Unspecified,//段落行高
overflow: TextOverflow = TextOverflow.Clip,//文本超出宽度效果
softWrap: Boolean = true,//文本是否在超出宽度处换行,false不换行
maxLines: Int = Int.MAX_VALUE,//最大行数
onTextLayout: (TextLayoutResult) -> Unit = {},//在计算新的文本布局时执行的回调
style: TextStyle = LocalTextStyle.current //文本的样式配置,如颜色、字体、行高等。
2、TextField
val context = LocalContext.current //上下文
val keyboardController = LocalSoftwareKeyboardController.current //键盘对象
//文本框的输入值需要由变量保存,否则无法显示输入
val inputValue = remember {
mutableStateOf("")//设置默认输入值为空
}
TextField(
modifier = Modifier.width(600.dp),
value = inputValue.value,
placeholder = { Text(text = "请输入") },//设置提示文本
label = {//为文本框添加标签,当点击文本框时,标签会以动画的形式跑到文本框的上方
Text(text = "请输入用户名")
},
singleLine = true,//设置文本框单行显示
leadingIcon = { Icon(Icons.Filled.Person, contentDescription = "") },//设置文本开头的可选图标
trailingIcon = { //设置文本末尾的可选图标
if (inputValue.value.isNotEmpty()) {//文本框输入内容不为空时显示删除按钮
IconButton(onClick = {
inputValue.value = ""//清空输入内容
}) {
Icon(imageVector = Icons.Filled.Clear, contentDescription = "清除")//需要显示的图标
}
}
},
//文本框通常和键盘配合使用
keyboardOptions = KeyboardOptions(
//设置键盘选项,如键盘类型和操作
keyboardType = KeyboardType.Text,//设置键盘类型:数字,Phone等
imeAction = ImeAction.Done,//设置键盘操作,如next send search 等
),
keyboardActions = KeyboardActions(//键盘事件回调,与imeAction一一对应
onDone = {//点击键盘事件
Toast.makeText(context, inputValue.value, Toast.LENGTH_SHORT).show()
keyboardController?.hide()//隐藏键盘
}
),
colors = TextFieldDefaults.outlinedTextFieldColors(
//colors属性设置文本框不同状态下的颜色
focusedBorderColor = Color.Yellow,//设置文本框焦点状态下的边框颜色
unfocusedBorderColor = Color.Green,//设置文本框未获取焦点状态时的边框颜色
disabledBorderColor = Color.Gray,//设置文本框禁用时的边框颜色
cursorColor = Color.Yellow,//设置光标颜色
//错误状态下的样式调整
errorLabelColor = Color.Red,//设置错误状态下的标签颜色
errorLeadingIconColor = Color.Red,//设置错误状态下文本框前端图标颜色
errorTrailingIconColor = Color.Red,//设置错误状态下尾端图标颜色
errorBorderColor = Color.Red,//设置错误状态下文本框边框颜色
errorCursorColor = Color.Red,//设置错误状态下光标颜色
),
isError = false,//true-显示错误状态的样式,false-普通状态样式
enabled = true,//true-设置状态为可用,false-设置状态为禁用
onValueChange = {//当输入内容改变时,会进行调用
inputValue.value = it//更改状态持有者的内部值
}
)
3、Column,Row
Column和Row可以理解为在View/Layout体系中的纵向和横向的ViewGroup。
也可以作为横向或纵向滑动的ScrollView,只需要Modifier配置verticalScroll(rememberScrollState())或horizontalScroll(rememberScrollState())