扩展Anko,支持更更多控件

写在前面

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()
            }
        }
    }

image.png

上面的布局中用到的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版本不支持.

image.png

此处没有预览布局成功配图,因为我的就是Android Studio 3.0 ..........

结尾

最近看了沈腾的羞羞的铁拳,被一首老歌洗脑了........

image.png