Welcome everyone

Jetpack Compose Tutorial

前端 Abfahrt 807浏览 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