18
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

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!"
            }
        }
    }
}

screenshot (17).jpg

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
18
Help us understand the problem. What are the problem?