仿淘宝双色球走势图自定义控件

Posted 2021-06-30 AnalyzeSystem

博主爱玩彩票，今早刚好看到淘宝手机端彩票走势图表效果非常nice，于是乎code一上午，大致效果还是出来了，碍于数据就没有细调UI，效果图如下

实现思路也比较简单：几个recyclerView+手势分发，布局如下

整体布局是一个FrameLayout+上面的布局+自定义手势分发控件：LotteryTouchView

adapter需要实现item不同的背景，可以通过layoutPosition解决

               var drawableResId = 0
                when (item.isStatisticsDate) {//是否是统计相关数据
                    true -> {//历史间隔、遗漏分层等相关数据
                        drawableResId = when (helper.layoutPosition % 2 == 0) {
                            true -> {
                                R.drawable.shape_date_f6f0f3
                            }
                            false -> {
                                R.drawable.shape_date_ecc3c3
                            }
                        }
                    }
                    false -> {//开奖号相关数据
                        when (helper.layoutPosition % 2 == 0) {
                            true -> {
                                drawableResId = R.drawable.shape_date_ffffff
                            }
                            false -> {
                                drawableResId = R.drawable.shape_date_f7f7f7
                            }
                        }
                    }
                }
                name.setBackgroundResource(drawableResId)

recyclerView绑定适配器后发现HorizontalScrollView嵌套垂直滑动的recyclerView，recyclerView嵌套水平滑动的recyclerView横向滑动会有问题，重写垂直滑动recyclerView修改recyclerView的宽度

override fun onMeasure(widthSpec: Int, heightSpec: Int) {
        super.onMeasure(widthSpec, heightSpec)
        var params = layoutParams
        params.width = dip2px(context, 30f) * 33//双色球33个数字对应item个数*固定item宽度
        layoutParams = params
    }

单个模块的滑动没问题了，再来调整ui显示细节问题，根据返回数据约定值判断显示的文字颜色和背景色

class LotteryBean {
    /**
     * 期数
     */
    var dateName = ""

    /**
     * 是否是统计数据
     */
    var isStatisticsDate = false

    /**
     * 相关号码数据集合
     */
    var lotteryList : ArrayList<Lottery>? = null
    
       class Lottery {
       /**
        * 当前号码
        */
       var number = 0

       /**
        * 是否是中奖号码
        */
       var isLotteryNumber = false

       /**
        * 是否是连续号码
        */
       var isContinuousNumber = false

       /**
        * 是否是统计数据
        */
       var isStatisticsDate = false
   }
}

view.scrollBy(dx,dy) 函数可以实现view滑动指定距离值，自定义的LotteryTouchView根据DOWN、MOVE获得dx 、dy分发给需要联动滑动的控件调用scrollBy即可实现，代码如下

class LotteryTouchView @JvmOverloads constructor(
    context: Context?,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context!!, attrs, defStyleAttr) {

    private var lastX = 0f
    private var lastY = 0f

  // .....................................................此处省略.............................................................

    fun bindViews(lotteryDateView: LotteryDateView, lotteryHeaderView: LotteryHeaderView.......）
         // .....................................................此处省略..需要联动的控件传入...........................................................
    {
        this.lotteryContentView = lotteryContentView
       // .....................................................此处省略.............................................................
    }

    override fun onTouchEvent(event: MotionEvent?): Boolean {
        when (event?.action) {
            MotionEvent.ACTION_DOWN -> {
                lastX = event!!.x //float DownX
                lastY = event!!.y //float DownY
            }
            MotionEvent.ACTION_MOVE -> {
                val moveX: Float = event!!.x - lastX //X轴距离
                val moveY: Float = event!!.y - lastY //y轴距离
                scrollXY(-moveX, -moveY)
                lastX = event!!.x //float DownX
                lastY = event!!.y //float DownY
            }
        }
        return true
    }

    private fun scrollXY(dx: Float, dy: Float) {
        lotteryDateView?.scrollBy(0, dy.toInt())
        lotteryHeaderView?.scrollBy(dx.toInt(), 0)
        lotteryContentView?.scrollBy(0, dy.toInt())
        scrollView?.scrollBy(dx.toInt(), 0)
    }

}

以上代码基本实现效果，考虑后续扩展彩种类型，可增加LotteryType,更具type修改固定适配器数据源和recyclerView宽度，至于界面细节调整参考adapter修改即可

Tip: 比较简单没有源码了，博主也比较懒见谅了