Anko 最初の一歩

Anko

AnkoはKotlinのコードでAndroidのUIを組み立てることができるJetBrains公式のライブラリです。
通常のコードでUIを組み立てる方法と異なり、DSLを用いるので簡潔な記法ができます。

UIのPreviewができる機能もあります、Preferences > Plugins > Browse repositoriesでAnko DSL Preview pluginをインストールしてください。
Ankoの最新バージョンは0.9ですが、記事執筆現在では0.8.3にしておかないとPreviewをうまく表示してくれないようです。
また、XMLのPreviewと同じく表示に使用するAPIレベルを指定できますが、とりあえず22以下に設定しています。

(追記)
ちなみにAnko DSL Preview pluginをインストールすると Code > Convert to Koan DSL が追加されます。
これはXMLをAnko DSLに変換してくれるツールです。

導入方法

app.gradleに以下の設定を追加してください

app.gradle

dependencies {
    compile 'org.jetbrains.anko:anko-sdk15:0.8.3'
    compile 'org.jetbrains.anko:anko-support-v4:0.8.3'
    compile 'org.jetbrains.anko:anko-appcompat-v7:0.8.3'

    // 0.9だとPreviewが動かない
    compile 'org.jetbrains.anko:anko-sdk15:0.9'
    compile 'org.jetbrains.anko:anko-support-v4:0.9'
    compile 'org.jetbrains.anko:anko-appcompat-v7:0.9'
}

公式で最新バージョンを確認しつつ、導入してください
https://github.com/Kotlin/anko

基本的な使い方

Activityで使ってみる

Activityの内部で用いる場合には、以下のようにonCreateの中などで直接にDSLを書くことができます。

MainActivity.kt

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

        verticalLayout {
            textView {
                text = "Hello, Anko!"
            }
        }
    }
}

Framgentで使ってみる

FragmentのonCreateViewの内部で用いる場合には、Activityの場合とは異なり UI {}.viewで囲む必要があります。

MainFragment.kt

class MainFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?, savedInstanceState: Bundle?) : View? {
        return UI {
            verticalLayout {
                textView {
                    text = "Hello, Anko!"
                }
            }
        }.view
    }
}

クラスを分けて使う

クラスを分けて使うにはまず、AnkoComponentインターフェースを実装したクラスを作ります。

MainActivityUi.kt

class MainActivityUi() : AnkoComponent<MainActivity> {
    override fun createView(ui: AnkoContext<MainActivity>) = with(ui) {

        verticalLayout {
            textView {
                text = "Hello, Anko!"
            }
        }

    }
}

そしてMainActivityUiクラスのsetContentViewを呼び出します。

MainActivity.kt

class MainActivity : Activity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        MainActivityUi().setContentView(this)
    }
}

このようにクラスを分けた状態でもPreviewは動きます。

---

参考

公式のGitHub : https://github.com/Kotlin/anko