Android Jetpack(五) 界面

1、动画和过渡

略

2、表情符号 - 在旧版平台上启用最新的表情符号字体

EmojiCompat 支持库旨在让 Android 设备及时兼容最新的表情符号。它可防止您的应用以 ☐ 的形式显示缺少的表情符号字符，该符号表示您的设备没有用于显示文字的相应字体。通过使用 EmojiCompat 支持库，您的应用用户无需等到 Android OS 更新即可获取最新的表情符号。

表情符号兼容性示例应用 Java | Kotlin

可下载字体配置

添加支持库依赖项

  dependencies {
        ...
        implementation "com.android.support:support-emoji:28.0.0"
    }

初始化可下载字体配置

要使用可下载字体配置来初始化 EmojiCompat，请执行以下步骤：
1、创建 FontRequest 类的实例，并提供字体提供程序授权、字体提供程序包、字体查询以及证书的哈希集列表。
2、创建 FontRequestEmojiCompatConfig 的实例并提供 Context 和 FontRequest 的实例。
3、通过调用 init() 方法初始化 EmojiCompat 并传递 FontRequestEmojiCompatConfig 的实例。

    class MyApplication : Application() {

        override fun onCreate() {
            super.onCreate()
            val fontRequest = FontRequest(
                    "com.example.fontprovider",
                    "com.example",
                    "emoji compat Font Query",
                    CERTIFICATES
            )
            val config = FontRequestEmojiCompatConfig(this, fontRequest)
            EmojiCompat.init(config)
        }
    }
    

4、在布局 XM 中使用 EmojiCompat 。如果您使用的是 AppCompat，请参阅通过 AppCompat 使用 EmojiCompat 部分。

    <android.support.text.emoji.widget.EmojiTextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"/>

    <android.support.text.emoji.widget.EmojiEditText
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"/>

    <android.support.text.emoji.widget.EmojiButton
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"/>

要详细了解如何为 EmojiCompat 配置可下载字体，请转到表情符号兼容性示例 Java | Kotlin。

将 EmojiCompat 与 AppCompat 搭配使用

如果您使用的是 AppCompat widgets，则可以使用从 扩展的 EmojiCompat 。

 dependencies {
          implementation "com.android.support:support-emoji-appcompat:$version"
    }
    

   <android.support.text.emoji.widget.EmojiAppCompatTextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"/>

    <android.support.text.emoji.widget.EmojiAppCompatEditText
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"/>

    <android.support.text.emoji.widget.EmojiAppCompatButton
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"/>

捆绑式字体配置

 dependencies {
        ...
        implementation "com.android.support:support-emoji-bundled:$version"
    }

要使用捆绑式字体配置 EmojiCompat，请执行以下步骤：
1、使用 BundledEmojiCompatConfig 创建 EmojiCompat 的实例并提供 Context 的实例。
2、调用 init() 方法以初始化 EmojiCompat 并传递 BundledEmojiCompatConfig 的实例。

    class MyApplication : Application() {

        override fun onCreate() {
            super.onCreate()
            val config = BundledEmojiCompatConfig(this)
            EmojiCompat.init(config)
        }
    }
    

将 EmojiCompat 与自定义组件搭配使用

示例TextView

    class MyTextView(context: Context) : AppCompatTextView(context) {

        private val emojiTextViewHelper: EmojiTextViewHelper by lazy(LazyThreadSafetyMode.NONE) {
            EmojiTextViewHelper(this).apply {
                updateTransformationMethod()
            }
        }

        override fun setFilters(filters: Array<InputFilter>) {
            super.setFilters(emojiTextViewHelper.getFilters(filters))
        }

        override fun setAllCaps(allCaps: Boolean) {
            super.setAllCaps(allCaps)
            emojiTextViewHelper.setAllCaps(allCaps)
        }
    }
    

示例EditText

class MyEditText(context: Context) : AppCompatEditText(context) {

        private val emojiEditTextHelper: EmojiEditTextHelper by lazy(LazyThreadSafetyMode.NONE) {
            EmojiEditTextHelper(this).also {
                super.setKeyListener(it.getKeyListener(keyListener))
            }
        }

        override fun setKeyListener(input: KeyListener?) {
            input?.also {
                super.setKeyListener(emojiEditTextHelper.getKeyListener(it))
            }
        }

        override fun onCreateInputConnection(outAttrs: EditorInfo): InputConnection {
            val inputConnection: InputConnection = super.onCreateInputConnection(outAttrs)
            return emojiEditTextHelper.onCreateInputConnection(
                    inputConnection,
                    outAttrs
            ) as InputConnection
        }
    }

3、Fragment - 组件化界面的基本单位

略
Sunflower 演示应用中使用了 Fragment。

4、布局 - 使用不同的算法布置组件

编写布局main_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Hello, I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, I am a Button" />
</LinearLayout>

加载布局

fun onCreate(savedInstanceState: Bundle) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main_layout)
}

5、调色板

设置调色板库

要使用调色板库，请安装 Android 支持库并将其更新至 24.0.0 或更高版本，然后按照添加支持库的说明向您的应用开发项目添加调色板库。

android {
      compileSdkVersion 28
      ...
    }

    dependencies {
      ...
      implementation 'com.android.support:palette-v7:28.0.0'
    }

创建调色板

生成调色板实例

使用 Palette 的 from(Bitmap bitmap) 方法生成 Palette 实例，以先创建 Palette.Builder（从 Bitmap）。然后，生成工具就能够以同步或异步方式生成调色板。

    // Generate palette synchronously and return it
    fun createPaletteSync(bitmap: Bitmap): Palette = Palette.from(bitmap).generate()

    // Generate palette asynchronously and use it on a different
    // thread using onGenerated()
    fun createPaletteAsync(bitmap: Bitmap) {
        Palette.from(bitmap).generate { palette ->
            // Use generated instance
        }
    }
    

自定义调色板

您可以使用 Palette.Builder 自定义调色板
使用 Palette.Builder 类中的以下方法来微调调色板的大小和颜色：

• addFilter()
  此方法会添加一个过滤器，用于指明生成的调色板中可以有哪些颜色。传入您自己的 Palette.Filter 并修改其 isAllowed() 方法，以确定从调色板中滤除哪些颜色。
• maximumColorCount()此方法可用于设置调色板中的颜色数量上限。默认值为 16，最佳值取决于源图片。对于横向显示的图片，最佳值的范围为 8-16，而带有人脸的图片的值通常介于 24-32。Palette.调色板中的颜色越多，Builder 生成调色板的所用的时间就越长。
• setRegion()此方法指示在创建调色板时生成工具使用的位图的区域。您只能在从位图生成调色板时使用此方法，而且这不会影响原始图片。
• addTarget()此方法允许您通过向生成工具添加 Target 颜色配置文件来自行执行颜色调整。如果默认 Target 不够充分，高级开发者可以创建自己的 Target，具体方法是使用 Target.Builder。

提取颜色配置文件

调色板库尝试提取以下六种颜色配置文件：

Light Vibrant
Vibrant
Dark Vibrant
Light Muted
Muted
Dark Muted

使用色样创建配色方案

以下代码同步生成调色板，获取其 Vibrant 色样，并更改工具栏的颜色以匹配位图图片

 // Set the background and text colors of a toolbar given a
    // bitmap image to match
    fun setToolbarColor(bitmap: Bitmap) {
        // Generate the palette and get the vibrant swatch
        val vibrantSwatch = createPaletteSync(bitmap).vibrantSwatch

        // Set the toolbar background and text colors.
        // Fall back to default colors if the vibrant swatch is not available.
        with(findViewById<Toolbar>(R.id.toolbar)) {
            setBackgroundColor(vibrantSwatch?.rgb ?:
                    ContextCompat.getColor(context, R.color.default_title_background))
            setTitleTextColor(vibrantSwatch?.titleTextColor ?:
                    ContextCompat.getColor(context, R.color.default_title_color))
        }
    }