The last article covered the capabilities of Compose and essentially used Kotlin functions to describe the UI. Next, we’ll learn how to use it, starting with layout as we did with XML, and then leading up to some common controls.

Zero, environment building

Because Compose is still an alpha release, the API is unstable and must be used in the Preview version of Android Studio, and even requires the Gradle plugin to be an alpha version, so an introduction to setting up an environment now is likely to turn out to be an error. At the time of the release, the tutorials and documentation on the official website are outdated. If you want to try it yourself, I suggest you check out github.com/android/com… Demo, select a higher version number.

Once the environment is configured, you need to configure the @preview function in your code to Preview it.

override fun onCreate(savedInstanceState: Bundle?). {
    super.onCreate(savedInstanceState)
    setContent { // Equivalent to setContentView
        Content()
    }
}

@Preview
@Composable
fun Preview(a) { // Note: @preview cannot have arguments
    Content()
}

// Content is a @composable
Copy the code

Multiple Previews can be configured, and each Preview generates a Preview image.

In the Compose framework, the UI consists of a series of interlinked composables declared with annotations. Composable is similar to View. For most scenarios, the pre-composable provided by the framework is fine. For special scenarios, the Composable can also be customized to meet requirements or optimize performance. As usual, we start with a preset Composable.

Column, Row

When it comes to layout, beginners usually start with LinearLayout and FrameLayout, and gradually expand to RelativeLayout and ConstraintLayout (times have changed, of course, Young people today are also likely to start with ConstraintLayout. The purpose of these layouts is to plan the arrangement of the child views, determine the position of the child views, and themselves only draw the background.

In both XML and Compose, the compiled product is still a View, and our past experience is still useful, so we can bridge the two by looking for concepts that are familiar to us in Compose.

Column and Row are vertical and horizontal modes of the LinearLayout respectively. Their internal sub-views are closely arranged in order, while Column and Row themselves are wrAP_content by default. And there is no setting like match_parent. (Modifier. FillMax will fill the screen directly)

Another commonly used LinearLayout property is gravity, which in Compose is equivalent to the verticalAlignment of Row and horizontalAlignment of Column.

Two, for example

I haven’t tried it yet. Here’s a common user information display that looks something like this:

The renderings above are complete screenshots of the Composable Preview in Android Studio. Unlike XML, the Composable Preview does not simulate what it looks like on the phone screen, but each Preview generates a small piece of its own content. The preview looks good.

Write a Content implementation:

@Composable
fun Content(a) {
    val imageRes = imageResource(id = R.drawable.juejin_avatar_300x300)
    Row(
        modifier = Modifier
            .background(Color(0xFFBCE9FF))
            .fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            imageRes,
            modifier = Modifier
                .preferredSize(60.dp, 60.dp)
                .padding(8.dp)
                  .background(Color(0xFF343434))
                .clip(CircleShape)
        )
        Column(
              modifier = Modifier.background(Color(0xFFE0FFE3)),
            horizontalAlignment = Alignment.Start
        ) {
            Row(
                  modifier = Modifier.background(Color(0xFFFFE5E0)),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    text = "Till the wind is frost.",
                    style = TextStyle(
                        fontSize = 22.sp
                    ),
                    modifier = Modifier
                          .background(Color(0xFF868FBA))
                )
                Spacer(modifier = Modifier.width(4.dp))
                Text(
                    text = "@Rhode Island",
                    color = Color.Blue,
                    style = TextStyle(
                        fontSize = 20.sp
                    ),
                      modifier = Modifier.background(Color(0xFF96BA86))
                )
            }
            Text(
                text = "ko~ko~da~yo~",
                color = Color(0xff666666),
                modifier = Modifier.background(Color(0x00ffcc)),
                style = TextStyle(
                    fontSize = 16.sp
                )
            )
        }
    }
}
Copy the code

Look at the random layout of the code. Does your blood pressure go up? Compose: Compose Compose Compose Compose Compose Compose Compose Compose Compose Compose Compose Compose Compose Compose Compose Compose Compose Compose Compose Compose Compose Compose Compose Compose

Take a look at the result after running:

Three, the first surprise and pit

I was surprised by Android Studio’s support for Compose. The preview effect in the Activity and the color picker and image viewer on the left are the same as in XML, making debugging for Compose much easier and adding some anticipation to the mix.

In addition, Compose’s Color class finally has a nice constructor for passing in hexadecimal numbers directly. The extension functions for DP and SP are also excellent, concise, unambiguous and highly readable.

Writing a few dozen lines of code for the demo also hit a snafus:

  1. The IC_launcher loading drawable has crashed
  2. Preview does not update in a timely manner, requiring manual refreshes after modifications and, in many cases, rebuilding the project to show the updates
  3. The Stack layout mentioned in the official documentation (corresponding to FrameLayout) is not found, it should have been optimized or renamed

The construction of the environment and writing the code was a bit slower than expected. For Compose, I have to do the layout of the constraint tomorrow.

If I can keep it up for seven days, I will write a full article about Compose in detail. Hopefully, I can achieve my goal.

(Now that you’ve seen this, how about a compliment before you go?)