你还在用 XML 写 Android 界面？Kotlin Anko 才是未来的趋势

​ 本文翻译自 Amit Shekhar 的文章，已获作者邮件许可，收录于 Android开发前线 专题，Android开发前线是一个翻译、总结、实战当前Android开发中最新最潮流的技术的专题，包括Meidum、Quora 等国外技术网站上大神们的最新文章等，不定期更新。欢迎订阅、投稿。

​ Anko 是一个用来编写 Android 界面的 Kotlin 库，使用的是 DSL 语法。与 xml 相比，使用 Anko 能让编写界面变得更简单、清晰、易读。使用 Anko 我们可以写出动态的 App 界面。这篇文章简要的讲解如何使用Anko、DSL以及如何在 Android Studio 中预览用 Anko 写的界面。

使用 Anko 来写界面的 Activity 大概就是下面这个样子：

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        verticalLayout {
            gravity = Gravity.CENTER
            padding = dip(20)

            textView {
                gravity = Gravity.CENTER
                text = "Enter your request"
                textColor = Color.BLACK
                textSize = 24f
            }.lparams(width = matchParent) {
                margin = dip(20)
            }

            val name = editText {
                hint = "What is your name?"
            }

            editText {
                hint = "What is your message?"
                lines = 3
            }

            button("Enter") {
                onClick {
                    toast( "Hey ${name.text}! Thank you for contacting us. We will get in touch with you soon.")
                }
            }.lparams(dip(280), sp(80))

        }
    }
}

运行起来的效果是这样的：

image

​ 上面直接把 UI 部分写在了 Activity 里，当要编写的界面复杂一些或者需要复用时，显然就无法满足需求了。我们需要把它写在单独的类里并继承 AnkoComponent。就像下面这样：

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        MainActivityUI().setContentView(this)
    }

    class MainActivityUI : AnkoComponent {
        override fun createView(ui: AnkoContext) = with(ui) {
            verticalLayout {
                gravity = Gravity.CENTER
                padding = dip(20)

                textView {
                    gravity = Gravity.CENTER
                    text = "Enter your request"
                    textColor = Color.BLACK
                    textSize = 24f
                }.lparams(width = matchParent) {
                    margin = dip(20)
                }

                val name = editText {
                    hint = "What is your name?"
                }

                editText {
                    hint = "What is your message?"
                    lines = 3
                }

                button("Enter") {
                    onClick {
                        toast( "Hey ${name.text}! Thank you for contacting us. We will get in touch with you soon.")
                    }
                }.lparams(dip(280), sp(80))

            }
        }
    }
}

​ Anko 并不能像 xml 一样直接在 Android Studio 里预览，但是 Kotlin 为我们提供了插件，直接在 Android Studio 安装插件的地方搜索 Anko Support 并安装，然后当编写 Anko 时，在 View > Tool Windows > Anko Layout Preview 中就可以实时预览了。下面是效果图：

image