Android

Anko学习

2018-11-18  本文已影响0人  沉迷学习_日渐发福

anko

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

环境配置

因为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的功能,我们可以直接这么引入,否则我们需要单独引入每一个功能的依赖。

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 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)
            }
上一篇下一篇

猜你喜欢

热点阅读