Helloworld at the Beginning of Jetpack Compose

HelloWorld at the beginning of Jetpack Compose Introduction:

HelloWorld at the beginning of Jetpack Compose

Foreword
Earlier, I updated the articles in the Jetpack Architecture series. If you don't know Jetpack yet, you can move to the Android JetPack series articles, which are being updated continuously.
From now on, I will continue to update the articles in the Jetpack Compose series, Compose will be the next big change in native development!

HelloWorld at the beginning of Jetpack Compose.What is Jetpack Compose


Jetpack Compose is a new toolkit for building native Android interfaces. It's based on a declarative programming model, so you just describe how your interface should look, Compose does the rest, and the interface updates automatically as your app's state changes.
The above is the official description. Simply put, how do we implement a function before this? We write Java/Kotlin code in Activity and layout code in xml. This way is the way we have used for a long time, and Jetpack Compose completely abandoned the previous way and created a new "use code" The way to write pages, and this way, has a nice name, called declarative UI.

Flutter vs Jetpack Compose
When it comes to declarative UI, you must think of the recent "hot" Flutter technology, which claims to cross various platforms and has a comparative advantage with Android. Many people not only like to compare Flutter and Jetpack Compose, but also prefer to compare with Android. than, and came to some conclusions, those conclusions I do not judge right or wrong, I am not qualified to judge, but if you ask me, an Android developer Flutter, Jetpack Compose or Android how should I choose, I think these two There is no comparability at all, because it is not the same thing at all, and personal choices can be considered in the following two situations:

1. HelloWorld at the beginning of Jetpack Compose.The company has no cross-platform business requirements


If your company has no cross-platform business requirements, apart from jumping to a company that has Flutter needs, learning Flutter is of little significance. You may retort that the skills are not overwhelming. I don’t agree, but I don’t refute, but you What you need to know is that the company is business-oriented, and no matter how much you know, the so-called talent that has nowhere to show will not help.

2. HelloWorld at the beginning of Jetpack Compose.The company's new cross-platform business needs


If your company has added cross-platform business requirements, you have to learn Flutter. What you need to know at this time is that switching from Android to Flutter is equivalent to changing careers. If you are optimistic about the company's development and plan to fight for a long time, you You can learn and use it in the company's business. If you are not optimistic about the company's development or do not want to change careers, then you can only delete the library and run away~
And Compose is one of Google's big moves in the past two years. If you want to stick to the road of Android development, then learning or understanding Compose must be essential, it's just a matter of sooner or later.

Jetpack Compose HelloWorld
New Project
To use Compose, we need to download the latest preview version of Android studio 4.2. We can directly create a new Compose project, or we can add configurations to existing projects. Here we will create a new project directly.

We choose to create a new empty Compose Activity project, enter the project location and fill in the package name in turn.
Let's first run the default effect of the generated project, as shown in the following figure:

Project configuration
After the new creation is successful, let's first take a look at some of the more special configurations in build.gradle , which are also what we need to configure when adding Compose to the existing project
defaultConfig {
minSdkVersion 21
}
buildFeatures {
// start compose
compose true
}

//Set the compiled version to 1.8
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = "1.8"
useIR = true
}
composeOptions {
kotlinCompilerVersion '1.4.0'
kotlinCompilerExtensionVersion '1.0.0-alpha05'
}
}
// compose
dependencies {
implementation 'androidx.compose.ui:ui:1.0.0-alpha05'
implementation 'androidx.ui:ui-tooling:1.0.0-alpha05'
implementation 'androidx.compose.foundation:foundation:1.0.0-alpha05'
implementation 'androidx.compose.material:material:1.0.0-alpha05'
implementation 'androidx.compose.material:material-icons-core:1.0.0-alpha05'
implementation 'androidx.compose.material:material-icons-extended:1.0.0-alpha05'
implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-alpha05'
implementation ' androidx.compose.runtime :runtime-rxjava2:1.0.0-alpha05'
androidTestImplementation 'androidx.ui:ui-test:1.0.0-alpha05'
}

The compose version we use here is version 05, and the minimum version supported by compose is Api 21, so we set the minimum version to 21.
MainActivity code
Next, let's look at the code generated by default in MainActivity
class MainActivity : AppCompatActivity () {
override fun onCreate ( savedInstanceState : Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ConposeSimpleTheme {
// A surface container using the 'background' color from the theme
Surface(color = MaterialTheme.colors.background) {
Greeting("Android")
}
}
}
}
}
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
ConposeSimpleTheme {
Greeting("Android")
}
}

In compose, all composition functions must be annotated with @Composable. The conposable annotation can inform the Compose compiler that this function needs to be converted into a page display, and like the suspend function in the coroutine , only another one can be called in the compose annotation function. The compose annotation function, the @Preview annotation is convenient for developers to preview the effect without running, that is to say, the DefaultPreview function is used by the developer himself, and the setContent in onCreate contains the content of the page. We will ignore the theme here first. I'll explain it later.
has nothing to do with the native TextView . In the same way, we define a HelloWorld by ourselves. The code is as follows Show:
setContent {
Greeting("Android")
HelloWorld( )
}

@Composable
fun HelloWorld( ) {
Text( text = "Hello World!")
}

The result of running is as follows:

The two Texts overlap here, which is obviously not the result we want. So what if we want the text to be arranged vertically or horizontally?
vertical or horizontal layout
To arrange vertically, we can use the Column layout to wrap the composition function, and the code to modify the setContent is as follows:
setContent {
Column {
Greeting("Android")
HelloWorld( )
}
}

The running result is shown in the following figure:

To arrange horizontally, we only need to modify the Column to Row, the code is as follows:
setContent {
Row {
Greeting("Android")
HelloWorld( )
}
}

Related Articles

Explore More Special Offers

  1. Short Message Service(SMS) & Mail Service

    50,000 email package starts as low as USD 1.99, 120 short messages start at only USD 1.00