This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

Introduce the Jetpack Compose sample project

Go to GitHub and find Compose’s sample project at github.com/android/com… “, clone to the local PC

For those of you who don’t have a good Internet connection, you can also go to Gitee and search for “comement-Samples” and find the sample project.

My AndroidStudio (” as “) is 4.1.1. The sample project requires Android Studio Arctic Fox. Upgrade as.

Release notes

In previous numbering systems, this version would have been Android Studio 4.3 or 4.3.0.1. Now after the numbering system, new version for Android Studio – Arctic Fox | 2020.3.1 or 2020.3.1.

Upgrade to Arctic Fox

4.1.1 will cause an error

This version of the Android Support plugin for IntelliJ IDEA (or Android Studio) cannot open this project, please retry with version 2020.3.1 or newer.
Copy the code

Example engineering renderings

There are several sample projects in the repository, but let’s start with the JetNews example.

JetNews

Gradle-7.1.1-bin. zip or gradle-7.1.1-all.zip will take some time. After gradle is downloaded, there are many libraries to download, which also takes time.

The Android Gradle plugin requires Java 11 to run

Build file '/Users/rustfisher/Desktop/ws/androidProjects/compose-samples/JetNews/app/build.gradle' line: 18 An exception occurred applying plugin request [id: 'com.android.application'] > Failed to apply plugin 'com.android.internal.application'. > Android Gradle plugin requires You are currently using Java 1.8. You can try some of the following options: - changing the IDE settings. - changing the JAVA_HOME environment variable. - changing `org.gradle.java.home` in `gradle.properties`.Copy the code

Change as Settings > Build, Execution, Deployment > Build Tools > Gradle > Gradle JDK. The Gradle JDK chooses to use Java 11 with AS

Change the value to that delivered with the AS. 11 Restart the AS. Try running the project again.

Running effect

Pay attention to

Modifying this area may cause compilation errors in other older projects

gradle

Take a look at Gradle.

The project’s gradle

buildscript {
    ext.kotlin_version = '1.5.31'
    ext.compose_version = '1.1.0 - beta01'
    ext.coroutines_version = '1.5.2'
    ext.accompanist_version = '0.21.0 - beta'
}
Copy the code

Versions of various libraries are defined

Module gradle

plugins {
    id 'com.android.application'
    id 'kotlin-android'
}
Copy the code

Write plugins as apply plugin: ‘com.android.application’

Androidx.com pose dependencies are also referenced in Dependencies

activity

Only one MainActivity is registered in the manifest

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?). {
        super.onCreate(savedInstanceState)
        WindowCompat.setDecorFitsSystemWindows(window, false)

        val appContainer = (application as JetnewsApplication).container
        setContent {
            val windowSizeClass = rememberWindowSizeClass()
            JetnewsApp(appContainer, windowSizeClass)
        }
    }
}
Copy the code

JetnewsApplication and JetnewsApp are used here

AppContainer

By design, AppContainer provides a data repository for applications, unifying data sources.

// AppContainerImpl.kt
interface AppContainer {
    val postsRepository: PostsRepository
    val interestsRepository: InterestsRepository
}
Copy the code

AppContainerImpl is a data implementation class that provides a concrete data warehouse

class AppContainerImpl(private val applicationContext: Context) : AppContainer {

    override val postsRepository: PostsRepository by lazy {
        FakePostsRepository() // Simulate data
    }

    override val interestsRepository: InterestsRepository by lazy {
        FakeInterestsRepository() // Simulate data}}Copy the code

JetnewsApp

JetnewsApp is a method defined in JetNewsapp.kt. It takes two arguments.

@Composable
fun JetnewsApp(
    appContainer: AppContainer.// Data warehouse
    windowSize: WindowSize // Screen size type
)   {
    JetnewsTheme {
        ProvideWindowInsets { }
    }
}
Copy the code

Method, which uses the MaterialTheme method

In Pro Video WindowinSets, use various UI components to define the main interface, including the side slide drawer

Such layer by layer, constitute the app’s entry interface.

In terms of code style, compose, Flutter and Swift UI are very similar.

ui

For UI components, you can use preview functionality in AS

You can preview light and dark on the right

Note the @preview annotation in the code on the left, which controls the Preview screen on the right

@Preview("Post content")
@Preview("Post content (dark)", uiMode = UI_MODE_NIGHT_YES)
@Composable
fun PreviewPost(a) {
    JetnewsTheme {
        Surface {
            PostContent(post = post3)
        }
    }
}
Copy the code
  • @Preview("Post content")The string in is the name of the preview, displayed above the corresponding preview
  • uiModeSet the mode, default isUI_MODE_TYPE_UNDEFINEDHere is bright
    • Set toUI_MODE_NIGHT_YESNamely dark color style
    • Styles are defined in UiMode
  • PostContentIs the actual working code, passed inpost3Is a locally preset test content
    • post3inPostsData.ktIn, there are more simulation content

Notice a number of @composable annotations.

Call the Jetpack Compose function to declare the desired element, and the Compose compiler does all the rest.

reference

The android – studio – 2020.3.1.24 – MAC. DMG links: pan.baidu.com/s/1yGfUjSn6… Extraction code: HCBP

  • Use Android Studio with Jetpack Compose
  • Android Studio version description