环境设定：

先去 https://developer.android.com/studio

下载Android Studio

接着安装完成之後

选择 Create new Project -> Empty Compose Activity

接着刚下载的人可能需要等他下载一些套件，可以先去喝杯茶休息休息XD，我用手机网路花了23分钟～

完成後我们来看看熟悉的目录：

我们发现除了Activity之外还多了一个Ui.theme的package，点开就会发现里面预设包含

-Color.kt
-Shape.kt
-Theme.kt
-Type.kt

之後我们定义相关变数(尤其是Theme）就可以定义在这里

MaterialTheme

接着我们就执行看看预设的专案吧～

就是很简单的Show出Hello Android!

现在我们来看看程序码，跟以前用xml的差别在於，setContentView里面放了一段奇怪的语法

MyApplicationTheme {
                // A surface container using the 'background' color from the theme
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
                    Greeting("Android")
                }
            }

这个我们可以用一层一层的Component的想法去分析他：

MyApplicationTheme里面含有一个Surface元件，Surface元件里面含有一个Greeting元件。

那这个MyApplicationTheme是什麽东西呢？

我们去ui.theme里面点开theme.kt看看：

@Composable
fun MyApplicationTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
            colors = colors,
            typography = Typography,
            shapes = Shapes,
            content = content
    )
}

所以其实他就是一个function，里面定义了他会显示什麽东西

那我们先来看Body:

val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

这应该算是基本的kotlin语法，用if-else给colors赋值

MaterialTheme(
            colors = colors,
            typography = Typography,
            shapes = Shapes,
            content = content
    )

再来就是这个function要显示什麽东西，他使用了MaterialTheme来当作最後要显示的元件，参数除了上面定义的颜色字体形状外，还有我们传进来的contnet，他是一个@Composable的function，即是UI元件。

Surface

回到最外层：

Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
                    Greeting("Android")
}

看看原始定义:

Material surface is the central metaphor in material design. Each surface exists at a given elevation, which influences how that piece of surface visually relates to other surfaces and how that surface casts shadows.

@Composable
fun Surface(
    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(color),
    border: BorderStroke? = null,
    elevation: Dp = 0.dp,
    content: () -> Unit
): @Composable Unit

简单来说，你可以利用他定义的属性快速建立出你要的平面效果，比如说

Surface的部分就是设定为

Surface(
    color = MaterialTheme.colors.primarySurface,
    border = BorderStroke(1.dp, MaterialTheme.colors.secondary),
    shape = RoundedCornerShape(8.dp),
    elevation = 1.dp
)

Text

最後就是里面的

Greeting("Android")

他呼叫了另一个定义在下面的composable元件：

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

参数是一个String，里面则是另一个composable元件: Text

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    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,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
)

可以看到他的参数其实就是本身文字要显示的样子，像是fontWeight, fontFamily, fontSize等等, 而内容就的参数是text。

Preview

再来就是使用@Preview来看自己定义的composable元件长什麽样子，以预设来说

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

他在defaultPreview()这个function上面使用了Preview，所以我们看图片右边就会显示出这个元件，如果觉得太小，可以点选右上角的design就可以把code隐藏然後整个画面显示出来。

这样就讲完了预设的activity里面在做什麽了，简单来说，Jetpack compose的UI建构方式是由一个一个定义为composable的function组成，藉由一层包一层的方式来达到UI的建构。