Table of contents
1. Prerequisites
Download the latest version of AndroidStudio, my current version is as follows:
Pay attention to configure the kotlin environment
2. New project
The empty Activity in the new project is the new Compose project
Then you will get a Compose interface application
Why learn Compose can read Guo Lin's article:
Original: Jetpack Compose tutorial written for beginners, why learn Compose?
The automatically generated code here involves some basic knowledge of Compose. We have to understand these basic knowledge clearly before we can start the subsequent study of Compose.
First look at the code in the onCreate function, where a setContent function is called. Note that this name is very particular, because every Android developer will be very familiar with the name of another function: setContentView. Therefore, when we used View to write the interface in the past, we would call the setContentView function to set the interface. After using Compose, since View is no longer used, the new setContent function is used to set the interface instead.
The setContent function will provide a Composable scope, so we can call the Composable function at will in its closure.
So what is a Composable function? To put it simply, it is above a function, declared using @Composable, then it is a Composable function.
Looking at the above code, you will find that the Greeting function is a Composable function.
Note that Composable functions can only be called in Composable scope, so if you try to call Greeting function outside the closure of setContent function, you will find that compilation will not pass.
In addition, all Composable functions also have a customary habit, that is, the first letter of the function name needs to be capitalized. This is very different from Java's function naming habits, because Java function names usually use the camel case with the first letter lowercase.
But it is precisely because of this that the first letter of the Composable function name is specifically required to be capitalized, so that we can quickly judge whether a function is a Composable function through the function name more intuitively, otherwise we need to find the definition location of this function. Check to see if it has @Composable annotations.
Then according to this rule, we can know that the functions ComposeTestTheme and Surface nested in the setContent function are both Composable functions.
Among them, the ComposeTestTheme function is automatically created for us by Android Studio. It is mainly used to set and customize the theme of the project. We may discuss this topic in a later article.
The Surface function is a general-purpose function provided in the Material library. Its main function is to make the application better adapt to Material Design, such as controlling the height of the shadow, controlling the color of the content, cropping the shape, and so on. Since we are still beginners, there is no need to know too much about this Surface function for the time being, so I won't explain too much here.
In addition, you will find that Android Studio also generated a GreetingPreview function for us. It is also a Composable function, but it has one more @Preview annotation than ordinary Composable functions. This annotation indicates that this function is used to quickly preview the UI style.
In other words, the UI written in the GreetingPreview function can realize quick preview without running the program on the mobile phone. The operation method is to click the Split option in the upper right corner on the main editing interface of Android Studio, and then compile the project.
My personal suggestion is to use a real device to see the effect. This preview is still not very easy to use. The following is my real device effect:
