本文翻译自 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<MainActivity> {
override fun createView(ui: AnkoContext<MainActivity>) = 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
