前言

滚轮经常在挑选中用到,首要包含类型挑选省市区联动挑选年月日联动挑选等。

项目中的WheelView一般都是ScrollView+LinearLayout组合完结的。

可是自界说起来比较杂乱,也有一些优秀的第三方库DateSelecter 经过Adapter的思想来灵敏处理自界说的问题。

可是既然用到了Adapter的思想,那为啥不运用RecyclerView来完结呢?,毕竟咱们比较了解RecyclerView.Adapter 也便利和项目中现有的Adapter复用。

所以我基于RecyclerView完结了一个滚轮模块,这些是他的根底功用:

  • RecyclerViewAdapter低侵入性,逻辑独自封装成RecyclerWheelViewModule
  • 支撑经过Adapter自界说WheelView样式
  • 支撑横向和竖向
  • 支撑自界说WheelView边框

一起在滚轮模块的根底上,完结了联动滚轮View的封装。

项目地址 BindingAdapter

  • 拓宽模块-分页模块
  • 拓宽模块-挑选模块
  • 拓宽模块-滚轮模块
  • 拓宽模块-悬浮模块

效果

RecyclerView 实现WheelView和省市区多级联动
RecyclerView 实现WheelView和省市区多级联动
RecyclerView 实现WheelView和省市区多级联动

滚轮模块的用法也很简单,一起侵入性极低,运用拓宽就能recyclerView.setupWheelModule()RecyclerView改形成WheelView

它会回来RecyclerWheelViewModule 里边包含了操作滚轮模块的各种API

class XxxActivity {
    val recyclerView: RecyclerView
    val wheelAdapter =
        BindingAdapter<String, ItemWheelVerticalBinding>(ItemWheelVerticalBinding::inflate) { _, item ->
            itemBinding.text.text = item
            itemBinding.text.setTextColor(if (isWheelItemSelected) Color.BLACK else Color.GRAY)
        }
    fun onCreate() {
        recyclerView.adapter = wheelAdapter
        val wheelModule = recyclerView.setupWheelModule()
        wheelModule.apply {
            offset = 1
            orientation = RecyclerWheelViewModule.VERTICAL
            setWheelDecoration(DefaultWheelDecoration(10.dp, 10.dp, 2.dp, "#dddddd".toColorInt()))
            onSelectChangeListener = {
            }
        }
    }
}

原理

WheelView的功用自身并不杂乱,布局翻滚都是RecyclerView现已处理好的。

因而咱们只需求处理一些WheelView的特性即可。

本着代码越少,Bug越上的原则。绝大多数特性都尽量运用RecyclerView供给的API,或许官方已有的模块去完结。

完结一个WheelView的功用首要完结以下完结:

  • 选中的Item居中显现,在翻滚后主动居中选中的方位
  • Item的最上和最下有必定翻滚间隔,来使得最边际的Item能够居中,一起让WheelView 的尺度刚好显现3个或5个Item
  • 支撑制作上下边界线来标识给用户滚轮选中区域
  • 用户滑动时,更新选中方位,并改写Item数据,如加粗或许设置字体色彩为黑色
  • 支撑代码设置和获取当时选中方位

Item居中

WheelView在翻滚中止后,会主动使得当时最靠近中心的Item翻滚到布局的中心方位。

官方供给了SnapHelper 来协助咱们处理Item的对齐。

而它的子类LinearSnapHelper 能够监听RecyclerView的翻滚,在翻滚完毕后,使得最接近RecyclerView视图中心的那个Item的中心对齐到视图中心,简单描绘便是它能使Item居中

一起它也供给了许多有用的API的可重写的办法,咱们经过重写onFling能够控制一下翻滚速度。

class WheelLinearSnapHelper : LinearSnapHelper() {
    override fun onFling(velocityX: Int, velocityY: Int): Boolean =
        super.onFling(
            (velocityX * flingVelocityFactor).toInt(),
            (velocityY * flingVelocityFactor).toInt()
        )
}

上下留白

这儿的留白是指,在WheelView的开端和完毕方位有必定的空白,以便于终究一个Item能翻滚到中心。

由于留白的存在,当RecyclerView翻滚到最上面时,第一个Item 刚好处于中心方位

RecyclerView 实现WheelView和省市区多级联动

RecyclerView 实现WheelView和省市区多级联动

上下留白的数量咱们界说为offset ,从另外一个角度来看能够将留白当作offsetHeaderoffsetFooter

提起Header/Footer,咱们在之前的文章 RecyclerView封装-结合ViewBinding 3行代码创建Adapter! 中有介绍ConcatAdapter 来完结Header/Footer,因而这儿就直接选用ConcatAdapter 不再赘述。

这儿的每个留白的高度一般便是Item的高度。

一般状况WheelView的每个Item的高度是共同的,咱们取第一个Item的高度作为留白的高度。

以下是Header/FooterAdapter完结:

class OffsetAdapter(private val adapter: RecyclerView.Adapter<RecyclerView.ViewHolder>) :
    RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) =
        adapter.createViewHolder(parent, viewType)
    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        if (adapter.itemCount > 0) {
            adapter.onBindViewHolder(holder, 0)
        }
        holder.itemView.visibility = View.INVISIBLE
        measureItemSize(holder.itemView) //丈量和记录一下留白的高度
    }
    override fun getItemCount(): Int = offset
}

经过ConcatAdapter 依次衔接HeaderAdapter+数据Adapter+FooterAdapter 就完结了留白功用。

在项目中,咱们想给RecyclerView 的开端和完毕加padding 也能够经过这种办法。

然后从头设置RecyclerViewAdapter

fun setAdapter(adapter: RecyclerView.Adapter<out RecyclerView.ViewHolder>?) {
    val startOffsetAdapter = OffsetAdapter(adapter)
    val endOffsetAdapter = OffsetAdapter(adapter)
    recyclerView.adapter = ConcatAdapter(
        startOffsetAdapter,
        adapter,
        endOffsetAdapter
    )
}

一般状况下咱们的WheelView的高度都是中心选中Item的高度加上上下额定显现offsetItem的高度。

也便是总共显现offset+1+offsetItem

所以一般WheelView高度为(offset+1+offset)*itemSize

这儿咱们在OffsetAdapter丈量出Item尺度后顺便设置一下WheelView的高度。

fun measureItemSize(itemView: View) {
    //....
    itemSize = itemView.measuredHeight + margin
    recyclerView.layoutParams = recyclerView.layoutParams.apply {
        width = (offset + offset + 1) * itemSize
    }
}

制作边界线

边框是一般指WheelView中心有2条边界线,用来标识WheelView 选中区域。用来告知用户,翻滚到这2个边界线中心的是选中的Item

RecyclerView 实现WheelView和省市区多级联动

RecyclerView中制作在Item之上的内容咱们能够运用RecyclerView.ItemDecoration,所以几乎也不需求咱们完结。

咱们首要首要依据itemSize 去核算当时上下边框方位来制作即可。

class DrawableWheelDecoration(
    val drawable: Drawable,
    @Px private val size: Int,
) : WheelDecoration() {
    override fun onDrawOver(c: Canvas, parent: RecyclerView, state: RecyclerView.State) {
        //...
        val center = parent.width / 2
        val left = center - wheelItemSize / 2
        val right = center + wheelItemSize / 2
        drawable.setBounds(left, top, right, top + size,)
        drawable.draw(canvas)
        drawable.setBounds(left, bottom, right, bottom + size)
        drawable.draw(canvas)
    }
}

用户滑动更新选中

RecyclerView 实现WheelView和省市区多级联动

用户滑动更新选中包含翻滚的过程中选中,和翻滚完毕后选中

  • 翻滚的过程中选中:一般用于实时更新Item选中状态。
  • 翻滚完毕后选中:一般用于挑选回调。

翻滚的过程中选中

先经过SnapHelper.findSnapView()能够获取当时RecyclerView视图中心的View

然后经过layoutManager.getPosition(snapView) 来获取View的方位,便是选中的方位currentSelectedPosition

override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
    if (itemSize == 0) {
        return
    }
    val layoutManager = recyclerView.layoutManager ?: return
    val globalAdapter = recyclerView.adapter ?: return
    val dataAdapter = dataAdapter ?: return
    val snapView = wheelLinearSnapHelper.findSnapView(layoutManager) ?: return
    val snapViewHolder = recyclerView.getChildViewHolder(snapView)
    val snapViewPositionGlobal = layoutManager.getPosition(snapView)
    val snapViewPosition = globalAdapter.findRelativeAdapterPositionIn(
        dataAdapter,
        snapViewHolder,
        snapViewPositionGlobal
    )
    if (snapViewPosition == RecyclerView.NO_POSITION) {
        return
    }
    updateSelectPosition(snapViewPosition)
}
@SuppressLint("NotifyDataSetChanged")
private fun updateSelectPosition(selectedPositionNew: Int) {
    if (currentSelectedPosition != selectedPositionNew) {
        currentSelectedPosition = selectedPositionNew
        onScrollingSelectListener?.invoke(selectedPositionNew)
        //...
    }
}

翻滚过程的的选中往往是用来更新WheelView的选中状态的。

如果是BindingAdapter 的状况,咱们能够添加ViewHolder.isWheelItemSelected拓宽属性来便利在onBindViewHolder时获取当时是否Item是否选中。

var BindingViewHolder<*>.isWheelItemSelected: Boolean
    set(value) { setTag(R.id.binding_adapter_view_holder_tag_wheel_selected, value) }
    get() = getTag(R.id.binding_adapter_view_holder_tag_wheel_selected) == true

这儿不明白的同学也不要紧,不影响本文后续阅读,或许去之前文章看也行RecyclerView 低耦合单选、多选模块完结。

翻滚完毕后选中

在翻滚中止时的currentSelectedPosition便是翻滚完毕后选中currentDeterminePosition

override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
    super.onScrollStateChanged(recyclerView, newState)
    if (newState == RecyclerView.SCROLL_STATE_IDLE) {
        notifySelectDetermine(currentSelectedPosition)
    }
}
private fun notifySelectDetermine(value: Int) {
    if (currentDeterminePosition == value) {
        return
    }
    currentDeterminePosition = value
    onSelectChangeListener?.invoke(value)
}

设置选中方位

除了用户滑动去选中Item,有时分咱们需求默认回显之前选中的方位,也便是代码设置选中的方位。 其关键在于怎么使得方针View翻滚到RecyclerView中心

能够先了解下RecyclerView的翻滚到指定方位的API。

  • scrollToPosition 使得坐落positionView显现在RecyclerView中,无法控制详细显现在上面中心仍是下面。
  • scrollToPositionWithOffset 使得坐落positionView显现在RecyclerView的顶部,而且经过offset控制偏移间隔。
  • smoothScrollToPosition 使得坐落positionView滑动到RecyclerView中,无法控制详细显现在上面中心仍是下面。

可见RecyclerView没有供给直接使得方针View翻滚到中心的API,因而咱们需求自己完结。


完结前先略微介绍下RecyclerView的一些布局概念:

RecyclerView重点在RecyclerAdapter里边即使有1万个数据,实践上RecyclerView的子View 也只要几个,仅仅复用了相同View去绑定不同数据。 这是和用LinearLayout来完结WheelView的一个比较大的区别

也便是想设置选中方位为position=1000,并不能直接经过找position=1000View然后核算的间隔来翻滚的。 由于position=1000或许在屏幕外面很远,所以对应的View或许还不存在,或许说是还没有LayoutRecyclerView中。

你或许会疑问,那scrollToPosition是咋完结的呢?

能够看看源码,它实践是设置了标记位mPendingScrollPosition,然后触发requestLayout() ,来使得RecyclerViewmPendingScrollPosition开端布局子View

RecyclerView 实现WheelView和省市区多级联动

因而咱们完结时还需求考虑View还没有Layout到RecyclerView的状况。

走运的是它供给了layoutManager.findViewByPosition(position) 这个API来得知是否方针View是否LayoutRecyclerView,如果现已Layout回来其View引证。


非滑润翻滚(smooth=false)

咱们经过scrollToPositionWithOffset 来触发方针方位的View进行Layout,然后再下一次Layout 时找到方针方位的View,并使它翻滚到中心。

doOnNextLayout 是core-ktx 完结的一个拓宽函数,能够监听下一次onLayout

layoutManager.scrollToPositionWithOffset(position, 0)
recyclerView.doOnNextLayout {
    //...
    recyclerView.scrollToPositionCenter(wheelLinearSnapHelper, adapter, position)
}

然后完结翻滚到中心的逻辑,运用 snapHelper.calculateDistanceToFinalSnap核算方针view到中心的间隔,然后经过scrollBy 翻滚即可


internal fun RecyclerView.scrollToPositionCenter(
    snapHelper: SnapHelper,
    adapter: RecyclerView.Adapter<*>,
    position: Int
) {
    val globalAdapter = this.adapter ?: return
    val globalPosition =
        globalAdapter.findGlobalAdapterPositionInCompatSelf(adapter, position)
    val layoutManager = this.layoutManager as? LinearLayoutManager ?: return
    val view = layoutManager.findViewByPosition(globalPosition)
        ?: return
    val snapDistance =
        snapHelper.calculateDistanceToFinalSnap(layoutManager, view)
            ?: return
    scrollBy(snapDistance[0], snapDistance[1])
}

经过了scrollToPositionWithOffset和doOnNextLayout,这儿的方针View应该是现已Layout到RecyclerView中的, 也便是layoutManager.findViewByPosition(globalPosition) 理论上不会回来null。 如果运用了ConcatAdapter,findViewByPosition运用的position需求留意运用大局的position,详细怎么转化能够检查本项目源码,这儿不展开讲。

滑润翻滚(smooth=true)

滑润翻滚在设置选中方针View时,它是经过动画渐渐滑动到对应的View的。

View是现已Layout的状况下,和非滑润翻滚的处理办法相同,只需把上面的scrollBy 改成 smoothScrollBy 即可完结翻翻滚画。

View是没有Layout的状况,略微杂乱一点,先看看RecyclerView供给的API。

检查源码能够看到 recyclerView.smoothScrollToPosition 终究是调用的layoutManager.startSmoothScroll(linearSmoothScroller)

也便是将滑动逻辑封装在了LinearSmoothScroller中,检查LinearSmoothScroller 源码能够发现,它会经过动画渐渐向方针方位翻滚。 边翻滚边触发那些快要进入RecyclerView可见规模的View进行数据绑定和Layout, 直到发现方针方位的View时会回调onTargetFound

RecyclerView 实现WheelView和省市区多级联动

由于发现的时分,或许是在RecyclerView的边际,这个时分它经过calculateDyToMakeVisible

去核算能使得这个View彻底显现所需求的翻滚间隔。

从办法名也能够看出,calculateDyToMakeVisible仅仅为了让View变得可见,而不是让View变得到顶部或底部或正中心,所以它只能确保是可见的。

calculateDyToMakeVisiblecalculateDxToMakeVisible 仅仅适配了横向和竖向,终究都调用了calculateDtToFit 来核算翻滚间隔的核算。

RecyclerView 实现WheelView和省市区多级联动

calculateDtToFit 的默认完结便是仅仅翻滚到让View可见的间隔,比方View顶部和RecyclerView 顶部对当时的间隔。

RecyclerView 实现WheelView和省市区多级联动

咱们的意图是让View在正中心,所以需求核算子View的中心方位和RecyclerView的中心方位的间隔。

private class CenterLinearSmoothScroller(context: Context?) : LinearSmoothScroller(context) {
    override fun calculateDtToFit(
        viewStart: Int,
        viewEnd: Int,
        boxStart: Int,
        boxEnd: Int,
        snapPreference: Int
    ): Int {
        val childCenter = viewStart + ((viewEnd - viewStart) / 2)
        val containerCenter = boxStart + ((boxEnd - boxStart) / 2)
        return containerCenter - childCenter
    }
}

终究实例化这个CenterLinearSmoothScroller运用layoutManager.startSmoothScroll 来完结滑动到中心。

internal fun RecyclerView.smoothScrollToPositionCenter(
    snapHelper: SnapHelper,
    duration: Int,
    position: Int
) {
    if (position < 0) {
        return
    }
    val layoutManager = this.layoutManager as? LinearLayoutManager ?: return
    val view = layoutManager.findViewByPosition(position)
    if (view == null) {
        val linearSmoothScroller = CenterLinearSmoothScroller(this.context)
        linearSmoothScroller.targetPosition = position
        layoutManager.startSmoothScroll(linearSmoothScroller)
        return
    }
    val snapDistance =
        snapHelper.calculateDistanceToFinalSnap(layoutManager, view)
            ?: return
    this.smoothScrollBy(snapDistance[0], snapDistance[1], null, duration)
}

多个滚轮的联动封装

联动便是多个滚轮的数据是有联络的,比方年月日省市区等。

在一个滚轮的选中改变时,被联动的滚轮数据也会进行改变

以省市区为例,的数据是依据选的定的,的数据是依据选的定的。

也便是这种联动联系本质也是一种依靠联系,A依靠[],B依靠[A],C依靠[A,B],D依靠[A,B,C],...

这儿为了便利咱们就不独自成一个模块了,而是直接承继LinearLayout来线性放置多个滚轮WheelView

然后运用去存储来支撑恣意个WheelView的联动。

为了便利存储和获取各个WheelView的属性,咱们运用WheelWrapper来略微包装一下每一个WheelView, 并存储到List<WheelWrapper> 中。

一起咱们将各个WheelView上述的依靠联系也存储起来,便利加载数据的时分运用。

class LinkageWheelView : LinearLayout(context, attrs) {
    //...
    val children: MutableList<WheelWrapper> = ArrayList()
    class WheelWrapper internal constructor(
        parent: WheelWrapper?,
        private val dataProvider: DataProvider,
        private val wheelModule: RecyclerWheelViewModule,
        private val adapter: BindingAdapter<CharSequence, *>,
    ) {
        private val parents: Array<WheelWrapper>
        //...
    }
}

由于WheelView的数据是不定的,因而每个WheelView供给数据时不是直接供给固定的List 数据,而是需求供给一个DataProvider作为数据加载器,依据其依靠的的WheelView去加载。

class LinkageWheelView {
    //...
    private val currentData: MutableList<DataProvider> = ArrayList()
    fun interface DataProvider {
        fun onLoad(
            cancellationSignal: CancellationSignal,
            parents: Array<WheelWrapper>,
            loadCallback: (List<CharSequence>) -> Unit
        )
    }
}

CancellationSignal 是Android的一个协助完结取消的东西。

比方WheelView依据省和市来加载的DataProvider大约是这样的:

DataProvider { cancel, parents, callback ->
    val (provinceWheel, cityWheel) = parents
    val counties = getCounties(provinceWheel.selectItem, cityWheel.selectItem)
    callback(counties)
}

然后设置DataProvider的时分,依据每个DataProvider去实例化WheelView

然后按顺序依次建立联动:也便是其依靠的WheelView选中数据改变时,从头加载数据。

fun setData(currentData: List<DataProvider>) {
    //...
    var parent: WheelWrapper? = null
    for ((index, dataProvider) in currentData.withIndex()) {
        //创建一个WheelView,addView 添加到布局
        val wheelItem = instantWheelWrapper(index, factory, parent, dataProvider)
        parent?.observeDetermineChange {
            //联动的WheelView选中数据改变时,从头加载本WheelView的数据
            wheelItem.loadData()
        }
        children.add(wheelItem)
        parent = wheelItem
    }
    //加载初始数据
    children.firstOrNull()?.loadData()
}

observeDetermineChange 的作用是设置监听器,监听当时选中数据的改变,一般便是WheelView选中改变和数据更新2种状况

 class WheelWrapper {
    private var selectChangeListener: (() -> Unit)? = null
    init {
        wheelModule.onSelectChangeListener = { selectChangeListener?.invoke() }
    }
    internal fun observeDetermineChange(listener: () -> Unit) {
        selectChangeListener = listener
    }
    internal fun loadData() {
        //...
        dataProvider.onLoad(cancellationSignal, parents) { data ->
            //...
            adapter.replaceData(data)
            selectChangeListener?.invoke()
        }
    }
}

至此滚轮联动的核心逻辑就完结了。

设置选中方位

可是往往咱们选中省市区时,需求回显当时选中的数据,因而咱们还需求支撑设置选中方位。

在前面的WheelView中咱们现已完结了设置单个WheelView的选中方位。 因而如果WheelView之间相关不大,能直接各自设置自己方位就简单了 比方3个WheelView都是挑选一个0~9的数,那么只需求核算其方位设置上去即可

fun setCurrentPositions(positions: List<Int>, smooth: Boolean = true) {
    for (i in 0 until positions.size.coerceAtMost(children.size)) {
        children[i].setSelectedPosition(positions[i], smooth)
    }
}

可是联动的状况,选中广东省-韶关市-曲江区的流程是这样的:

  1. 先核算广东省[广西省,广东省,...]的方位,然后设置第1个WheelView的选中

  2. 第2个WheelView监听到第1个WheelView的选中改变了,所以加载市的数据[韶关市,广州市,珠海市,...]

  3. 核算韶关市[韶关市,广州市,珠海市,...]的方位,然后设置第2个WheelView的选中

  4. 第3个WheelView监听到第2个WheelView的选中改变了,所以加载区的数据[浈江区,曲江区,武江区,...]

  5. 核算曲江区[浈江区,曲江区,武江区,...]的方位,然后设置第3个WheelView的选中

因而咱们需求完结一个API,能独自设置某个WheelView的选中方位,然后其引导的数据加载完结后,需求回调给调用者。

    /**
 * 设置指定WheelView方位
 * @param childIndex 指定index的滚轮
 * @param position 滚轮需求滑动到的方位
 * @param smooth 是否滑润翻滚
 * @param childDataLoad 滚轮滑动完结回调,而且子滚轮数据现已加载完结。如果当时滚轮现已是终究的,那么不会触发回调
 */
fun setCurrentPosition(
    childIndex: Int,
    position: Int,
    smooth: Boolean = true,
    childDataLoad: ((WheelWrapper) -> Unit)
) {
    //...
    children.getOrNull(childIndex)?.setSelectedPosition(position, smooth)
    //省掉其他状况...
    val after = children.getOrNull(childIndex + 1)?.scheduleDataLoadCallback {
        childDataLoad(after)
    }
}

scheduleDataLoadCallback 便是放置一个callback来监听数据加载。

class WheelWrapper {
    private var dataLoadedCallback: ((data: List<CharSequence>) -> Unit)? = null
    fun scheduleDataLoadCallback(callback: (data: List<CharSequence>) -> Unit) {
        dataLoadedCallback = callback
    }
    internal fun loadData() {
        //...
        dataProvider.onLoad(cancellationSignal, parents) { data ->
            //...
            adapter.replaceData(data)
            dataLoadedCallback?.invoke(data)
            dataLoadedCallback = null
        }
    }
}

运用起来就像这样:

val p0 = linkageWheelView.wheels.first().items.indexOf("广东省")
linkageWheelView.setCurrentPosition(0, p0) {
    val p1 = it.items.indexOf("韶关市")
    linkageWheelView.setCurrentPosition(1, p1) {
        val p2 = it.items.indexOf("曲江区")
        linkageWheelView.setCurrentPosition(2, p2) {
        }
    }
}

如同办法丑了一点,那就再用 DSL 拓宽优化一下:

linkageWheelView.setCurrentPositions {
    setPosition { it.indexOf("广东省") }
    setPosition { it.indexOf("韶关市") }
    setPosition { it.indexOf("曲江区") }
}

linkageWheelView.setData也顺便经过DSL 拓宽简化了下:

linkageWheelView.setData {
    provideData { arrayOf("Wheel0-0", "Wheel0-1") }
    provideData { arrayOf("Wheel1-0", "Wheel1-1") }
}

联动挑选示例

完结联动挑选需求只需求调用linkageWheelView.setData完结数据加载即可。

可是为了快捷运用一般也会完结数据转化,能够看以下2个比如。

完结省市区联动挑选

数据

首要咱们去网上下载,省市区数据JSON格局 ,并解析出来。

data class Province(
    val name: String,
    val cities: List<City>,
) : Serializable
data class City(
    val name: String,
    val counties: List<String>,
) : Serializable
@JvmStatic
fun loadLocalData(context: Context, fileName: String = "address.json"): List<Province> {
    val text = context.assets.open(fileName).use { it.bufferedReader().readText() }
    return JSONArray(text)
        .objects()
        .map { province ->
            val cities = province.getJSONArray("city").objects().map { city ->
                val counties = city.getJSONArray("area").strings()
                City(city.getString("name"), counties)
            }
            Province(province.getString("name"), cities)
        }
}

得到了List<Province> 作为原始数据。

然后经过linkageWheelView.setData设置即可。

fun setAddressData(provinces: List<Province>) {
    //...
    linkageWheelView.setData {
        provideData { provinces.map { it.name } }
        provideData { provinces[it[0].selectedPosition].cities.map { it.name } }
        provideData { provinces[it[0].selectedPosition].cities[it[1].selectedPosition].counties }
    }
}

数据转化

数据转化首要是给调用者更加便利去设置和获取当时的省市区数据。 先界说一个Model类,描绘省市区。

data class AddressBean(
    val provinceName: String,
    val cityName: String,
    val countyName: String,
)

然后完结set办法get办法

var current: AddressBean?
    get() {
        //...
        val (province, city, county) = linkageWheelView.currentItems.map { it.toString() }
        return AddressBean(province, city, county)
    }
    set(value) {
        //...
        linkageWheelView.setCurrentPositions {
            setPosition { it.indexOf(value.provinceName) }
            setPosition { it.indexOf(value.cityName) }
            setPosition { it.indexOf(value.countyName) }
        }
    }

完结年月日联动挑选

省市区的完结比较简单,咱们来完结一个略微杂乱一点的。

完结一个年月日挑选滚轮,支撑以下装备内容,

  • 能够支撑年-月-日,月-日,年-月,,, 形式。

  • 能动态核算日的规模。 如挑选年=2023月=02时,需求核算出可选的日的规模是0-28

  • 支撑设置最大、最小日期。当最小日期是2022-05-05时,最小年份只能选到2022;当年=2022 时,月最小只能选到05;当年=2022月=05时,日最小只能选到05。最大日期同理。

  • 支撑装备年月日的显现格局。

装备类如下:

/**
 * @param year 支撑年
 * @param month 支撑月
 * @param day 支撑日
 * @param maxValue 最大日期
 * @param minValue 最小日期
 * @param yearFormatter 年格局
 * @param monthFormatter 月格局
 * @param dayFormatter 日格局
 */
data class Options(
    val year: Boolean = true,
    val month: Boolean = true,
    val day: Boolean = true,
    val maxValue: Calendar = Calendar.getInstance(),
    val minValue: Calendar = Calendar.getInstance().apply { add(Calendar.YEAR, -10) },
    var yearFormatter: Formatter = Formatter { it.toString() },
    var monthFormatter: Formatter = Formatter { (it + 1).toString() },
    var dayFormatter: Formatter = Formatter { it.toString() }
)

数据

界说一些常量,便利后续用到,年月日的规模标准和Calendar类界说共同 。

companion object {
    val DEFAULT_MONTH_RANGE: IntRange = (0..11)
    val DEFAULT_DAY_RANGE: IntRange = (1..31)
}

年月日数据,经过linkageWheelView.setData 设置即可

  • 装备年provideData:没有依靠项,直接设置规模即可
  • 装备月provideData:或许会依靠年,取决所以否存在年,所以需求处理月-年-月- 2种状况(不依靠日,所以不需考虑月-日年-月-日的状况)
  • 装备日provideData:或许会依靠年和月,取决所以否存在年和月,所以需求处理,月-日年-月-日 3种状况 (年-日暂时没见过,所以不完结这种状况)

处理时只需求判别当时选中的值是否处于边界状况即可。

linkageWheelView.setData {
    val (maxYear, maxMonth, maxDay) = options.maxValue.flattenYmd()
    val (minYear, minMonth, minDay) = options.minValue.flattenYmd()
    if (options.year) {
        //形式“年-”
        provideData {
            (maxYear downTo minYear).formatYear()
        }
    }
    if (options.month) {
        provideData {
            //月份
            if (it.size < 1) {
                //形式“月-”
                return@provideData (minMonth..maxMonth).formatMonth()
            }
            //形式“年-月-”
            val selectedYear = it[0].realValue//当时年份
            val startYear =
                if (selectedYear == minYear) minMonth else DEFAULT_MONTH_RANGE.first
            val endYear =
                if (selectedYear == maxYear) maxMonth else DEFAULT_MONTH_RANGE.last
            (startYear..endYear).formatMonth()
        }
    }
    if (options.day) {
        provideData {
            if (it.size < 1) {
                //形式“日”
                return@provideData (minDay..maxDay).formatDay()
            }
            if (it.size < 2) {
                //形式“月-日” (不存在“年-日”形式)
                val selectedMonth = it[0].realValue
                val startDay =
                    if (selectedMonth == minMonth) minDay else DEFAULT_DAY_RANGE.first
                val endDay =
                    if (selectedMonth == maxMonth) maxDay else DEFAULT_DAY_RANGE.last
                return@provideData (startDay..endDay).formatDay()
            }
            //形式“年-月-日”
            val selectedYear = it[0].realValue//当时年份
            val selectedMonth = it[1].realValue//当时月份
            val selected = Calendar.getInstance().apply {
                set(selectedYear, selectedMonth, 1)
            }
            val startDay =
                if (selectedYear == minYear && selectedMonth == minMonth) minDay else DEFAULT_DAY_RANGE.first
            val endDay =
                if (selectedYear == maxYear && selectedMonth == maxMonth) maxDay else selected.getActualMaximum(
                    Calendar.DAY_OF_MONTH
                )
            return@provideData (startDay..endDay).formatDay()
        }
    }
}

format 和flattenYmd便是东西类,这儿就不贴出来了,感兴趣能够看源码

数据转化

数据类直接运用Calendar 完结年月日到对应方位的转化即可。

var current: Calendar
    get() {
        val values = linkageWheelView.currentItems.map { (it as ValueWrapper).realValue }
        val calendar = Calendar.getInstance()
        var index = 0
        if (options.year && index < values.size) {
            calendar.set(Calendar.YEAR, values[index++])
        }
        if (options.month && index < values.size) {
            calendar.set(Calendar.MONTH, values[index++])
        }
        if (options.day && index < values.size) {
            calendar.set(Calendar.DAY_OF_MONTH, values[index])
        } else {
            calendar.set(Calendar.DAY_OF_MONTH, 1)
        }
        return calendar
    }
    set(value) {
        linkageWheelView.setCurrentPositions {
            if (options.year) {
                setPosition {
                    it.indexOf(value.get(Calendar.YEAR)).coerceAtLeast(0)
                }
            }
            if (options.month) {
                setPosition {
                    it.indexOf(value.get(Calendar.MONTH)).coerceAtLeast(0)
                }
            }
            if (options.day) {
                setPosition {
                    it.indexOf(value.get(Calendar.DAY_OF_MONTH)).coerceAtLeast(0)
                }
            }
        }
    }

总结

本文完结了滚轮模块CalendarChooseModule,能够低侵入性的将RecyclerView改形成 WheelView,一起UI能经过Adapter自界说。 而且完结了联动滚轮LinkageWheelView,能够比较便利的完结省市区多级联动,年月日联动等。

以上提到的比如源码均可在项意图Demo(wheel目录)找到。

项目地址 BindingAdapter