JetPack基础导航

JetPack 组件基础

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

1.准备工作

• 请下载使用Android Studio Canary版本。

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中添加了三个文本元素。我们没有提供层次化的信息来排列它们，所以三个文本元素重合在了一起。

    

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

    

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()函数用来添加水平的空白间隔。

    

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

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

  

5.参考资料

• Jetpack Compose Basics