Anko学习
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)
}