anko

Anko 是一个用 Kotlin 写的Android DSL (Domain-Specific Language)。 内部提供很多工具，详情可点https://github.com/Kotlin/anko
在这里我们主要涉及的是anko的layout部分，长久以来，Android视图都是用XML来完成布局的。用xml写布局有下面这些缺点：

• 不是类型安全的;
• 不是null-safe;
• 强迫你对每个layout编写几乎相同的代码;
• 在设备上解析XML费电费CPU;
• 最惨的是代码不可复用
  所以，如果可以，我们可以尝试用anko来绘制布局。

环境配置

因为anko版本发布的并不是很多，用户量也不是很多，所有网上能找到的资源是非常少的，所以配置的时候总会出现许许多多的问题。现在android studio默认已经集成了kotlin了，我们需要配置的就是anko support，也就是anko preview，用来预览anko写的ui布局的工具。

插件安装

as联网下载

我们可以从android studio内置的下载器中下载，从Preference->Plugins中搜索Anko Support，并进行下载。
[图片上传失败...(image-8ed987-1542512015800)]

官网下载导入

我们也能够从官网中下载指定的anko support版本，点击https://plugins.jetbrains.com/plugin/7734-anko-support，选择指定版本进行下载，然后在as导入。
[图片上传失败...(image-770d0a-1542512015800)]
在android选择项目的页面，选择configuration->plugins->install plugin from disk,选择相应的plugin包导入。

可能出现的问题

目前官网最新的anko support插件版本是0.10.5,如果我们的as版本是3.0，那么还是将会出现anko preview不能预览的情况，报错情况为

Anko Support threw an uncaught NoSuchMethodError

这个是因为as3.0的问题不支持anko support，这个时候我们只需要更新as的版本到3.1之后，anko support就能够使用了。

开始使用anko

首先需要先引入anko依赖库

implementation "org.jetbrains.anko:anko:0.10.5"

这个是anko给我们集成的一个包含anko所有功能的库，包含了

• anko commons： 一些常用的扩展函数，包括intent、dialog、log、resources等
• ankoLayout： anko布局
• ankoSqlite： anko优化的数据库操作
• anko Coroutines: anko对于kotlin协程的扩展

如果我们需要大部分的anko的功能，我们可以直接这么引入，否则我们需要单独引入每一个功能的依赖。

dependencies {
    // Anko Commons
    implementation "org.jetbrains.anko:anko-commons:$anko_version"

    // Anko Layouts
    implementation "org.jetbrains.anko:anko-sdk25:$anko_version" // sdk15, sdk19, sdk21, sdk23 are also available
    implementation "org.jetbrains.anko:anko-appcompat-v7:$anko_version"

    // Coroutine listeners for Anko Layouts
    implementation "org.jetbrains.anko:anko-sdk25-coroutines:$anko_version"
    implementation "org.jetbrains.anko:anko-appcompat-v7-coroutines:$anko_version"

    // Anko SQLite
    implementation "org.jetbrains.anko:anko-sqlite:$anko_version"
}

我们只需要从中引入我们所必须的库就ok了。在这里我们需要注意的是anko-sdk的引入需要和我们build.gradle中的minSdkVersion做下适配。

org.jetbrains.anko:anko-sdk15 ： 15 <= minSdkVersion < 19

org.jetbrains.anko:anko-sdk19 ： 19 <= minSdkVersion < 21

org.jetbrains.anko:anko-sdk21 ： 21 <= minSdkVersion < 23

org.jetbrains.anko:anko-sdk23 ： 23 <= minSdkVersion < 25

org.jetbrains.anko:anko-sdk25 ： 25 <= minSdkVersion 

如果没有按照要求做sdk适配，那么一旦运行在不符合的版本，将会直接崩溃～切记

AnkoComponent

我们可以在activity的onCreate、fragemnt的onCreateView中直接绘制ui，但是这样就让ui绘制代码�与activity、fragment代码有了耦合了。所有我们可以将Anko代码定义到另外一个class中，作为对应的UiClass，这就需要AnkoComponent。

定义UIClass

class MemberCenterActivityUI : AnkoComponent<MemberCenterActivity> {
        override fun createView(ui: AnkoContext<MemberCenterActivity>) : View = with(ui){
        
    }

在我们定义了相应的uiclass之后，我们需要实现其中的oncreateView方法，这个类的返回就是一个View，就是我们anko绘制的布局。
添加上with(ui)，是为了让dsl代码块能够以this的形式持有AnkoContext，这个AnkoContext是一个非常有用的类

    val ctx: Context
    val owner: T
    val view: View

ctx就是上下文信息，owner就是uiclass依附的类的实例，在这个例子里面指的是MemberCenterActivity，我们可以通过owner调用MemberCenterActivity的任意public方法。

绘制布局

所有布局

            relativeLayout {
                imageView {
                    adjustViewBounds = true
                    scaleType = ImageView.ScaleType.CENTER_CROP
                    imageResource = R.drawable.bg_members
                }.lparams(width = matchParent, height = matchParent)
                statusBar = view {
                    id = statusBarHolder
                }.lparams {
                    height = statusBarHeight(ctx)
                    width = matchParent
                }
                toolbar {

                    id = toolbarId
                    backgroundColor = R.color.color_00000000

                    imageView {
                        imageResource = R.drawable.ic_arrow_back_white
                        onClick {
                            owner.finish()
                        }
                    }.lparams(height = wrapContent, width = wrapContent) {
                        padding = dip(5)
                    }

                    textView("会员中心") {
                        textColor = R.color.color_ffffff
                        textSize = R.dimen.dimens_18sp.toFloat()
                    }.lparams(width = wrapContent, height = wrapContent) {
                        gravity = Gravity.CENTER

                    }

                }.lparams(height = dip(50), width = matchParent) {
                    below(statusBar)
                }

                memberRv = recyclerView {
                    itemAnimator.changeDuration = 0
                    layoutManager = LinearLayoutManager(context)
                    adapter = MemberCenterAdapter(context, null)
                    memberAdapter = adapter as MemberCenterAdapter
                }.lparams(width = matchParent, height = matchParent) {
                    below(toolbarId)
                }
            }

每一个anko布局，最多只能有一个根节点，在这个例子中最外层的根节点就是relativelayout，这个组件的名称都是以小写字母开头的，就是anko给java的View多包装了一层，以便在dsl使用。

 imageView {
        ....
        }.lparams(width = matchParent, height = matchParent){
        .....
        }

控件直接包含的区域是添加控件的直接参数的，比如说imageView的src，scaleType，TextView的text，textSize，textColor等。而lparams是用来定义组件的大小，布局、位置属性的，包括height、width、gravity等等。
当然，我们也可以不指定lparams，这样的话，它会有默认的宽高,即wrap_content。

inline fun <T: View> T.lparams(
            width: Int = android.view.ViewGroup.LayoutParams.WRAP_CONTENT,
            height: Int = android.view.ViewGroup.LayoutParams.WRAP_CONTENT
    ): T {
        val layoutParams = FrameLayout.LayoutParams(width, height)
        this@lparams.layoutParams = layoutParams
        return this
    }

整个imageView域是有返回值的，返回的就是这个imageView实体，我们也可以理解成这个域创建了imageView实体并返回。

anko扩展View

当我们想要用自定义View或者anko没有支持的View，我们可以扩展ankoView

inline fun ViewManager.mapView() = mapView(theme = 0) {}

inline fun ViewManager.mapView(init: MapView.() -> Unit): MapView {
    return ankoView({ MapView(it) }, theme = 0, init = init)
}

这个mapView就是我们想要扩展的View，这个是官网给的例子，下面我们来扩展fresco的simpledraweeView

inline fun ViewManager.simpleDraweeView(theme: Int = 0) = simpleDraweeView(theme) {}
inline fun ViewManager.simpleDraweeView(theme: Int = 0, init: SimpleDraweeView.() -> Unit) : SimpleDraweeView {
    return ankoView({ SimpleDraweeView(it) }, theme, init)
}

这样我们就能在anko dsl中直接使用simpleDraweeView了

onclick

anko中已经给我们添加了onclick方法，我们可以在每个View中添加onClick，并且指定其实现，anko将会给这个View设置listener

fun android.view.View.onClick(
        context: CoroutineContext = UI,
        handler: suspend CoroutineScope.(v: android.view.View?) -> Unit
) {
    setOnClickListener { v ->
        launch(context) {
            handler(v)
        }
    }
}

一些小点

• 用了anko之后，我们如果需要对于id的诉求只有一个，那就是在relativelayout中指定位置时，需要通过id，才指定below、above、left、right的位置，对于id的设置，我们需要自己定义Id的int值，我们得保证它不会重复。
• 对于imageView，不再有src属性，因为anko内部其实是动态代码创建view，所有对于这个src，替代的就是在代码中指定的imageResouce
• 对于color，需要的就是color的值，而非项目中的colorId
• 对于textView，它的textSize指定为f，而非sp
• 如果我们想要用recyclerView，那么我们需要引入anko的依赖库，或者直接扩展ankoView
• 对于dp计算，anko内部给我们实现了dip方法计算。

anko preivew

对于anko support，虽然可能它的代码效率比较高，但是它在预览的时候并没有办法做到像在xml里面实时预览，只有在代码build之后才能够看到预览页面，而且每次修改都必须要进行rebuild，这个是一个非常让人无法接受的点，刚开始效率肯定会低，但是随着代码的熟练，效率还是会有所提升的，毕竟anko的ui绘制效率要笔xml高。可以通过command+f9进行build。

ankoComponent元素的调用

我们免不了需要在activity，framgent等类中更新uiClass的元素的状态。所以了解uiClass与activity，fragment及viewHolder的绑定及调用还是有必要的。

绑定

activity

activity绑定ankoComponent可以通过下面这种方式来绑定

MemberCenterActivityUI().setContentView();

fragment

val view = MemberCenterFragmentUI().createView(AnkoContext.create(ctx, MemberCenterFragment()))

在onCreateView中返回这个View，就和fragment进行绑定了。

viewHolder

MemberCenterItemUI().createView(AnkoContext.create(context, parent)

自定义View

在自定义View中，对于anko来说是一个比较不方便的使用，因为在anko support的支持预览的前提是使用AnkoComponent，而自定义View的View绑定却不通过AnkoComponent，也有可能是我现在没发现，目前发现的支持绑定的方式为：

  constructor(context: Context) : super(context) {
        initView()
    }
 private fun initView() = AnkoContext.createDelegate(this).apply {
    ...init anko view
}

在java的自定义View中，是通过构造函数调用inflate方法，来将xml设置到该自定义View中。
在anko中，利用AnkoContext.createDelegate(this).apply来替代inflate。

我们可以先通过AnkoComponent来预览界面，然后预览完成之后再将anko代码放在AnkoContext.createDelegate(this).apply中。

调用

对于三者的调用其实都是一致的，我们只需要缓存AnkoComponent类的实例就能够通过这个实例引用其内部的ui组件。

//in activity
mainUI = MemberCenterActivityUI()
    mainUI.setContentView(this)
    
 TextUtils.isEmpty(chargeTip?.chargeButtonDesc).yes {
                mainUI.bottomMemberOpenDesc.visibility = View.GONE
            }.no {
                mainUI.bottomMemberOpenDesc.visibility = View.VISIBLE
                mainUI.bottomMemberOpenDesc.text = chargeTip?.chargeButtonDesc
            }
            TextUtils.isEmpty(chargeTip?.chargeButtonUrl).yes {
                mainUI.btnOpenViewIcon.visibility = View.GONE
            }.no {
                mainUI.btnOpenViewIcon.visibility = View.VISIBLE
                KKGifPlayer
                        .with(this)
                        .load(chargeTip?.chargeButtonUrl)
                        .playPolicy(KKGifPlayer.PlayPolicy.Auto_Always)
                        .into(openViewIcon)
            }