I have read this article and feel particularly inspired. Now I recommend it to you. I have learned a lot in this article and I hope you can improve after reading it.
Akiko: Still fantasia
Link: https://www.jianshu.com/p/17bb1c36eacb
A new Android native UI development framework, Jetpack Compose, was unveiled at Google/IO this year. Like Apple’s SwiftIUI, Jetpack Compose is a declarative UI framework. With android and Apple launching their own UI development frameworks Jetpack Compose and SwiftIUI this year, mobile operating systems have officially embraced declarative UI development mode.
The past and present of declarative UI
In fact, declarative UI is not a new technology, as early as 2006, Microsoft has released its new generation of interface development framework WPF, which uses XAML markup language, supports bidirectional data binding, reusable templates and other features.
In 2010, the Qt team, led by Nokia, released its next-generation interface solution, Qt Quick, which was also Declarative. Qt Quick was originally named Qt Declarative. QML also supports data binding, modularity, and built-in JavaScript, allowing developers to create simple, interactive prototypes using only QML.
Declarative UI frameworks have exploded in recent years, culminating in Web development. React laid a solid foundation for declarative UI and will continue to lead its future development. The subsequent release of Flutter brings the idea of declarative UI to mobile development…
Declarative UI means that you describe what kind of UI you want, and when the state changes, the interface “renders” as described earlier to get the state exactly right, rather than telling the program what to do step by step and maintaining various states. Digression, this is not the focus of today’s article, a little understanding of good, other will not be extended in this article. More introduction about declarative, suggested a look at this article: https://zhuanlan.zhihu.com/p/68275232
Let’s return to the focus of this article, Jetpack Compose.
Jetpack Compose
Jetpack Compose is a modern toolkit for building native Android UIs based on a declarative programming model, so you can simply describe what the UI looks like, while Compose does the rest — your UI updates automatically when the state changes. Because Compose is built on Kotlin, it is fully interoperable with the Java programming language and has direct access to all Android and Jetpack apis. It’s also fully compatible with existing UI toolkits, so you can mix old views with new ones, and design with Material and animation from the start.
If you need it, you can share it with me or click the link below
Android learning PDF+ architecture video + interview document + source notes
If you need anything else, you can also check it out on GitHub. The following information will be uploaded to GitHub as well
Jetpack Compose environment preparation and Hello World
Whenever we learn a new language, we start with a Hello world, and today we’re going to start Jetpack Compose with a Hello world. To get the best experience of Jetpack Compose, you’ll need to download the latest version of Android Studio preview (Android Studio 4.0). Because Android Studio 4.0 has added support for Jetpack Compose, such as the new Compose template and Compose in-time preview.
There are two ways to start your development efforts with Jetpack Compose:
- Add Jetpack Compose to your existing project
- Create a new application that supports Jetpack Compose
Let’s take a look at each of these methods.
1. Add Jetpack Compose to your existing project
If you want to use Jetpack Compose in an existing project, you need to configure the necessary Settings and dependencies:
Gradle configuration: In your app directory, build. Gradle, set the minimum API version supported by your app to 21 or higher, and enable Jetpack Compose enable.
android {
defaultConfig {
...
minSdkVersion 21
}
buildFeatures {
// Enables Jetpack Compose for this module
compose true}... // Set both the Java and Kotlin compilers to target Java 8. compileOptions {sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = "1.8"}}Copy the codeFor Jetpack Compose, add the following code to the build. Gradle directory:
buildscript {
repositories {
google()
jcenter()
// To download the required version of the Kotlin-Gradle plugin,
// add the following repository.
maven { url 'https://dl.bintray.com/kotlin/kotlin-eap'}... dependencies { classpath'com. Android. Tools. Build: gradle: 4.0.0 - alpha01'
classpath 'org. Jetbrains. Kotlin: kotlin - gradle - plugin: 1.3.60 eap - 25'
}
}
allprojects {
repositories {
google()
jcenter()
maven { url 'https://dl.bintray.com/kotlin/kotlin-eap'}}}Copy the codeGradle: Add Jetpack Compose dependency to build. Gradle: Add Jetpack Compose dependency to build. Gradle: Add Jetpack Compose dependency to build.
dependencies {
// You also need to include the following Compose toolkit dependencies.
implementation 'androidx. UI: UI - tooling: 0.1.0 from - dev02'
implementation 'androidx. UI: UI - layout: 0.1.0 from - dev02'
implementation 'androidx. UI: UI - material: 0.1.0 from - dev02'. }Copy the codeOk, that’s the end of your preparation and you’re ready to start writing code, but there’s another way to plug into Jetpack Compose, so let’s take a look.
2. Create a new app that supports Jetpack Compose
Creating a new project that supports Jetpack Compose is a lot easier than adding It to your existing app, because Android Studio 4.0 provides a new Compose template that you can use to create your app. All of the above configuration items automatically do it for us.
To create an application that supports Jetpack Compose, follow these steps:
- If you are in the Welcome window of Android Studio, click Start a New Android Studio Project. If you already have the Android Studio project open, select File > New > New Project from the top menu bar
- In the Select a Project Template window, Select the Empty Compose Activity and click Next
- In the Configure Your Project window, do the following steps: a. B. Note that Kotlin is the only option in the language down menu because Jetpack Compose can only run if it is written in Kotlin. C. Minimum API level drop-down list, select 21 or higher
- Click Finish
Now you can write your app using Jetpack Compose.
3. Hello wold
Add the following code to mainactivity.kt:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Text("Hello, Android Tech grocery store")}}}Copy the code
Jetpack Compose is built around the Composable function. These functions allow you to programmatically define your application’s UI by describing the shape and data dependencies of your application, rather than focusing on the UI building process. To create a Composable function, just add a @composable annotation in front of the function name. The above Text is a Composable function.
Define a Composable function
A composable function can only be called in the scope of another composable function. To make a function into a composable function, add @composable to the function name and move the setContent part of the above code outside. Extract into a composable function and pass a parameter name to the text element.
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Greeting("Android Technology Grocery Store")
}
}
}
@Composable
fun Greeting(name: String) {
Text(text = "Hello $name!")}Copy the code
Four, layout,
UI elements are hierarchical, with elements contained within other elements. In Jetpack Compose, you can build your UI hierarchy by calling composable functions from other Composable functions.
In the Android XML layout, if you want to display a vertical layout, the longest one is the LinearLayout. Set the Android :orientation value to vertical, and the child elements will be arranged vertically. How to achieve vertical layout? Let’s just add a couple of Text.
1. Add multiple texts
In the example above, we added a Text display Text, now we add three Text, code like this:
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
NewsStory()
}
}
}
@Composable
fun NewsStory() {
Text("I'm super ❤️JetPack Compose!")
Text("Android Technology Grocery Store")
Text("Still Fantsea.")}Copy the code
As you can see from the figure above, we have added three text elements, but since we haven’t provided any information on how to arrange them, the three text elements are drawn on top of each other, making the text unreadable.
2. Use the Column
To make the superimposed Text vertically aligned, we need to use the Column function. Does this look familiar to those who have written about flutter? Yes, the name and function of the Column Widget inside the Flutter are exactly the same, even their properties are identical.
@Composable
fun NewsStory() {Column {// Add Column so that the layout is vertically arranged."I'm super ❤️JetPack Compose!")
Text("Android Technology Grocery Store")
Text("Still Fantsea.")}}Copy the codeThe effect is as follows:
As you can see, the previous overlapping layout is now vertically aligned, but by default, one after the other, without any spacing, starting at the top left corner. Next, let’s set some styles for Column.
3. Add style to Column
When Column () is called, you can pass parameters to Column () to set the size, position, and arrangement of the Column’s children.
@Composable
fun NewsStory() {Column (crossAxisSize = LayoutSize.Expand, modifier = Spacing(16.dp)){"I'm super ❤️JetPack Compose!")
Text("Android Technology Grocery Store")
Text("Still Fantsea.")}}Copy the code
As shown in the image above, we fill in the padding. The other effects are almost the same. The Settings in the code above are explained as follows:
- crossAxisSize: Specify Column component (note: Compose all components are composable functions and cross SAXisSize to LayoutSize.Expand indicates that the Column width should be the maximum width allowed by its parent component. It’s match_parant in a traditional layout, and it has a value of LayoutSize.Wrap, which you can tell by its name, is wrap_content in a traditional layout.
- Modifier: Enables you to make other format changes. In this case, we will apply a Spacing modifier that distances Cloumn from the surrounding views.
4. How to display a picture?
In the original Android layout, there is an ImageView control for displaying images. You can set the local image address or Bitmap to display the images.
We will download the image locally, add it to explorer and call it header.png. We will change the NewsStory () method above to get the image from resources folder and draw the image by DrawImage() :
@Composable
fun NewsStoryVal image = +imageResource(r.map.header) Column (crossAxisSize = LayoutSize.Expand, Modifier = spacer (16.dp)){// Add Column to vertical alignment // Display image DrawImage(image) Text("I'm super ❤️JetPack Compose!")
Text("Android Technology Grocery Store")
Text("Still Fantsea.")}}Copy the code
As you can see, the image doesn’t display in the correct column. Let’s fix it.
Images have been added to the layout, but are expanded to fill the entire view, and are stacked with text, with text displayed on top. To set a graphic style, place it in Container(another control similar to flutter)
- Container: A generic content object for holding and arranging other UI elements. You can then apply the size and location Settings to the container.
@Composable
fun NewsStoryVal image = +imageResource(r.map.header) Column (crossAxisSize = LayoutSize.Expand, Modifier = Spacing(16.dp)){// Add Column to align the layout vertically // Place it in the Container and set the size Container(expanded =true, height = 180.dp) {// DrawImage(image)}"I'm super ❤️JetPack Compose!")
Text("Android Technology Grocery Store")
Text("Still Fantsea.")}}Copy the code
- : Specify the size of the Container, which defaults to false (the size of the Container is the size of the child component, equivalent to wrap_content). If set to true, specify that the size of the Container is the maximum size allowed by the parent control, equivalent to match_parent.
- Height: Sets the height of the Container. The height property takes precedence over expanded, so expanded is overridden. In the example above, set height to 180dp, that is, the width of the Container is the width of the parent control and the height is 180DP
5. Add spacing Spacer
We can see that there is no spacing between the image and the text. In traditional layout, we can add the Margin property and set the spacing. In Jetpack Compose, we can use HeightSpacer() and WidthSpacer() to set the vertical and horizontal spacing
HeightSpacer(height = 20.dp) // Set the vertical spacing to 20dp WidthSpacer(width = 20.dp) // Set the horizontal spacing to 20dpCopy the codeIn the example above, let’s add 20dp space between the image and the text:
@Composable
fun NewsStoryVal image = +imageResource(r.map.header) Column (crossAxisSize = LayoutSize.Expand, Modifier = Spacing(16.dp)){// Add Column to align the layout vertically // Place it in the Container and set the size Container(expanded =true} HeightSpacer(height = 20.dp) // Add 20dp (height = 180.dp)"I'm super ❤️JetPack Compose!")
Text("Android Technology Grocery Store")
Text("Still Fantsea.")}}Copy the code
V. Use Material Design
Compose is designed to support Material Design principles. Many components implement Material Design and are available right out of the box. In this section, you’ll use some Material widgets to style your app
1. Add Shape styles
Shape is one of the pillars of Material Design system. We use clip function to round the image.
@Composable
fun NewsStoryVal image = +imageResource(r.map.header) Column (crossAxisSize = LayoutSize.Expand, Modifier = Spacing(16.dp)){// Add Column to align the layout vertically // Place it in the Container and set the size Container(expanded =true. Height = 180.dp) {Clip(Shape = RoundedCornerShape(10.dp)) {// Display image DrawImage(image)}} HeightSpacer(height = 20.dp) // Add vertical spacing 20dp Text("I'm super ❤️JetPack Compose!")
Text("Android Technology Grocery Store")
Text("Still Fantsea.")}}Copy the code
The shape is not visible, but our image has been cropped to the set shape style, so the image has rounded corners as shown in the image above.
2. Add some styles to Text
With Compose, you can easily leverage Material Design principles. Apply the MaterialTheme () to the created component
@Composable
fun NewsStoryVal image = +imageResource(r.map.header) // Use Material DesignMaterialTheme() {Column (crossAxisSize = LayoutSize.Expand, modifier = Spacing(16.dp)){ Set the size Container(expanded =true. Height = 180.dp) {Clip(Shape = RoundedCornerShape(10.dp)) {// Display image DrawImage(image)}} HeightSpacer(height = 20.dp) // Add vertical spacing 20dp Text("I'm super ❤️JetPack Compose!")
Text("Android Technology Grocery Store")
Text("Still Fantsea.")}}}Copy the codeIn the code above, after adding the MaterialTheme, re-run the MaterialTheme with no change, and the text now uses the default text style of the MaterialTheme. Next, we apply a specific paragraph style to each text element.
@Composable
fun NewsStoryVal image = +imageResource(r.map.header) // Use Material DesignMaterialTheme() {Column (crossAxisSize = LayoutSize.Expand, modifier = Spacing(16.dp)){ Set the size Container(expanded =true. Height = 180.dp) {Clip(Shape = RoundedCornerShape(10.dp)) {// Display image DrawImage(image)}} HeightSpacer(height = 20.dp) // Add vertical spacing 20dp Text("I'm super ❤️JetPack Compose!", style = +themeTextStyle {h5})"Android Technology Grocery Store", style = +themeTextStyle {body1})"Still Fantsea.", style = +themeTextStyle {body2})Copy the code
Now let’s see, our text styles have changed. There are 6 styles h1-H6 in the header, but the styles in HTML are very similar. The content text has styles from Body1 and Body22.
The Material palette uses some basic colors and adjusts the opacity of the text if you want to emphasize it:
Text("I'm super ❤️JetPack Compose!", style = (+themeTextStyle { h5 }).withOpacity(0.87f))
Text("Android Technology Grocery Store", style = (+themeTextStyle { body1 }).withOpacity(0.87f))
Text("Still Fantsea.", style = (+themeTextStyle { body2 }).withOpacity(0.6f))
Copy the code
Sometimes the title is too long, but we don’t want to break the long title to affect our APP UI. Therefore, we can set the maximum number of lines of text to be displayed, and truncate the text beyond that.
As shown in this example, we set the maximum number of lines to be displayed to 2, and truncate the portion that is more than that:
Text("I'm super ❤️JetPack Compose! It is easy to write, reusable and can extract many components to reuse, without managing complex state changes!",
maxLines = 2, overflow = TextOverflow.Ellipsis,
style = (+themeTextStyle { h5 }).withOpacity(0.87f))
Copy the code
As you can see, when maxLines and overflow are set, the overflow is truncated without affecting the overall layout style.
Compose layout preview
Starting with Android Studio 4.0, it provides the ability to preview composable functions in the IDE instead of downloading an emulator and running the app in the emulator to see the effect.
There is a limitation, however, that the Composable function cannot have parameters
The following two conditions are met:
- The function has no arguments
- Add the @preview annotation in front of the function
Preview renderings are as follows:
When the layout changes, a navigation bar appears at the top showing that the preview is out of date, and you can refresh the preview by hitting build&Refresh
This is a really nice feature. Other declarative layouts, such as React and Flutter, do not have this feature. After the layout, you have to run the flutter again to see the effect.
Another cool feature is that compose’s preview can preview multiple Composable functions at the same time.
The effect is as follows:
Seven,
Jetpack Compse is still an experimental version, so there are definitely a lot of issues that can’t be used in commercial projects right now, but that shouldn’t stop us from learning and experimenting with it. Declarative UI frameworks have grown rapidly in recent years, and React has laid a solid foundation for declarative UI. The launch of Flutter brings the idea of declarative UI to mobile development. Apple and Google have released their own declarative UI frameworks SwiftUI and Jetpack Compose, respectively. In the future, native UI layouts, declarative UI, may become the mainstream.
That’s all for this article, I hope it’s useful to you!