Android jetpack compose introduction example project

Go to GitHub to find the sample project of compose https://github.com/android/compose-samples , clone to local

Students with poor network can also search "compose samples" on gitee and find this example project.

My android studio (hereinafter referred to as "as") is 4.1.1. The sample project requires Android studio arctic fox. Upgrade as.

Version Description

Upgrade to arctic fox

Opening with 4.1.1 will report 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.

Example engineering renderings

There are several example projects in the warehouse. Let's take a look at the jetnews example first.

As open the jettnews directory, you may download gradle-7.1.1-bin.zip or gradle-7.1.1-all.zip, which will take some time. After downloading gradle, many libraries will be downloaded, which also takes time.

After gradle runs, run the error "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 Java 11 to run. 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`.

Change the settings of as Preferences > build, execution, deployment > Build Tools > gradle > gradle JDK. Select Java 11 with as

Gradle JDK

Change it to as's own 11 and restart as. Try running the project again.

Operation effect

be careful

Look at gradle.

Gradle of the project

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'
}

Multiple library versions are defined

Module gradle

plugins {
    id 'com.android.application'
    id 'kotlin-android'
}

Plugins was previously written as application plugin: 'com. Android. Application'

Multiple Android x.compose dependencies are also referenced in dependencies

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)
        }
    }
}

Jetnewsapplication and jetnewsapp are used here

In terms of design, appcontainer provides a data warehouse for applications and unifies data sources.

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

Appcontainerimpl is a data implementation class that provides a specific data warehouse

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

    override val postsRepository: PostsRepository by lazy {
        FakePostsRepository() // 模拟数据
    }

    override val interestsRepository: InterestsRepository by lazy {
        FakeInterestsRepository() // 模拟数据
    }
}

Jetnewsapp is a method defined in jetnewsapp.kt. It requires 2 parameters.

@Composable
fun JetnewsApp(
    appContainer: AppContainer,// 数据仓库
    windowSize: WindowSize // 屏幕尺寸类型
)   {
    JetnewsTheme {
        ProvideWindowInsets { }
    }
}

The JetnewsTheme method is invoked in the method, where MaterialTheme is used.

In providewindoinsets, various UI components are used to define the main interface, including side sliding drawers

This layer by layer constitutes the entrance interface of the app.

In terms of code style, compose, fluent and swift UI are very close.

For UI components, you can use the preview function in as

On the right, you can preview light and dark styles

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() {
    JetnewsTheme {
        Surface {
            PostContent(post = post3)
        }
    }
}

We can notice a lot of @ composable annotations.

Call the jetpack compose function to declare the desired element, and the compose compiler will do all the following work.

Android-studio-2020.3.1.24-mac.dmg link: https://pan.baidu.com/s/1yGfUjSn6LcUyJiBb2cEfRQ Extraction code: HCBP