Welcome everyone

Jetpack Compose Tutorial

前端 Abfahrt 951浏览 0评论

JetPack 组件基础

  • JetPack组件是一个用于构建Android原生UI的现代化工具箱。JetPack组件可以简化和加速了我们在Android上的UI开发,它使我们可以编写更精简的代码,同时它也提供了强大的工具和直观的Kotlin APIs。
  • 你不需要编辑任何XML格式的布局文件,也不需要在代码中创建控件。你只需要调用JetPack组件中的函数,告诉它你需要什么,剩下的将由JetPack组件替你完成。
  • 注意:JetPack组件现处于开发预览的阶段,没有最终完成,请不要在生产的app中使用。

1.准备工作

1.1 创建Jetpack示例应用

  • File -> New -> NewProject -> Empty Compose Activity

1.2 将 Jetpack Compose 添加到现有项目中

  • 1.配置 Gradle
    • buildFeatures属性添加失败的解决方法:

    升级Android Studio ,只有Android Studio 4.0+才支持。

    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"
       }
      }
    
  • 2.使用实验性 Kotlin-Gradle 插件
    • 对于Google下载不下来的情况可以换成阿里源:

    maven { url https://maven.aliyun.com/repository/google"}

    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.1.0-alpha03"
              classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.61"
          }
      }
    
      allprojects {
          repositories {
              google()
              jcenter()
              maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' }
          }
      }
    
  • 3.添加 Jetpack Compose 工具包依赖项:
    dependencies {
          // You also need to include the following Compose toolkit dependencies.
          implementation 'androidx.ui:ui-framework:0.1.0-dev03'
          implementation 'androidx.ui:ui-layout:0.1.0-dev03'
          implementation 'androidx.ui:ui-foundation:0.1.0-dev03'
          implementation 'androidx.ui:ui-material:0.1.0-dev03'
          implementation 'androidx.ui:ui-tooling:0.1.0-dev03'
          ...
      }
    

2.复合函数

  • JetPack组件通过复合函数创建。我们可以通过复合函数来定义UI的形状和UI的数据依赖关系,并且我们不需要过多的关注UI的构造过程。创建复合函数,只需要在函数名上添加@Composable注解。

2.1 添加文本元素

  • 只需要先定义一个setContent块,并在块中调用Text()函数。
    class MainActivity : AppCompatActivity() {
      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          //定义setContent块
          setContent {
              //调用 Text()函数
              Text("Android")
          }
      }
    }
    
  • setContent块定义了Activity的布局样式。这种通过调用复合函数定义布局的方式使我们不再需要XML格式的布局文件。Jetpack组件使用了一种自定义的Kotlin插件,从而将复合函数转换成应用的UI元素。举例,通过调用Text()函数在app中声明了一个文本元素。

2.2 定义复合函数

  • 复合函数只能在其他复合函数的域内调用。创建复合函数时,需要添加@Composable注解。

    class MainActivity : AppCompatActivity() {
      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          setContent {
              Greeting("Android")
          }
      }
    }
    
    //声明一个复合函数需要添加注解
    @Composable
    fun Greeting(name: String) {
      Text(text = "Hello $name!")
    }
    

2.3 在Android Studio中预览你的函数

  • Android Studio Canary 版本允许你直接在IDE中预览你的复合函数,不再需要将app下载到设备或模拟器上运行查看。通过在@Composable注解前追加@Preview注解实现预览,预览复合函数的唯一要求就是复合函数不能有入参。
    class MainActivity : AppCompatActivity() {
      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          setContent {
              Greeting("Android")
          }
      }
    }
    
    @Composable
    fun Greeting(name: String) {
      Text(text = "Hello $name!")
    }
    
    //通过添加注解实现预览
    @Preview
    @Composable
    fun DefaultPreview() {
      Greeting("Android")
    }
    
    • Rebuild 项目后,Android Studio会显示出一个预览窗口。

3.布局

  • UI元素是层次化的,有得元素包含在其他元素之中。你可以通过在一个复合函数中调用另一个复合函数来实现UI的层次化。

3.1 创建一些文本元素

  • 修改之前的示例代码,添加更多的文本元素。
    class MainActivity : AppCompatActivity() {
      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          setContent {
              NewStory()
          }
      }
    }
    
    @Composable
    fun NewStory() {
      Text(text = "A day in Shark Fin Cove")
      Text(text = "Davenport, California")
      Text(text = "December 2018")
    }
    
    @Preview
    @Composable
    fun DefaultPreview() {
      NewStory()
    }
    
    • 我们在content中添加了三个文本元素。我们没有提供层次化的信息来排列它们,所以三个文本元素重合在了一起。

    没有层次化信息的三个TextView

3.2使用Column复合函数

  • Column函数可以将元素竖排排列。修改NewsStory():

    @Composable
    fun NewStory() {
      Column(
              modifier = Spacing(left = 16.dp,top = 10.dp
                                ,right = 16.dp,bottom = 10.dp)
      ) {
          Text(text = "A day in Shark Fin Cove")
          Text(text = "Davenport, California")
          Text(text = "December 2018")
      }
    }
    
    • modifier属性用来指定布局的配置。

    • Spacing函数用来指定内边距(Padding)。

    Column函数

3.3 添加一张图片

  • 修改之前的程序中的复合函数,使用DrawImage()添加一张图片。

  • 注意:DrawImage()函数需要依赖implementation 'androidx.ui:ui-foundation:0.1.0-dev03'

    @Composable
    fun NewStory() {
      //引用图片资源
      val image = +imageResource(R.drawable.header)
      
      Column(
              modifier = Spacing(left = 16.dp,top = 10.dp
                      ,right = 16.dp,bottom = 10.dp)
      ) {
          //将图片放到Container容器中
          Container(modifier = Height(180.dp) wraps Expanded) {
              DrawImage(image)
          }
          //添加一个分隔距离
          HeightSpacer(16.dp)
          
          Text(text = "A day in Shark Fin Cove")
          Text(text = "Davenport, California")
          Text(text = "December 2018")
      }
    }
    
    • Container是一个通用的content对象,可以用来盛装UI元素,并对元素进行层次化的安排。我们将图片放到该容器中。

    • Height()函数用来限制图片高度。

    • Expanded指定container的大小。默认是flase,使container的大小为子元素的大小(类似wrap-content),将expanded设置为true,则container的大小为父元素允许的最大大小(类似match-parent)。

    • wraps中缀用来连接多项对modifier属性的设置。

    • HeightSpacer()函数用来添加水平的空白间隔。

    DrawImage加载图像

4. 质感设计(Material design)

  • Jetpack组件支持质感设计的原则。许多实现质感设计的UI元素开箱即用。

4.1 添加一个Shape

  • Shape是质感设计体系的重要支柱之一。可以使用Clip()函数为图片添加圆角。

    fun NewStory() {
      val image = +imageResource(R.drawable.header)
      Column(
              modifier = Spacing(left = 16.dp,top = 10.dp
                      ,right = 16.dp,bottom = 10.dp)
      ) {
          Container(modifier = Height(180.dp) wraps Expanded) {
              //使用Clip函数添加圆角
              Clip(shape = RoundedCornerShape(8.dp)) {
                  DrawImage(image)
              }
          }
    
          HeightSpacer(16.dp)
          Text(text = "A day in Shark Fin Cove")
          Text(text = "Davenport, California")
          Text(text = "December 2018")
      }
    }
    

    Clip添加圆角

4.2 字体样式

  • JetPack组件使你可以轻松地将MaterialTheme适配到你的应用中。

    @Composable
    fun NewStory() {
      val context = +ambient(ContextAmbient)
      val image = +imageResource(R.drawable.header)
      //使用MaterialTheme主题
      MaterialTheme {
          //引用MaterialTheme主题中包含的字体
          val typography = +MaterialTheme.typography()
          //卡片样式
          Card(shape = RoundedCornerShape(8.dp)) {
              Column(
                      modifier = Spacing(left = 16.dp, top = 10.dp
                              , right = 16.dp, bottom = 10.dp)
              ) {
                  Container(modifier = Height(180.dp) wraps Expanded) {
                      Clip(shape = RoundedCornerShape(8.dp)) {
                          DrawImage(image)
                      }
                  }
    
                  HeightSpacer(16.dp)
                  Text(text = "A day in Shark Fin Cove"
                          , maxLines = 1  //最大行数
                          , overflow = TextOverflow.Ellipsis  //超出部分文字用省略号替代
                          //设置字体,并使用withOpacity设置字体透明度
                       , style = typography.h6.withOpacity(0.87f))
                  Text(text = "Davenport, California"
                          , style = typography.body2.withOpacity(0.87f))
                  Text(text = "December 2018"
                          , style = typography.body2.withOpacity(0.6f))
              }
          }
      }
    
    }
    

    JetPack设置字体样式

5.参考资料

转载请注明:汪明鑫的个人博客 » Jetpack Compose Tutorial

喜欢 (69)

说点什么

您将是第一位评论人!

提醒
avatar
wpDiscuz