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

Posted 2022-11-03 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: 比较简单没有源码了，博主也比较懒见谅了