Kotlin : Anko Layouts
從零開始學 Kotlin 程式設計: 線上教學課程目錄
Android Kotlin 1.3 教學 , 開發 , 範例 , 入門 , 基礎 , 新手 , 程式設計 , Android 電子書 , Kotlin 教學 , Kotlin 電子書 , Android PDF , Android ebook , 免費下載 , Free Download
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 目前轉換好像怪怪的
