写在前面
JetBrains在给我们带来Kotlin的同时,也给我们带来了一个可以让你的Android应用变得更简单,更便捷的库-----Anko(https://github.com/Kotlin/anko),初识Anko,很多地方还不太理解,目前只接触了Anko Layouts,觉得相见恨晚.
本文代码已上传至https://github.com/Xxxxxxyk/DouCat/tree/xyk
用Anko写布局
Android中的布局有两种书写方式,一种是在代码里写,不过至今为止我还没见过记过,第二种就是用XML书写,但是传统的XML书写布局,一旦遇上复杂截面,会导致onCreate方法执行缓慢,高耗电,大部分代码无法复用等痛点,在Kotlin中,这些痛点不复存在,官方称之为Anko DSL,在github给出了一个例子:
DSL (Domain Specific Language)
领域相关语言
https://en.wikipedia.org/wiki/Domain-specific_language
verticalLayout {
val name = editText()
button("Say Hello") {
onClick { toast("Hello, ${name.text}!") }
}
}
很简单的一个布局,点击按钮用吐司弹出文本框内容,为了对比,我们把这个布局用传统的Java写出来:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Say Hello!"/>
</LinearLayout>
光布局就超过了不知道多少行代码,立马高下立判.
扩展
上面只是一个简单的例子,接下来可以尝试写一个复杂一些的布局进行练手
relativeLayout {
toolbar {
id = ViewID.TOOL_BAR
title = ""
backgroundResource = R.color.colorPrimary
relativeLayout {
imageView {
imageResource = R.mipmap.logo_icon
}.lparams(width = 200) {
height = 120
}
linearLayout {
orientation = LinearLayout.HORIZONTAL
gravity = Gravity.CENTER_VERTICAL
imageView {
imageResource = R.drawable.img_message
isClickable = true
}.lparams(width = 60, height = 60) { rightMargin = 35 }
imageView {
imageResource = R.drawable.img_history
isClickable = true
}.lparams(width = 60, height = 60) { rightMargin = 35 }
imageView {
imageResource = R.drawable.img_scanner
isClickable = true
}.lparams(width = 60, height = 60) { rightMargin = 35 }
imageView {
imageResource = R.drawable.img_search
isClickable = true
}.lparams(width = 60, height = 60) { rightMargin = 35 }
}.lparams(height = matchParent) {
width = wrapContent
alignParentRight()
}
}
}.lparams(width = matchParent) {
height = 120
}
frameLayout {
id = ViewID.FL_FRAGMENT
}.lparams(width = matchParent, height = matchParent) {
below(ViewID.TOOL_BAR)
above(ViewID.BNV_BOTTOM)
}
bnv_btn = bottomNavigationView {
id = ViewID.BNV_BOTTOM
backgroundColor = android.R.attr.windowBackground
inflateMenu(R.menu.navigation)
}.lparams(width = matchParent) {
height = wrapContent
alignParentBottom()
}
}
}
上面的布局中用到的Android Support Library 25中的新增控件BottomNavigationView,这个控件在Anko中默认是不被支持的,可以通过非常简单的两句代码,让Anko对该控件进行支持,同理也适用于自定义控件:
//让Anko支持BottomNavigationView
public inline fun ViewManager.bottomNavigationView(theme: Int = 0) = bottomNavigationView(theme) {}
public inline fun ViewManager.bottomNavigationView(theme: Int = 0, init: BottomNavigationView.() -> Unit) = ankoView({ BottomNavigationView(it) }, theme, init)
加入上面两行代码,就可以在Anko中使用自定义控件了.
预览Anko Layout
我们在用Anko编写布局时会发现,不像以往用XML编写布局时支持预览,造成了想预览布局就需要运行一次,但是这么一个优秀的库怎么会没有解决办法呢,可以在File -> Setting -> Plugins中安装 Anko Support插件,安装完成后重启Android Studio,开启下面选项即可进行预览布局,目前只支持2.4版本,3.0版本不支持.
此处没有预览布局成功配图,因为我的就是Android Studio 3.0 ..........
结尾
最近看了沈腾的羞羞的铁拳,被一首老歌洗脑了........
