Kotlin + Anko 画UI和一些便利的功能

什么是Anko?

Anko是由 Android Studio 的开发公司 jetBrains 官方出品的针对Kotlin语言，并且使开发Android程序更高效更简单的库，它可以使代码更简洁优雅。
它可以分为几个部分：

• Anko Commons: 这个里面包括很多使用的工具，可以帮助我们减少代码量，包括intents ，dialog，log，还有好多…
• Anko Layouts： 是一种快速，type-safe的动态 Android 布局方案
• Anko SQLite： 帮助查询SQLite的DSL 解析器集合
• Anko Coroutines：基于kotlin 协程的扩展工具

##为什么要使用Anko来写布局呢？
在常规的Andorid开发中，我们都是用XML写布局，在这几个方面有点不方便：

• 不是type-safe的；
• 不是null-safe的；
• 每个布局文件都要写好多重复的代码
• 在Android设备上解析XML会更加耗时和耗电
• 不能重用

而且当我们想用代码直接创建UI的时候，会使代码看起来很难维护，并且不够优雅。

val activity = this
val layout = LinearLayout(act)
layout.orientation = LinearLayout.VERTICAL
val button = Button(act)
button.text = "退出登录"
button.setOnClickListener {
   
    logout()
}
layout.addView(button)

上面是动态添加一个退出按钮的操作，已经是kotlin中简化的代码了，可以说是又丑可读性也差，如果用java写的话会更长。如果用Anko的DSL方式编写会是什么样呢？

verticalLayout {
   
    button("退出登录") {
   
        onClick {
    logout() }
    }
}

如果我们想要完成上面这样的界面，正常情况的XML是这样的：

首先是一个垂直的线性布局，里面一个自定义的Title，之后是五个 RelativeLayout, 最后是一个Button，那么如果利用Anko来进行编写是什么样的呢？

首先 创建一个实现 AnkoComponent接口的类（虽然可以直接在onCreate里面用DSL写，但是如果用这个 AnkoComponent，然后再安一个 Anko Support 的 插件 就有几率可以预览界面，但是经过实测，其实并不是那么好用 ，每次编辑完都要 build 一下才能预览 ，还不如直接在设备上调试。）

class SettingActivityUI(private val activity: BaseActivity) : AnkoComponent<SettingAnkoActivity> {
   
    override fun createView(ui: AnkoContext<SettingAnkoActivity>): View = with(ui) {
   
            verticalLayout {
   

                backgroundResource = R.color.bg_color

                commonTitle {
   
                    setLeftBackgroundResource(R.drawable.ic_return)
                    setTitle("设置")
                    setLeftClick {
    activity.finish() }
                }.lparams(width = matchParent, height = wrapContent)

                relativeLayout {
   
                    backgroundResource = R.color.white

                    textView {
   
                        id = ID_title
                        text = "个人设置"
                        textColorResource = R.color.c_333333
                        textSize = 15f
                        val leftDrawable = activity.resources.getDrawable(R.drawable.geren_icon)
                        leftDrawable.setBounds(0, 0, leftDrawable.minimumWidth, leftDrawable.minimumWidth)
                        setCompoundDrawables(leftDrawable, null, null, null)
                        compoundDrawablePadding = 16

                    }.lparams(wrapContent, wrapContent) {
   
                        centerVertically()