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

博主爱玩彩票,今早刚好看到淘宝手机端彩票走势图表效果非常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: 比较简单没有源码了,博主也比较懒见谅了

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值