使用 Kotlin 实现高效动态编写布局, Drawable, Animation

发布日期: 2020-06-25

更新日期: 2023-05-10

文章字数: 646

阅读时长: 3 分

阅读次数:

Getting started

In your build.gradle:

allprojects {
  repositories {
    mavenCentral()
  }
}

In your module/build.gradle:

dependencies {
  implementation 'com.weicools:fluent-ui:1.0.1'
}

Usage

val rootView = constraintLayout {
  layoutParams = defaultParams(matchParent, 64.dp)

  imageView(R.id.iconId) {
    layoutParams = constraintParams(40.dp, 40.dp) {
      leftToLeft = parentId
      centerVerticalOf = parentId
      leftMargin = 16.dp
    }
    imageResource = R.drawable.ic_arrow
  }

  textView(R.id.textId) {
    layoutParams = constraintParams(0, wrapContent) {
      leftToRight = R.id.iconId
      rightToRight = parentId
      centerVerticalOf = parentId
      leftMargin = 8.dp
      rightMargin = 16.dp
    }
    text = "layout title"
  }
}

Note 📢
The main process is automatically initialized context by default, Multiple processes need to be initialized manually: [FluentUiInitializer.initialize]
Avoid using xxxResourceOf methods (such as colorResourceOf, dimenResourceOf, etc.) in View/Layout (which internally depends on appContext).
Using them directly can cause the View/Layout to fail to preview because during preview, appContext is not initialized and cannot access the relevant resources.

Screenshots

Usage sample

Structure

com.weikeet.ui
├── animation   -> 动画: Kotlin dsl 构建动画
├── app         -> 应用: app context 以及通过 app context 获取相关资源
├── graphics    -> 图形: Kotlin dsl 构建 drawable
├── res         -> 资源: color, dimen, drawable, font, string
├── unit        -> 单位: dp, sp, px 转换
├── view        -> 视图: Kotlin dsl 构建 view, viewgroup
├── widget      -> 控件: Kotlin 控件属性扩展
└── window      -> 窗口: WindowInsets(StatusBar, NavigationBar, ime) 相关监听

animation

快速创建动画 animator

startFloatAnimation(0f, 1f) {
  doOnFloatUpdate { animatedValue ->
    // do something
  }
  doOnStart {
    // do something
  }
  doOnEnd {
    // do something
  }
  duration = 240
  // repeatCount = 0
  // repeatMode = 
  // startDelay = 0
  // interpolator = LinearInterpolator()
}

more uses see Animator.kt

app

避免在 View/Layout 直接使用 dpOf(xx) 和 xxxResourceOf 方法 (如 colorResourceOf, dimenResourceOf 等),
直接使用会导致 View/Layout 预览失败, 因为预览时 appContext 未初始化, 无法访问相关资源.
应该使用 xx.dp, dip(xx), xxxResources 方法 (如 colorResources, dimenResources 等)

资源获取

// get resource using app context
val color = colorResourceOf(R.color.colorPrimary)
val colorList = colorStateListOf(R.color.colorPrimary)

val dimen16 = dimenResourceOf(R.dimen.padding_16)
val dimenSize16 = dimenSizeResourceOf(R.dimen.padding_16)
val dimenOffset16 = dimenOffsetResourceOf(R.dimen.padding_16)

val drawable = drawableResourceOf(R.drawable.ic_arrow)

val font = fontResourceOf(R.font.font_name)

val string = stringResourceOf(R.string.app_name)

Unit 转换

// Convert dp to px using app context
val dp10 = dpOf(10)
val dp10f = dpOf(10f)

graphics

使用 Kotlin dsl 像 xml 一样构建 drawable

// create drawable using kotlin dsl
val drawable = shapeDrawable {
  corners {
    radius = 20f.dp
  }
  solidColor = 0xff00ff00.toInt()
}

more uses see

res

Context/Fragment/View 快捷获取资源

// get color using context/fragment/view resource
val color = colorResources(R.color.colorPrimary)
val colorList = colorStateList(R.color.colorPrimary)

val dimen16 = dimenResources(R.dimen.padding_16)
val dimenSize16 = dimenSizeResources(R.dimen.padding_16)
val dimenOffset16 = dimenOffsetResources(R.dimen.padding_16)

val drawable = drawableResources(R.drawable.ic_arrow)

val font = fontResources(R.font.font_name)

val string = stringResources(R.string.app_name)

unit

dp, px 转换

// Convert dp to px using context/fragment/view resource
val dp10 = dp(10)
val dp10f = dp(10f)

// Convert sp to px using system resource
val dp20 = 20.dp
val dp20f = 20f.dp

view

使用 Kotlin dsl 像 xml 一样构建 View, ViewGroup

val rootView = constraintLayout {
  layoutParams = defaultParams(matchParent, 64.dp)

  imageView(R.id.iconId) {
    layoutParams = constraintParams(40.dp, 40.dp) {
      // ...
    }
  }

  textView(R.id.textId) {
    layoutParams = constraintParams(0, wrapContent) {
      // ...
    }
  }
}

more uses see ui/view

kotlin 控件属性扩展

context.textView {
  textColorResource = R.color.colorPrimary
  stringResource = R.string.app_name
  // ...
}

context.imageView {
  imageResource = R.drawable.ic_arrow
  // ...
}

more uses see ui/widget

window

WindowInsets 相关监听

// adapt edge to edge
WindowInsetsEdgeDelegate(activity).start()

// listen window insets
view.doOnApplyWindowInsets { windowInsets ->
  // do something
  // eg: view.updatePadding(top = windowInsets.systemBarTop)
}