Create Jetpack Compose project

1. Download AndroidStudio

Download address developer. The android. Google. Cn/studio/prev… Here is the AndroidStudio version 2020.3.1.

2. Create the Compose project

Select a New Project from AndroidStudio,

You can see a preview of the Empty Compose Activity. Select this bar to create an Empty Compose project.

Then fill in the basic information for the project, which is ComposeUnit.

3. Run the project

After a series of automatic downloads and builds, click Run and the interface is as follows:

2. Initial Jetpack Compose project structure

1. Directory structure

In fact, the project structure itself is no different from ordinary AndroidStudio projects, are built according to Gradle Android projects.

In the directory structure, the biggest difference is that in the RES directory, you will not see the layout file. Can not help but sigh, Android more than ten generations of ups and downs, has been unable to shake the XML layout of the adult respect. Now Compose is rising up and announcing, “Your excellency, times have changed……” .

2. Gradle and dependencies

The default created project gradle version is 6.8.2.

Com.android.tools. build is gradle:7.0.0; The org.jetBrains. Kotlin version is 1.4.30, and the website says it requires 1.4.21 or higher.

Based on these gradle configurations, you can play Compose without being in the preview AndroidStudio.

3. Source code structure

Currently there are only mainactivity. kt files in the source code, as well as some theme-related files in uI.theme. Let’s take a look at what’s going on in the source code.

A brief look at the source code of the initial Jetpack Compose project

1. MainActivity.kt

In Android, the first thing to look at is the Acrivity of the entry. As can be seen from the androidmanifest.xml file, the entry Acrivity is MainActivity.

The first thing to understand is who saved the XML layout masters. You need to set up a View in an Activity to show anything. AppCompatActivity is anything that you can compatactivity on androidx.appcompat. App.

And then when you look at the setContent method, you’ve mutinied. This is an extension to AppCompatActivity as shown in the following code. If you don’t know Kotlin, you’ll probably freak out when you see a bunch of {}. In the source code, it can be seen that the second input parameter of the setContent method is a function object. Kotlin syntax specifies that: if the last input parameter of the function is a function object, it can be written outside (); if there is no parameter in (), it can be omitted. So it’s safe to assume that the ComposeUnitTheme lump behind it is essentially a function object.

2. Apply the ComposeUnitTheme

Here is the code in ui.theme.theme. kt, which defines a ComposeUnitTheme method, see that methods and parameters are also named in uppercase, which is probably against the naming convention for better differentiation. You can see that the ComposeUnitTheme method is annotated with @composable, as well as in the setContent second entry. One clue is that Compose probably doesn’t have a class like the Flutter#Widget for @composable annotation methods.

private val DarkColorPalette = darkColors(
        primary = Purple200,
        primaryVariant = Purple700,
        secondary = Teal200
)

private val LightColorPalette = lightColors(
        primary = Purple500,
        primaryVariant = Purple700,
        secondary = Teal200
)

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

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

The ComposeUnitTheme above has two input parameters darkTheme and a function object identified by @composable. As shown below, a darkTheme can be passed in as an argument to indicate the use of the darkTheme, and it is not hard to see that Surface is also a function identified by @composable.

Can follow up have a look at, androidx.com pose. He is in the material provided by the @ Composable methods, it is finally into the participation is still @ Composable identification function object. If I change content to Child, you might smile.

The last thing passed in is Greeting(“toly”), identified by @composable. Incoming entries in parentheses are received by Text.

It’s also not hard to guess that Text itself is a function identified by @composable. Defined in androidx.com pose. In the material.

So now I should be able to add the function ≈ component identified by @composable. Scaffold, Column, Row, Image, Text etc. Custom components are the equivalent of customizing a @Composable annotation. Compare this to the use of a Flutter, you can feel that this is a Flutter.

3. Preview

A very convenient feature of Flutter is thermal reloading, where changes in code can be easily synchronized to the device. Compose does not appear to have such a feature, but you can open a preview panel on the right side of the Compose interface. Components under the DefaultPreview annotations can be previewed, and the preview screen can be synchronized as changes are made. Flutter doesn’t feel strong, but it’s nice to have it, better than constantly restarting it. But Flutter doesn’t support preview, which is also awkward.

4. Jetpack Compose revolution

Since then, some people began to compare Flutter and Compose, asking which one should be learned. Will Flutter be replaced by Compose? Zhang Fengjie trier is looking at Compose. Is the Flutter getting cold? Does Compose have a future? The components of Compose are based on Kotlin’s approach. Will Kotlin completely replace Java? I just want to say: get out of here! .

Compose and Flutter are in the same revolutionary camp. It should be clear whose destiny they are trying to change, namely the destiny of imperative UI programming and the destiny of XML layout. With the foundation of Flutter, you will be able to get up to speed and understand Compose better. If you go directly from the imperative UI programming to Compose, you will experience a change in thinking that is inevitable for both Flutter and Compose. Ideas are hard to instill in you.

For now, Compose is only a declarative UI toolkit for Android. Flutter, on the other hand, is cross-platform, and is now a bit of a cross-platform success. Compose may be moving towards cross-platform development in the future, but Flutter has taken the lead. After more than two years of development, Flutter already has the right time, the right location and the right people. Its mobile ecosystem has been relatively complete.

For Compose’s future, the focus is on ecology. Hopefully, Compose’s stable release will be here soon so I can cry “Goodbye, XML layout master.” Then the ComposeUnit project will be presented to give you a sermon. Compose has Kotlin and declarative UI, which I am interested in because Flutter is always god in my mind. As for asking about Java OR Kotlin, it’s 2021, you still don’t know Kotlin?

Finally, I would like to say that since it is a revolution, some die-hards are bound to vacillate or block it. In fact, of course, interests are relevant, and no one wants to jump out of their comfort zone to another area of development, or to set foot in an uncertain future direction. Not all revolutions will succeed. Not all pioneers will be remembered. But change is bound to have an ideological impact. Just like the Hundred Days reform and reform, once new ideas emerge, old systems and institutions will eventually fall.