preface

The official version of Compose came in July as expected. I also wrote a project for Compose version. The Demo is actually quite simple.

Address: github.com/mCyp/Hoo.

This is its third version:

  1. First edition: Kotlin + Jetpack
  2. 2nd edition: Flutter
  3. Compose + Jetpack

I still remember that when Compose was launched last year, I shared it with the team once. In order to show the function of Preview, I almost couldn’t get off the platform.

In fact, the speed of writing code is ok, but it is really awkward when casting the screen.

First, technology stack use

Hoo functions are small, but complete.

The technology stack of the whole project is Compose + Jetpack. As Google vigorously promotes Android Jetpack, the technology stack for our future Android development is becoming more and more clear. The trend may be that having a good grasp of Jetpack will make it easier to develop applications.

When I used Compose, I found that Lottie supported it very fast, so I used Lottie without hesitation.

The effect is not bad ~

Two, the entry must see

Official document address: Official Introduction

The official Sample: Github Samples

This is the picture I cut in the official website, from the picture, the introduction tutorial support Chinese, directory structure is relatively clear, Chinese developers are still relatively easy to get started.

“Fishing” has, many people have such as the following doubts:

  • For example, Compose is used in place of Android’s View structure.
  • What is declarative programming?
  • What are the pros and cons of developing for Compose?

Let me give you some answers.

1. The pain of building UI with XML

First, let’s make it clear that the traditional Android View structure is object-oriented.

When we start to write Android, I use XML to build UI. When we enter the life cycle of Activity or Fragment, the system will help us parse XML files and build Android View structure tree layer by layer. When we use it, there will be two problems:

First, the findViewById method is inefficient to query the View, each time you need to walk through the Android View tree to get the specified View.

Second, for a custom View, we may need to manage a lot of get and set methods to manage the various states of the View. In some scenarios, it is also difficult to manually manage the add and remove of various views. As a result, some early and intermediate Android developers always frown when talking about custom views.

Since Android has a View structure for a long time, Google naturally did something for it, and that’s where it comes in.

2. What is declarative programming?

For the past few years, we’ve been hearing a lot about declarative UIs in the Android space, including Flutter and Compose. Why is the entire Android industry moving toward declarative UIs?

Maybe some answers can be found in the code, such as we want to build an interface like this and ask, click on the first Button and remove the second Button:

1. Traditional writing

Building an XML layout:

<LinearLayout>
    <ImageView/>
    <TextView/>
    <Button/>
    <Button/>
</LinearLayout>
Copy the code

You then create various View objects in the Activity and use imperative writing to manipulate these objects to set pictures, text, click events, and so on. When we click on the first Button, we also need to get the outer LinearLayout object and dynamically remove the second child Button.

2. com pose

Compose is a declarative UI, you need to describe the interface, you don’t need to manipulate the original View even if the structure of the interface changes, what you need to do is describe what the interface will look like if the state changes. For example:

@Composable
fun WelcomePage(a){
    val state = remember{ mutableStateOf(true)} / /... To get the data
    Column(){
        Image(...)
        Text(...)
        Button(...) // Set state when clicked
        if(state.value){ Button(...) }}}Copy the code

In the code above, it’s clear that this is a Column that corresponds to the original LinearLayout with Image, Text, and Button, and when state is true, another Button is displayed. The state is changed by the click event of the first Button, which I didn’t write down here.

Reorganization in Compose means reconstruction, and when State changes, the @Compose method that describes the UI will be reconstructed. Here’s a diagram to describe adding a View:

Of course, the whole interface reconfiguration is a very expensive operation, corresponding to the time, computing power and battery consumption, Compose of course has been optimized, and only the necessary @compose method will be reorganized. For example, when the above state changes, only the ViewGroup and Text2 will be rebuilt.

3. Why do you choose Compose?

The big brother of declarative UI, Flutter, has been around for a long time. Does it make sense to learn about Compose?

Let me start with my conclusion:

  • If you want to use the Flutter in a real production environment, the Flutter is definitely a better choice because more people have stepped over the pit for you.
  • If you want toKotlinA shuttle, just learning to try new, combinedAndroid Jetpack.ComposeCan serve as a good technical reserve for you.

For example, simply talk about the nice things in Compose.

1. Inheritance of Android development habits

I believe that many students have such a habit:

  • Develop using Kotlin
  • Must be coroutines
  • Complex layouts will useConstraintLayout
  • .

Yes, we still use these things in Compose, which makes it easier for us to get started.

Android Jetpack support

Many of the other libraries in Android Jetpack were the first to support Compose when it was first released, thus enriching the development ecosystem.

Currently, the Jetpack libraries that can be used directly on Compose are:

  1. Navigation
  2. Paging
  3. ViewModel
  4. LiveData
  5. hilt
  6. lifecycle

In theory, the uI-unrelated library Compose on Android Jetpack should be supported. In my Hoo, Using the Android Jetpack library such as Paging, Navigation, ViewModel and LiveData, plus coroutine and Kotlin, the whole development process is much easier!

3. Less code

Compose allows us to focus more on UI development, and declarative UI can significantly reduce the number of methods and package size. In Google’s before and after article for Jetpack Compose:

For our Tivi app, we saw a 41% reduction in APK size and a 17% reduction in methods after using Compose

All of this is predictable, such as simpler apis for animations and touch events.

4. Preview

Compose supports Preview of the code, as shown below:

The Compose code can be previewed directly on the right after it is written, but the update speed is not as easy as the hot reload of Flutter.

5. Other

Some of the other points might be a little bit like the Flutter.

  • For example, for example, Compose’s theme supports the dark mode native, and the developers can customize the theme by providing two sets of colors.

  • Scaffolds allow easy integration of Material components such as Topbar, FloatingActionButton and BottomNavigationBar, which can save time.

  • In addition, if you cannot easily achieve the effect in Compose, you can call the Android native View by means of the AndroidView.

Four, teasing

Of course, Compose still has some sinks.

1. Poor ecology

For example, Compose is a new UI framework, and while Android Jetpack supports it for the first time, there’s no question that the ecosystem isn’t rich.

For non-basic common UI, Google provides solutions such as CSSS IST, which helps you solve some of the common libraries.

If you don’t have the wheels you want, you can only build your own or reference Android native controls. But it’s also an opportunity to write good open source libraries when you feel like you’re missing something

2. Few learning resources

When I was learning the Flutter, I encountered some kind of effect, and maybe I googled it and I got the answer.

For Compose at this stage, you’ll probably have to do it yourself

3. The navigation

As an official navigation-navigation integration, Navigation is supported for transition animations between pages in non-compose code, which is currently not supported in Compose (now that you have a look at the supported libraries).

For example, if you use Paging + LazyColumn, you will be able to record the current page position when switching between pages. When adding a Header, you will not be able to do so.

Of course, it could be my posture.

The last

For the first time to write the Compose project, it is inevitable that there will be some minor problems. Welcome to correct me. Thanks ~

Reference article:

From functional programming to declarative UI, Jetpack Compose is an official document for Android