Jetpack Compose入门

Compose简介

Compose 是用于构建原生 Android 界面的新工具包。它可简化并加快 Android 上的界面开发，帮助您使用更少的代码、强大的工具和直观的 Kotlin API，快速打造生动而精彩的应用

Compose 编程思想

声明性编程范式：声明性的函数构建一个简单的界面组件，无需修改任何 XML 布局，也不需要使用布局编辑器，只需要调用 Jetpack Compose 函数来声明想要的元素，Compose 编译器即会完成后面的所有工作

举例：显示一行文字

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Text("Hello world!")
        }
    }
}

传统的xml 写法：

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="hello"/>

环境要求以及配置：

• AS4.2及以上版本
• Gradle 环境配置

dependencies {
    implementation 'androidx.compose.ui:ui:1.0.1'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.0.1'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.0.1'
    // Material Design
    implementation 'androidx.compose.material:material:1.0.1'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.0.1'
    implementation 'androidx.compose.material:material-icons-extended:1.0.1'
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.3.1'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha07'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.1'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.1'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.1'
}

buildFeatures {
        compose true
    }

• 也可通过新建ComposeActivity AS会自动添加所需配置
  

布局对比

传统：

Compose：

Compose 优势

• 更少的代码、
• 代码量锐减
• 强大的工具/组件支持
• 直观的 Kotlin API 简单易用

Compose布局

• Column 线性布局≈ Android LinearLayout-VERTICAL
• Row 水平布局≈Android LinearLayout-HORIZONTAL
• Box帧布局≈Android FrameLayout，可将一个元素放在另一个元素上
• 相对布局，需要引入 ConstraintLayout

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.0-beta02"

ConstraintLayout 实例：

@Preview
@Composable
fun ConstraintsUI() {
    ConstraintLayout {
        val (text1, text2, image) = createRefs()

        Text(text = "内容一", Modifier.constrainAs(text1) {
            start.linkTo(image.absoluteRight)
        })
        Text(text = "内容二", Modifier.constrainAs(text2) {
            start.linkTo(image.absoluteRight)
            top.linkTo(text1.bottom)
        })
        Image(painter = painterResource(id = R.mipmap.avater),
            contentDescription = null,
            Modifier.constrainAs(image) {
                
            })
    }
}

样式设置：

Modifier是一组有序的链式调用,可以修改控件的位置、高度、边距、对齐方式等等

Text(
    "Hello, World!",
    Modifier.padding(16.dp) // Outer padding; outside background
        .background(color = Color.Green) // Solid element background color
        .padding(16.dp) // Inner padding; inside background, around text
)

Image(
            painter = painterResource(id = R.mipmap.arrow),
            contentDescription = "arrow",
            modifier = Modifier
                .size(40.dp)
                .padding(start = 10.dp)
        )

列表

Column 类似ScrollView

@Composable
fun MessageList(messages: List<Message>) {
    Column {
        messages.forEach { message ->
            MessageRow(message)
        }
    }
}

LazyColumn 和 LazyRow 相当于RecyclerView
LazyColumn 和 LazyRow 之间的区别就在于它们的列表项布局和滚动方向不同。LazyColumn 生成的是垂直滚动列表，而 LazyRow 生成的是水平滚动列表

LazyColumn {
    // Add a single item
    item {
        Text(text = "First item")
    }

    // Add 5 items
    items(5) { index ->
        Text(text = "Item: $index")
    }

    // Add another single item
    item {
        Text(text = "Last item")
    }
}

State

Jetpack Compose 像React或者Flutter一样，需要通过state变更驱动UI刷新。

@Composable
fun StateLayout() {
    var clickCount by remember { mutableStateOf(0) }
    Button(onClick = {
        clickCount += 1
    }) {
        Text(text = "点击次数：$clickCount")
    }
}

在这段代码中，用代理模式，将int类型的clickCount代理给了mutableStateOf 返回的state，然后对clickCount进行set操作的时候就会触发 recompose，然后对StateLayout进行重新绘制.