当前位置：首页 > news >正文

完整教程：安卓中，kotlin如何写app界面？

news 2026/6/11 0:51:14

完整教程：安卓中，kotlin如何写app界面？

# 使用Kotlin构建Android应用界面

在Android开发中，使用Kotlin编写应用界面主要有两种方式：利用XML布局文件和在代码中直接创建界面（使用Jetpack Compose或传统View系统）。下面我将通过一个示例展示这两种方式。

## 方式1：利用XML布局（传统方式）

### 1. 创建XML布局文件

第一在`res/layout/activity_main.xml`中定义界面：

```xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">

</LinearLayout>
```

### 2. 在Activity中采用布局

然后在Kotlin代码中(`MainActivity.kt`)使用这个布局：

```kotlin
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import android.widget.Toast

class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

// 获取视图引用
val nameEditText = findViewById<EditText>(R.id.nameEditText)
val submitButton = findViewById<Button>(R.id.submitButton)
val resultTextView = findViewById<TextView>(R.id.resultTextView)

// 设置按钮点击事件
submitButton.setOnClickListener {
val name = nameEditText.text.toString()
if (name.isNotEmpty()) {
resultTextView.text = "你好, $name!"
} else {
Toast.makeText(this, "请输入姓名", Toast.LENGTH_SHORT).show()
}
}
}
}
```

## 方法2：使用Jetpack Compose（现代方式）

Android推荐的现代UI工具包，它应用Kotlin以声明式的方式构建界面。就是Jetpack Compose

### 1. 添加Compose依赖

先在`build.gradle.kts (Module: app)`中添加依赖：

```kotlin
android {
// ...
buildFeatures {
compose = true
}

composeOptions {
kotlinCompilerExtensionVersion = "1.5.4"
}
}

dependencies {
implementation("androidx.activity:activity-compose:1.8.0")
implementation(platform("androidx.compose:compose-bom:2023.10.01"))
implementation("androidx.compose.ui:ui")
implementation("androidx.compose.ui:ui-graphics")
implementation("androidx.compose.ui:ui-tooling-preview")
implementation("androidx.compose.material3:material3")
}
```

### 2. 使用Compose创建界面

创建一个Compose Activity：

```kotlin
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyAppTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
MyApp()
}
}
}
}
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyApp() {
var name by remember { mutableStateOf("") }
var greeting by remember { mutableStateOf("") }

Scaffold(
topBar = {
TopAppBar(title = { Text("欢迎启用Kotlin!") })
}
) { innerPadding ->
Column(
modifier = Modifier
.padding(innerPadding)
.padding(16.dp)
.fillMaxSize(),
verticalArrangement = Arrangement.Top,
horizontalAlignment = Alignment.Start
) {
TextField(
value = name,
onValueChange = { name = it },
label = { Text("请输入您的姓名") },
modifier = Modifier.fillMaxWidth()
)

Button(
onClick = {
if (name.isNotEmpty()) {
greeting = "你好, $name!"
}
},
modifier = Modifier
.padding(top = 16.dp)
.align(Alignment.End)
) {
Text("提交")
}

if (greeting.isNotEmpty()) {
Text(
text = greeting,
style = MaterialTheme.typography.bodyLarge,
modifier = Modifier.padding(top = 16.dp)
)
}
}
}
}