Android_Banner.jpg

该篇文章会记录自己学习使用Jetpack Compose实现UI界面的过程，现在Compose已经处于Beta阶段，那么意味着相应的API稳定性很可以了，不会有很大的改动了，那么让我们开始学习起来吧！

介绍

Jetpack Compose 是用于构建原生 Android 界面的新工具包。它基于声明性编程模型，因此您只需描述界面的外观，Compose 会负责完成其余工作，界面会随着应用状态的变化而自动更新。由于它是基于 Kotlin 而构建的，因而可与 Java 编程语言完全互操作，并且可直接访问所有 Android API 和 Jetpack API。它与现有界面工具包兼容，因此您可以混合搭配使用经典视图和新视图，而且它从一开始便支持 Material 设计和动画。

环境的配置

预览版的AndroidStudio的下载

为了获得最佳 Jetpack Compose 开发体验，您应下载最新 Canary 版的 Android Studio 预览版。

project中build.gradle文件的配置

buildscript {
// 确保您在项目中使用的是 Kotlin 1.4.21 或更高版本
    ext.kotlin_version = "1.4.31"
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath "com.android.tools.build:gradle:4.2.0-beta04"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()
    }
}

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

App中build.gradle文件的配置

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

android {
    compileSdkVersion 30

    defaultConfig {
        applicationId "com.dashingqi.composeproject"
        // 您需要将应用的最低 API 级别设置为 21 或更高级别
        minSdkVersion 21
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
        useIR = true
    }

    buildFeatures {
        //开启compose
        compose true
    }


    // 设置 Kotlin 编译器插件的版本
    composeOptions {
        kotlinCompilerVersion '1.4.21'
        kotlinCompilerExtensionVersion '1.0.0-alpha10'
    }
}

dependencies {

    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    implementation 'androidx.core:core-ktx:1.3.1'
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'com.google.android.material:material:1.2.1'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.1'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'

    // =================== 在项目中引入compose的开发工具包 ===========================

    implementation 'androidx.compose.ui:ui:1.0.0-alpha10'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.0.0-alpha10'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.0.0-alpha10'
    // Material Design
    implementation 'androidx.compose.material:material:1.0.0-alpha10'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.0.0-alpha10'
    implementation 'androidx.compose.material:material-icons-extended:1.0.0-alpha10'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-alpha10'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.0-alpha10'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.0-alpha10'
}

一个简单的Demo

• 实现效果

  
  
  Screenshot_2021-02-28-18-42-34-205_com.dashingqi.composeproject.jpg
• 代码实现

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            artistCard()
        }
    }
    

    @Preview
    @Composable
    fun artistCard() {

        val padding = 16.dp
        //图片
        val headerImg = imageResource(id = R.drawable.ic)
        //头像图片的修饰符
        val headerModifier = Modifier
            // 设置图片的高
            .preferredHeight(48.dp)
            //设置图片的宽
            .preferredWidth(48.dp)
            //设置图片的圆角
            .clip(RoundedCornerShape(24.dp))

        //banner的图片资源
        val bannerImg = imageResource(id = R.drawable.banner)
        //banner的修饰符
        val bannerModifier = Modifier
            .preferredHeight(128.dp)
            //让宽度填充布局
            .fillMaxWidth()

        Column(Modifier.padding(padding).fillMaxWidth()) {
            Row(verticalAlignment = Alignment.CenterVertically) {

                Image(
                    bitmap = headerImg,
                    modifier = headerModifier,
                    contentScale = ContentScale.Crop
                )

                //加入间距
                Spacer(Modifier.preferredSize(8.dp))

                Column(horizontalAlignment = Alignment.Start) {
                    Text("DashingQi", color = Color.Blue, fontSize = 15.sp)
                    Spacer(Modifier.preferredSize(4.dp))
                    Text("3 minutes ago", color = Color.Black, fontSize = 12.sp)
                }
            }

            Spacer(Modifier.preferredSize(padding))

            // 卡片的布局
            Card(elevation = 4.dp) {
                Image(
                    modifier = bannerModifier,
                    bitmap = bannerImg,
                    contentScale = ContentScale.Crop
                )
            }

        }
    }

嗯，就是这样的！哈哈哈哈😂！