目次
1. テキストコンポーネント
Text コンポーネントはオリジナルの TextView コンポーネントであり、その使用法は非常に簡単です。単純な Text の使用法は次のとおりです。
package com.test.compose
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.test.compose.ui.theme.ComposeTestTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeTestTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Greeting("Compose")
}
}
}
}
}
@Composable
fun Greeting(name: String) {
Text(
text = "Hello $name!"
)
}上記のコードの実機での表示効果は以下のように Hello Compose! になります。
上記はテキストの単純な使用法であり、必要に応じてテキストにパラメータを渡します。
fun Text(
text: String, //文本内容
modifier: Modifier = Modifier, //很复杂，参考：https://developer.android.google.cn/jetpack/compose/modifiers-list?hl=zh-cn
color: Color = Color.Unspecified, //文本颜色
fontSize: TextUnit = TextUnit.Unspecified, //文本大小
fontStyle: FontStyle? = null, //文本样式
fontWeight: FontWeight? = null, //绘制文本时使用的字体粗细（例如 FontWeight.Bold）
fontFamily: FontFamily? = null, //渲染文本时使用的字体系列。请参阅 TextStyle.fontFamily。
letterSpacing: TextUnit = TextUnit.Unspecified, //每个字母之间添加的空格量。请参阅 TextStyle.letterSpacing。
textDecoration: TextDecoration? = null, //在文本上绘制的装饰（例如下划线）。请参阅 TextStyle.textDecoration。
textAlign: TextAlign? = null, //段落行内文本的对齐方式。参见文本样式
lineHeight: TextUnit = TextUnit.Unspecified, //TextUnit 单位中段落的行高，例如SP 或 EM。请参阅 TextStyle.lineHeight。
overflow: TextOverflow = TextOverflow.Clip, //应如何处理视觉溢出。如果多余文字怎么处理，例如多余文字不显示
softWrap: Boolean = true, //softWrap为false只能单行显示
maxLines: Int = Int.MAX_VALUE, //最大行数，如果上面softWrap为false最大行数设置是无作用的
onTextLayout: (TextLayoutResult) -> Unit = {}, //计算新文本布局时执行的回调。
style: TextStyle = LocalTextStyle.current //文本的样式配置，例如颜色、字体、行高等。
)上記のフィールドを設定した後の表示効果は次のとおりです。
2. ボタンコンポーネント
Button は非常に一般的なコンポーネントであり、使い方は非常に簡単で、次のように Button を追加するだけです。
Column() {
Text(
text = "Hello11111111111222222222111111111111111111111111111111111111111111111111111111111111 $name!",
color = Color.Blue, //字体颜色蓝色
fontSize = 30.sp, //字体大小30sp
fontStyle = FontStyle.Italic, //字体风格斜体
fontWeight = FontWeight.Bold, //字体加粗
fontFamily = FontFamily.Cursive,//字体系列
letterSpacing = 10.sp, //文字间隔10sp
textDecoration = TextDecoration.Underline, //文字加下划线
textAlign = TextAlign.End, //段落右对齐
lineHeight = 50.sp, //每行高度，注意不是文字高度，是文字所在行高度
overflow = TextOverflow.Ellipsis, //超过行数多余部分文字截取并用...表示
softWrap = true, //是否单行显示，true不是单行显示
maxLines = 2 //显示两行
)
Button(onClick = { /*TODO*/ }) {
}
}上記のコードは効果を示しています。
表示効果から、テキストのないボタンが 1 つだけあることがわかります。ボタンの詳細なパラメータは次のとおりです。
fun Button(
onClick: () -> Unit, //点击事件
modifier: Modifier = Modifier, //同上，很复杂
enabled: Boolean = true, //控制该按钮的启用状态。当为 false 时，该组件将不会响应用户输入，并且它将显示为视觉上禁用并且对辅助服务禁用。
shape: Shape = ButtonDefaults.shape,//定义此按钮的容器、边框（当边框不为空时）和阴影（当使用高度时）的形状
colors: ButtonColors = ButtonDefaults.buttonColors(),//ButtonColors 将用于解析此按钮在不同状态下的颜色。请参阅 ButtonDefaults.buttonColors。
elevation: ButtonElevation? = ButtonDefaults.buttonElevation(),//控制按钮下方阴影的大小
border: BorderStroke? = null, //围绕该按钮的容器绘制的边框
contentPadding: PaddingValues = ButtonDefaults.ContentPadding, //在容器和内容之间内部应用的间距值
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },//MutableInteractionSource 表示此按钮的交互流。您可以创建并传入您自己记住的实例来观察交互并自定义该按钮在不同状态下的外观行为。
content: @Composable RowScope.() -> Unit
) {
//此处可以包装不同的组件，例如：Text
} Button(
onClick = {
Toast.makeText(context, "我被点击了!", Toast.LENGTH_SHORT).show()
},
) {
Text(text = "我是按钮")
}上記のコードは、次のように携帯電話上での対話プロセスを表示します。
3. TextFieldコンポーネント
TextField コンポーネントは元の EditText コンポーネントに似ていますが、使用方法が異なります。次に、TextField の簡単な実装を示します。
Column {
...
TextField(value = "", onValueChange = {})
}上記の実装の効果は次のとおりです。
次に、入力ボックスにテキストを入力しますが、応答がないことがわかります。これが EditText との最大の違いです。Compose は状態駆動型のデータ モードであるため、ここで状態を定義してから TextField に割り当てる必要があります。詳細についてはここでは説明しません。後で説明します。この状態についてさらに詳しく説明し、コードを次のように変更します。
//用于记录文本输入框的输入的数据
var inputText by remember {
mutableStateOf("")
}
val context = LocalContext.current
Column {
...
TextField(value = inputText, onValueChange = {inputText = it})
}次に、上記のコードを実行すると、この時点でコンテンツを入力できることがわかります。
次に、TextField の関連プロパティについて詳しく説明します。
fun TextField(
value: String, //要在文本字段中显示的输入文本
onValueChange: (String) -> Unit, //输入服务(软键盘)更新文本时触发的回调。更新的文本作为回调的参数
modifier: Modifier = Modifier, //复杂，同上
enabled: Boolean = true, //控制此文本字段的启用状态。当为 false 时，该组件将不会响应用户输入，并且它将显示为视觉上禁用并且对辅助服务禁用。
readOnly: Boolean = false, //控制文本字段的可编辑状态。如果为 true，则无法修改文本字段。但是，用户可以聚焦它并从中复制文本。只读文本字段通常用于显示用户无法编辑的预填写表单。
textStyle: TextStyle = LocalTextStyle.current, //要应用于输入文本的样式。默认为 LocalTextStyle。
label: @Composable (() -> Unit)? = null, //输入框文字提示（也不一定非要是文字），一直都在
placeholder: @Composable (() -> Unit)? = null, //输入框文字提示（也不一定非要是文字），输入文字后会消失
leadingIcon: @Composable (() -> Unit)? = null, //输入框左侧图标（也不一定非要是图标）
trailingIcon: @Composable (() -> Unit)? = null, //输入框右侧图标（也不一定非要是图标）
supportingText: @Composable (() -> Unit)? = null, //下方的提示，可以是文字图标，isError为true可以变色提示
isError: Boolean = false, //是否输入有误
visualTransformation: VisualTransformation = VisualTransformation.None, //转换输入值的视觉表示形式 例如，您可以使用PasswordVisualTransformation 创建密码文本字段。默认情况下，不应用任何视觉变换。
keyboardOptions: KeyboardOptions = KeyboardOptions.Default, //软件键盘选项，包含 KeyboardType 和 ImeAction 等配置。
keyboardActions: KeyboardActions = KeyboardActions.Default, //当输入服务发出 IME 操作时，将调用相应的回调。请注意，此 IME 操作可能与您在 KeyboardOptions.imeAction 中指定的不同。
singleLine: Boolean = false, //当为 true 时，此文本字段将成为单个水平滚动文本字段，而不是换行到多行
maxLines: Int = Int.MAX_VALUE, //以最大可见行数表示的最大高度。应等于或大于 1。请注意，如果 singleLine 设置为 true，则该参数将被忽略，相反 maxLines 将设置为 1。
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, //交互源 - MutableInteractionSource 表示此文本字段的交互流。您可以创建并传入您自己记住的实例来观察交互并自定义此文本字段在不同状态下的外观行为。
shape: Shape = TextFieldDefaults.filledShape, //定义此文本字段容器的形状
colors: TextFieldColors = TextFieldDefaults.textFieldColors() //TextFieldColors 将用于解析不同状态下此文本字段使用的颜色。
)ほとんどのプロパティを設定した後のコードは次のようになります。
Column {
TextField(
value = inputText,
onValueChange = { inputText = it },
enabled = true,
readOnly = false,
label = {
Text(
text = "账号"
)
},
placeholder = {
Text(text = "Type something here")
},
leadingIcon = {
Icon(imageVector = Icons.Default.AccountBox, contentDescription = "左边的图标")
},
trailingIcon = {
Icon(imageVector = Icons.Default.Edit, contentDescription = "左边的图标")
},
supportingText = {
Text(
text = if (inputText == "error") {
"error"
} else {
""
}
)
},
isError = inputText == "error",
// visualTransformation = PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Ascii,
imeAction = ImeAction.Done
),//输入英文字符，右下角是下一步操作
keyboardActions = KeyboardActions(
onDone = {
Toast.makeText(
context,
"onDone",
Toast.LENGTH_SHORT
).show()
},
onGo = { Toast.makeText(context, "onGo", Toast.LENGTH_SHORT).show() },
onNext = { Toast.makeText(context, "onNext", Toast.LENGTH_SHORT).show() },
onPrevious = { Toast.makeText(context, "onPrevious", Toast.LENGTH_SHORT).show() },
onSearch = { Toast.makeText(context, "onSearch", Toast.LENGTH_SHORT).show() },
onSend = { Toast.makeText(context, "onSend", Toast.LENGTH_SHORT).show() }
),//imeAction点击的回调,不过要注意在其他厂商定制系统可能没有作用，比如我的小米手机就没有作用
singleLine = false,
maxLines = 3,//最多三行，多余的向下滚动
shape = RoundedCornerShape(16.dp),//此处不生效
colors = TextFieldDefaults.outlinedTextFieldColors(textColor = Color.Blue)
)
TextField(
value = inputNumber,
onValueChange = { inputNumber = it },
shape = RoundedCornerShape(16.dp)//此处生效
)
}すべての属性をデモンストレーションしてみます。上記のコードは、上部の TextField での効果を示しています。csdn は非常にイライラしており、ビデオ デモンストレーションを指定された位置に配置できません。
4. 画像コンポーネント
Image は、写真を表示するために使用される View の ImageView に相当するため、これもマスターする必要がある共通コントロールであることは間違いありません。
幸いなことに、Image の使用は非常に簡単なので、すぐに使い始めることができるでしょう。
ご存知のとおり、Android の画像には通常、2 つの一般的な形式があります。1 つは描画可能なリソースで、もう 1 つはビットマップ オブジェクトです。Image は両方のタイプのイメージをサポートします。
まず、ドローアブル リソースの形式で画像を読み込む方法を見てみましょう。コードは次のとおりです。
Column {
...
Image(
painter = painterResource(id = R.drawable.ic_launcher_foreground),
contentDescription = "A launcher image"
)
}上記のコードは、以下に示すように画像を表示できます。
Image パラメータ リストには 2 つの必須パラメータがあります。そのうち、painter パラメータは表示するドローアブル リソースを指定するために使用され、contentDescription パラメータはこのリソースのテキスト説明を指定するために使用されます。その後、Image パラメータ リストを確認します。 :
Image(
painter: Painter, //显示的图片，必选项
contentDescription: String?, //图片的描述
modifier: Modifier = Modifier,
alignment: Alignment = Alignment.Center, //可选的对齐参数，用于将 Painter 放置在由宽度和高度定义的给定边界内。
contentScale: ContentScale = ContentScale.Fit, //可选缩放参数，用于确定在边界大小与 Painter 的固有大小不同时要使用的纵横比缩放
alpha: Float = DefaultAlpha, //当 Painter 在屏幕上渲染时，应用到 Painter 的可选不透明度默认使 Painter 完全不透明
colorFilter: ColorFilter? = null， //当 Painter 在屏幕上渲染时应用可选的 colorFilter
filterQuality: FilterQuality = DefaultFilterQuality //当位图缩放并绘制到目标时，采样算法应用于位图。默认值为 FilterQuality.Low，使用双线性采样算法进行缩放
)上記のパラメーターを実証してみますが、一部のパラメーターはまだ効果がありません。コードは次のとおりです。
Column {
...
Image(
painter = painterResource(id = R.drawable.ic_launcher_foreground),
contentDescription = "A launcher image"
)
val bitmap: ImageBitmap =
ImageBitmap.imageResource(id = android.R.drawable.ic_dialog_dialer)
Image(
modifier = Modifier
.size(100.dp, 50.dp)//控件宽度100 高度50
.background(Color.Green),//增加绿色背景
bitmap = bitmap,//显示的图片，注意此处图片是ImageBitmap参数，如果是Bitmap需要进行转换
contentDescription = "A dialer image",
alignment = Alignment.BottomEnd,//右下角对齐
contentScale = ContentScale.Inside,//显示在内部，图片不进行缩放
alpha = 0.8.toFloat(),//图片透明度
colorFilter = ColorFilter.lighting(Color.Black, Color.Cyan),//改变图片颜色
filterQuality = FilterQuality.High//图片质量高
)
}上記のパラメータのデモンストレーション効果は次のとおりです。
これまでのところ、ローカルの画像リソースのみを示してきました。では、Web 画像リソースを表示したい場合はどうすればよいでしょうか?
残念ながら、Compose によって提供されるイメージにはこの機能がないため、サードパーティの依存ライブラリに依存する必要があります。もちろん、ImageView にはこの機能がないため、以前は Glide などのサードパーティ ライブラリを使用していました。
現在、Google が推奨するサードパーティの Compose 画像読み込みライブラリは、Coil と Glide です。Glide を見ると誰もがとても優しい気持ちになり、これを使いたくなるかもしれません。しかし実際には、Coil はコルーチンをベースに開発された新しい画像読み込みライブラリであり、使い方が Kotlin に適していて簡単なので、この新しいライブラリを使用することをお勧めします。
コイルを使用するには、まずコイルをプロジェクトに導入する必要があります。
dependencies {
implementation "io.coil-kt:coil-compose:2.4.0"
}次に、AndroidManifestでネットワーク許可を開きます
<uses-permission android:name="android.permission.INTERNET" />次に、それをコードに実装します
Column {
...
AsyncImage(
model = "https://img-blog.csdnimg.cn/20200401094829557.jpg",
contentDescription = "First line of code"
)
}上記のコードは、次のような効果を示しています。
ネットワークから読み込まれた画像が表示されていることがわかります