Jetpack compose introduction to mastery

Preface

Q1 The company made a training plan , Some people, as lecturers, should report the training topics . At that time, it was just from several Android From the project , Just to see Jetpack Released a new thing ——Compose, I was attracted by its fast real-time packaging , Just prepare to investigate , So I reported this topic .

Noun analysis ：
The technical terms used below may be different , To avoid confusion , Let's make a noun analysis table ：

Compose In official documents , A new term has been invented ——“ Microcomponent ”
Microcomponent It can be understood as Android Various currently used View, It can also be understood as H5 It's often said in the front end Components .

1. Compose What is it?

Jetpack Compose Is a new tool for building native interfaces Android tool kit . It simplifies and speeds up Android Interface development on . Use less code 、 Powerful tools and intuitive Kotlin API, Quickly make the application vivid and exciting .

It sounds a little abstract , I don't know what to say . Let me translate ：

Jetpack Compose It's based on Kotlin API, Redefinition Android A set of frames for layout , It can be implemented more quickly Android Native applications . Save development time , Reduce package volume , Improve application performance .

Save development time , Reduce package volume , Improve application performance . This sounds tempting , Let's see how it works .

1.1 Android Studio Yes Compose Support for

Powerful preview
This feature is based on the new version Android Studio Yes Compose Support for .
New version of the Android Studio Arctic Fox( Now or Canary edition ) Many new tools have been added to support Jetpack Compose New characteristics , such as ： Real time text 、 Animation preview , Layout checking and so on .

1.1.1 Powerful preview

new Android Studio Added real-time preview of text changes , Can be in Preview、 Simulator 、 Or real-time preview on the real machine .

1.1.2 Animation preview

Can be in AndroidStudio In view 、 Check or play the animation , It can also be played needle by needle .

1.1.3 Layout checker

Android Studio Arctic Fox Added layout monitor pair Compose Support for , Can be analyzed Compose The hierarchy of components . As shown below ：

1.1.4 Interactive preview

In this mode , You can interact with interface components 、 Click on the component , And see how the state changes . In this way , You can quickly get feedback on how the interface reacts , And can quickly preview the animation . To enable this mode , Just click “ Interaction ” Icon , The system will switch preview mode .

To stop this mode , Please click... In the top toolbar Stop Interactive Preview.
Above is AndroidStudio Yes Compose Support for , It's a big deal .

1.2 Jetpack Compose Before and after use

Do you think Compose Just added preview function ？ That's not .
Switch from normal application to Compose application , Your application speed and performance can be greatly improved .
Let's take a look at one Google Application examples of official transformation .

1.2.1 APK Size reduction

Indicators that users are most concerned about , is APK size .
Here's the opening Resource reduction Minimal release of APK ( Used R8) adopt APK Analyzer The measured results :

A description of the above figures :
1、 Used APK Analyzer Reported “APK file size” ( Not the size of the download ). APK Size analysis
2、 In the use of the Compose after , We found that APK The size has shrunk 41%, The number of methods is reduced 17%

1.2.2 Lines of code

Although the number of lines of source code cannot be used as a standard to measure the quality of software , But you can compare an experiment in “ Slimming ” How much effort has been made above , It provides a statistical perspective for observing experimental changes .

As you can see from the diagram ,XML The number of rows has been greatly reduced 76%. goodbye , Layout file , as well as styles、theme Wait for the others XML file .
meanwhile ,Kotlin The total number of lines of code has also dropped .
This is it. APK A big part of the reason for losing weight .

1.2.3 Build speed

Build speed is an indicator that developers are very concerned about .

Here we need to make some explanations ：
“ Full access Compose” Using the latest version of Dagger/Hilt, This version uses Android Gradle Plugin 7.0 New in ASM API. Other versions use older Hilt edition , It uses different mechanisms , It will slow down the generation seriously dex Time of file .

besides ,Kotlin Compiler and Compose What compiler plug-ins do for us , Such as Place memory 、 Fine grained reorganization Etc , Build time can be reduced 29%, It's amazing .

2. How to use... Gracefully Compose

It says a lot Compose The advantages of , that , How do we use it next .

2.1 Get ready

At the beginning of use Compose Before , You need to have Basics :

download Android Studio Arctic Fox Or later
Kotlin 1.4.32 Or later
Kotlin Language accessibility

2.2 How to learn quickly Compose

Next , I'll introduce you to 2021 Recently sorted out in 《Jetpack Compose Full development manual 》, Hand in hand to teach you Jetpack Compose From entry to mastery .
This information is intended for those who wish to know 、 Study 、 application Android Jetpack Compose A reference for my little partner .
This material is open source , Friends in need go by themselves GitHub download .

3. Compose Is it worth trying

As mentioned earlier Compose Characteristics of , Advantages and disadvantages , And how to get started 、 How to use it correctly .
that Compose Is it worth applying to the project ？

These still need to be analyzed on a case by case basis .
If you are a new project .
I suggest you try it boldly , After all, smart “ Partial refresh ” Mechanism , Is an important means to improve page performance . Moreover, declarative layout should replace traditional layout in the future xml Layout form , This is the general trend .

If you are rebuilding an existing project .
First , You can evaluate whether you already have the ability to start Compose The basic ability of ——kotlin Flexible use of language .
Compose It can be said that it is for Kotlin Tailored 、 And View model A closely bound derivative , With Kotlin and View model,Compose The role of can be brought into full play , You can achieve the previous goal ：

• Build time can Reduce 29%
• XML The number of rows has been greatly reduced 76%
• APK The size has shrunk 41%
• The number of methods is reduced 17%

If you already have the above abilities , Then it can be piloted on a small scale , Or start with pages with high performance requirements .

It is recommended to introduce a single page first , Finally, make a full replacement .Google This is what the official transformation cases do .
Last , Let go , Roll it up ！

summary

This is the end of it , Put a little benefit at the end of the article , The following is a story about Flutter Learning ideas and direction , Engaged in Internet development , The most important thing is to learn technology well , And learning technology is a slow and hard road , You can't rely on a moment of passion , It's not like you can learn it in a few days and nights , We must form the habit of studying hard at ordinary times , More effective learning needs to be achieved .

Because of the large amount of content, I only put a general outline , If you need to learn mind mapping in more detail, you can scan the QR code below for free .

And free premium UI、 performance optimization 、 Architect course 、NDK、 Hybrid development （ReactNative+Weex） Wechat applet 、Flutter All aspects Android Advanced practice technical data , And there are technical experts to discuss, communicate and solve problems together .**

Last , The information in the article is too big to put . Friends in need, if necessary Scan the QR code below for free .

Change your life , There is no shortcut , This road needs to be taken in person , Only in-depth thinking , Constantly reflect and summarize , Keep your passion for learning , Step by step to build their own complete knowledge system , Is the ultimate way to win , It's also the mission of programmers .

author ： Write online bug
link ：https://juejin.cn/post/6984769152921632776