Compose Collapsing Toolbar 开源项目教程

Compose Collapsing Toolbar 开源项目教程

compose-collapsing-toolbarA simple implementation of collapsing toolbar for Jetpack Compose项目地址:https://gitcode.com/gh_mirrors/co/compose-collapsing-toolbar

1. 项目的目录结构及介绍

compose-collapsing-toolbar/
├── README.md
├── build.gradle
├── settings.gradle
├── app/
│   ├── build.gradle
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/
│   │   │   │   └── com/
│   │   │   │       └── onebone/
│   │   │   │           └── collapsingtoolbar/
│   │   │   │               ├── MainActivity.kt
│   │   │   │               ├── CollapsingToolbar.kt
│   │   │   │               └── ...
│   │   │   └── res/
│   │   │       ├── drawable/
│   │   │       ├── layout/
│   │   │       ├── mipmap/
│   │   │       └── values/
│   │   └── test/
│   │       └── ...
│   └── ...
└── ...

目录结构介绍

• README.md: 项目说明文件，包含项目的基本介绍和使用说明。
• build.gradle: 项目的根构建文件，包含项目级别的配置。
• settings.gradle: 项目的设置文件，包含模块的配置。
• app/: 应用模块目录。
  • build.gradle: 应用模块的构建文件，包含模块级别的配置。
  • src/main/java/com/onebone/collapsingtoolbar/: 应用的主要代码目录，包含主要的Kotlin文件。
    • MainActivity.kt: 应用的主活动文件。
    • CollapsingToolbar.kt: 实现折叠工具栏的主要文件。
  • src/main/res/: 应用的资源目录，包含布局、图片和字符串等资源。

2. 项目的启动文件介绍

MainActivity.kt

package com.onebone.collapsingtoolbar

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.onebone.collapsingtoolbar.ui.theme.ComposeCollapsingToolbarTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeCollapsingToolbarTheme {
                // 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() {
    ComposeCollapsingToolbarTheme {
        Greeting("Android")
    }
}

文件介绍

• MainActivity.kt: 这是应用的主活动文件，继承自 ComponentActivity。在 onCreate 方法中，设置了应用的内容视图，并应用了主题。Greeting 是一个简单的 Composable 函数，用于显示文本。

3. 项目的配置文件介绍

build.gradle (项目根目录)

// 根目录的 build.gradle 文件
buildscript {
    ext.kotlin_version = "1.5.21"
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath "com.android.tools.build:gradle:7.0.0"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

allprojects {
    repositories {
        google()
        mavenCentral()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

build.gradle (app 模块)

// app 模块的 build.gradle 文件
plugins {
    id 'com.android.application'
    id 'kotlin-android'
}

android {
   

compose-collapsing-toolbarA simple implementation of collapsing toolbar for Jetpack Compose项目地址:https://gitcode.com/gh_mirrors/co/compose-collapsing-toolbar