Android Jetpack(五) 界面

image.png

1、動畫和過渡

2、表情符號 - 在舊版平臺上啓用最新的表情符號字體

EmojiCompat 支持庫旨在讓 Android 設備及時兼容最新的表情符號。它可防止您的應用以 ☐ 的形式顯示缺少的表情符號字符,該符號表示您的設備沒有用於顯示文字的相應字體。通過使用 EmojiCompat 支持庫,您的應用用戶無需等到 Android OS 更新即可獲取最新的表情符號。
image.png

表情符號兼容性示例應用 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))
        }
    }
    
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章