Kotlin : Anko Layouts

從零開始學 Kotlin 程式設計: 線上教學課程目錄
Android Kotlin 1.3 教學 , 開發 , 範例 , 入門 , 基礎 , 新手 , 程式設計 , Android 電子書 , Kotlin 教學 , Kotlin 電子書 , Android PDF , Android ebook , 免費下載 , Free Download

使用 Anko Layouts

在 module 層級中的 的 Gradle ,中宣告 dependencies:
// Anko Layouts
implementation "org.jetbrains.anko:anko-sdk27:$anko_version" // sdk15, sdk19, sdk21, sdk23 are also available
implementation "org.jetbrains.anko:anko-appcompat-v7:$anko_version"

// Coroutine listeners for Anko Layouts
implementation "org.jetbrains.anko:anko-sdk27-coroutines:$anko_version"
implementation "org.jetbrains.anko:anko-appcompat-v7-coroutines:$anko_version"
在 APP 層級中的 Gradle 宣告,使用版本:
ext.anko_version='0.10.8'
可以在這裡看到 Anko 最新版本: 點我
在要使用的類別中,import 宣告引用「 org.jetbrains.anko.* 」,之後即可以直接開始使用 Anko Layouts。
//要加入此宣告,不然很多元件都不認識
import org.jetbrains.anko.*

AnkoComponent

其實可以不用額外新增 AnkoComponent 類別,就可以進行 DSL 佈局,但如果使用 AnkoComponent 類別,即可以在安裝 Anko Support plugin 下,擁有預覽佈局畫面功能。
package com.thishkt.demoanko

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import org.jetbrains.anko.*
import org.jetbrains.anko.sdk27.coroutines.onClick

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        MainActivityUI().setContentView(this)

    }

    class MainActivityUI : AnkoComponent<MainActivity> {
        override fun createView(ui: AnkoContext<MainActivity>) = with(ui) {
            verticalLayout {
                val name = editText()
                button("Say Hello") {
                    onClick { ctx.toast("Hello, ${name.text}!") }
                }
            }
        }
    }
}

預覽 Anko Layout 佈局畫面

Anko Layouts 預覽功能

在 Android Studio 的 plugin 中,安裝 Anko Support,即可預覽使用 Anko 佈局的畫面。

安裝 Anko Support 插件方式

上方選單 Android Studio -> preferences -> 搜尋 plugin -> Browse repository -> 搜尋 Anko Support
預覽前,需編譯檔案,上方選單列 Build -> Rebuild Projext ,再將游標放到 MyActivityU,在上方選單列 View -> Tool Windows -> Anko Layout Preview 建置完成,即可以看到目前 Layout 畫面。
跟 XML 佈局預覽最大的不同的是,DSL 預覽需要重新建置專案才能正常預覽。

XML 轉換成 DSL

Anko Support plugin,插件除了可以預覽佈局畫面外,也提供將 XML 佈局畫面轉換成 Anko Layout。開啟 XML Layout文件,選擇 Code -> Convert to Anko Layouts DSL,即可。但有時轉換成 DSL 可能會需要再進一步人工手動調整。
ConstraintLayout 目前轉換好像怪怪的

參考資料

留言

這個網誌中的熱門文章

16天記下7000單字