Android UI 框架Jetpack Compose初体验

0、下载支持Jetpack Compose的Android Studio版本（4.2以上)

image.png

1、Column（竖直线性布局）Row（水平线性布局）

2、

package com.onedream.myjetpackcomposedemo

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.Image
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.res.imageResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.ui.tooling.preview.Preview
import com.onedream.myjetpackcomposedemo.ui.MyJetpackComposeDemoTheme

class MainActivity : AppCompatActivity() {
    var isShowRow = true

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyJetpackComposeDemoTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    if (isShowRow) {
                        Greeting("Android")
                    }
                }
            }
        }
        isShowRow = true//试着改为false，看看效果
    }
}

@Composable
fun Greeting(name: String) {
    Column(Modifier.padding(20.dp).fillMaxWidth()) {//列，子控件竖直排列
        Text(
            text = "Hello $name!",
            color = Color.Blue
        )
        Column(Modifier.fillMaxHeight(), verticalArrangement = Arrangement.Center) {
            postLayout()
            addSpacer(size = 10.dp)
            cardLayout()
        }

    }

}

@Composable
fun postLayout() {
    //图片
    val avatarImg = imageResource(id = R.drawable.avatar)
    //头像图片的修饰器
    val avatarModifier = Modifier
        // 设置图片的高
        .preferredHeight(48.dp)
        //设置图片的宽
        .preferredWidth(48.dp)
        //设置图片的圆角
        .clip(RoundedCornerShape(24.dp))
    //
    Row(verticalAlignment = Alignment.CenterVertically) {//行，子控件水平排列
        Image(
            asset = avatarImg,
            modifier = avatarModifier,
            contentScale = ContentScale.Crop
        )
        //加入间距
        addSpacer(18.dp)
        Column(horizontalAlignment = Alignment.Start) {
            Text(
                text = "jdallen",
                style = TextStyle(
                    color = Color(0xFF333333),
                    fontSize = 20.sp
                )
            )
            //加入间距
            addSpacer(5.dp)
            Text(
                text = "2021-03-15 11:35",
                style = TextStyle(
                    color = Color.LightGray,
                    fontSize = 10.sp
                )
            )
        }

    }
    //加入间距
    addSpacer(10.dp)
    Text(
        text = "Android 官方全新推出的 UI 框架Jetpack Compose初体验Android 官方全新推出的 UI 框架Jetpack Compose初体验Android 官方全新推出的 UI 框架Jetpack Compose初体验",
        style = TextStyle(
            color = Color(0xFF333333),
            fontSize = 14.sp
        )
    )
    //帖子图片的修饰器
    val postModifier = Modifier
        // 设置图片的高
        .preferredHeight(80.dp)
        //设置图片的宽
        .preferredWidth(80.dp)
        //设置图片的圆角
        .clip(RoundedCornerShape(10.dp))
    //
    Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
        Image(
            asset = imageResource(id = R.drawable.post_1),
            modifier = postModifier,
            contentScale = ContentScale.Crop
        )
        Image(
            asset = imageResource(id = R.drawable.post_2),
            modifier = postModifier,
            contentScale = ContentScale.Crop
        )
        Image(
            asset = imageResource(id = R.drawable.post_1),
            modifier = postModifier,
            contentScale = ContentScale.Crop
        )
    }
}

@Composable
fun cardLayout() {
    // 卡片的布局
    Card(elevation = 4.dp) {
        Column {
            Text(text = "SpaceEvenly")//子控件之间的等间距，左右两边的控件不贴边，控件对左右两边也有边距
            Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceEvenly) {
                Text("left", style = TextStyle(background = Color.Red))
                Text("middle", style = TextStyle(background = Color.Yellow))
                Text("right", style = TextStyle(background = Color.Green))
            }
            addSpacer(5.dp)
            Text(text = "SpaceBetween")//左右两边的控件贴边，中间等距间隔
            Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
                Text("left", style = TextStyle(background = Color.Red))
                Text("middle", style = TextStyle(background = Color.Yellow))
                Text("right", style = TextStyle(background = Color.Green))
            }
            addSpacer(5.dp)
            Text(text = "SpaceAround")//子控件分为几等分，并且居中
            Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceAround) {
                Text("left", style = TextStyle(background = Color.Red))
                Text("middle", style = TextStyle(background = Color.Yellow))
                Text("right", style = TextStyle(background = Color.Green))
            }
            addSpacer(5.dp)
            Text(text = "Center")
            Row(Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {
                Text("left", style = TextStyle(background = Color.Red))
                Text("middle", style = TextStyle(background = Color.Yellow))
                Text("right", style = TextStyle(background = Color.Green))
            }
        }
    }
}

@Composable
fun addSpacer(size: Dp) {
    //加入间距
    Spacer(Modifier.preferredSize(size))
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyJetpackComposeDemoTheme {
        Greeting("Android")
    }
}

image.png