kotlin Anko的实际用法

学习kotlin，应该都多多少少的接触anko的用法

什么是anko?其实就是颠覆了我们平常写布局的方式，如果你学习过flutter，那你应该了解flutter的布局方式，跟android最大的不同就是没有xml布局，那么anko同理，就是用代码更快、更方便的实现布局效果

优点

我们平常的android写法中，都是通过去解析xml来实现布局，但是使用了anko，就是可以通过代码实现布局的方式，从而减少解析xml的时间

添加依赖

Anko 的 Github 仓库是： https://github.com/Kotlin/anko

在 Github 仓库的 README 上关于如何添加依赖已经写的很详细了，把要添加的选择性复制粘贴就好了。

Anko 包括四个部分内容：

• Anko Commons
  • 轻量级的一些帮助类，比如 intent，dialog，logging 等等，其实就是对安卓一些类：Activity、Fragment、Intent 等添加扩展函数。
• Anko Layouts
  • 动态布局用的最主要的库，将许多 Android 的控件 View 转换成了 Anko 加载的形式。
  • 由于 Android 还有其他的控件库，因此 Anko 也对那些库进行了拓展支持，可以选择添加对应的依赖库。
  • 当然，还可以根据需要对自定义 View 进行改造，让它们也支持 Anko 加载的形式。
• Anko SQLite
  • 用于 Android SQLite 数据库的查询的库
• Anko Coroutines
  • 基于 kotlinx.coroutines 协程的一个工具库

创建布局

class TestAnkoActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        relativeLayout {
            button("中间按钮") {
                textSize = sp(20).toFloat()
                onClick {
                   //点击时间
                }
            }.lparams {
                   //居中显示  
                centerInParent()
            }
        }
    }
}

写过代码的应该都可以看懂上面的代码，其实就是将xml的方式完全改成代码的形式，其实在我们以前的java写法中也是可以通过代码直接创建view的，但是只是我们用的很少，kotlin的这个anko库就是更加简单的简介的实现了这一功能。

父布局是relativeLayout  ，并把它添加到了 Activity 中。

在这里，并没有使用常见的 setContentView 方法，这是因为 Anko 会自动将布局界面 View 设置到 Activity 中。

relativeLayout代码块就是 Anko 的主要使用方法。

relativeLayout 作为一个容器，在里面添加了一个 button，button 控件的第一个大括号里设置了它的一些属性和事件，在 lparams 大括号里设置了它在相对于容器的一些参数。

就是这样简单的写法完成了界面布局，如同写 xml 文件一样，只要在父容器里面按照排列写好子控件的参数和位置就好。

如果接触过flutter，其实可以很好理解这种写法，所以建议读者有机会可以学习一下flutter。

 

使用 AnkoComponent 接口创建界面

除了直接在 Activity 里面写布局，还可以使用 AnkoComponent 接口创建布局，这样就可以将界面代码和 Activity 的代码分离了。

在flutter 中，我们把布局可以单独剥离出来，同理，在kotlin中也可以实现同样的逻辑，两者实现方式也很像
 

class TestAnkoActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?, persistentState: PersistableBundle?) {
        super.onCreate(savedInstanceState, persistentState)
        AnkoActivityUI().setContentView(this)
    }
}

class AnkoActivityUI : AnkoComponent<MyActivity> {
    override fun createView(ui: AnkoContext<MyActivity>) = with(ui) {
        verticalLayout {
            val name = editText()
            button("我是anko布局") {
                onClick { ctx.toast("anko, ${name.text}!") }
            }
        }
    }
}

这里使用到了 Kotlin with 的语法糖，使用 with，则返回的是最后一行的内容，正好 verticalLayout 就是最后一行的内容。

也可以把它转换一下，使用 apply 的语法糖，最后返回的调用该方法的对象，再接着返回该对象的 view 就好了。

class TestAnkoActivityUI : AnkoComponent<MyActivity> {
    override fun createView(ui: AnkoContext<AnkoActivity>) = ui.apply {
        verticalLayout {
            val name = editText()
            button("anko布局") {
                onClick { ctx.toast("Hello, ${name.text}!") }
            }
        }
    }.view
}

缺点

在 XML 中能够设置的控件属性更多，更精确的控制布局状态，而 Anko 在构建简单界面的时候才显得快速、便捷。

而且 Anko 支持的控件有限，加载自定义的控件还得添加额外的代码，在更复杂的应用中应该不太会广泛的使用。

当然，对于写习惯了布局的Android开发者来说，可能也一时接受不了这种写法，但是在简单页面中，这种构建速度还是很快的，值得上手一试