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

Html5 canvas 绘制彩票走势图 因需要 要实现一个类似彩票走势图的功能,初次学Html5 ,很多地方不明白,前段时间也发帖请教过这个问题,也是没给个明确说话,在网上搜了很多,也没有实现的例子,今天仔细研究了下,发现其实也不是很难,现将代码贴出来,共同学习! 先来一张效果图: 实现的代码: table { border: 0; margin: 0; bor 阅读详情

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

前端 JS实现彩票开奖走势图 连线 之前做过一个用canvas实现的走势图效果,这次直接用JS实现吧。(在vue3 + TS的项目中实现的) 一、渲染页面的时候把需要连线的点加上“标记”类名 二、找出所有的“标记”类名 这里要注意,DOM节点没渲染完成是会拿到空的 let eleDots = document.querySelectorAll(".lableNum"); 三、创建连线(画线方法) 这里要注意,创建出来的 i 标签的样式不要写在带有 scoped 的style里 阅读详情

相关推荐

小程序的模拟实战学习大乐透数据展示

最近在写一个小程序练手。准备做个中国体彩的小程序。公开部分代码及思路。 首先参考了体彩官网:http://www.lottery.gov.cn / 准备采用这种风格。制作如下: : 首先需要找到json的免费api接口:http://f.apiplus.net/dlt.json 这个是我度娘查到的一个 数据如下: {"rows":5,"code":"dlt","in

dl0246的博客 4220

安卓项目实战之:RecyclerView实现中奖公告列表信息垂直自动无限滚动效果

效果图 实现的思路 通过调用RecyclerView的smoothScrollToPosition(int position)方法我们可以实现平滑的滚动到参数所指定的position的位置,如果仅仅是调用了该方法那么滚动将会以系统默认的速度来进行,并且该速度通常是非常快的,快到如果将参数position的值设置的很小可能会看不到滚动的过程而直接看到结果,设置稍微大点例如为100时就会看到2秒的滚动...

智玲君 3324

uniapp(vue):js实现双色球开奖走势图带连线

uniapp(vue):js实现双色球开奖走势图带连线

sunluyi的博客 6441

使用canvs绘画彩票或股票走势图

1、先确定需要绘制图走势图的table2、获取table的尺寸,同时制作响应的canvs尺寸,canvs表格尺寸建议和表格尺寸相同,并通过定位覆盖在table之上,统称“设置画布”        let table = $('.chartsTable')    // 通过jquery获取表格对象 // 设置画布 let cvs = document.createEl...

scorpio的世界 6455

彩票走势图

这是一个彩票走势图,根据网上搜索的资源进行更改的,用了画布进行绘画每两点之间的走势,可以进行更改数据接口,以及绘画的格式

Android 彩票走势分析图

Android彩票走势图分析,适合新手学习,通过canvas绘制走势图

前端 彩票开奖走势图的实现

彩票开奖走势图的实现页面结构js 部分效果图 做的是移动端的VUE + Vant。走势图每一条线都是一个canvas实现的 页面结构 部分参数我用“***”打个码,这里tbody动态创建, <table id="zstable"> <thead> <tr> <th

weixin_45461674的博客 5081

纯api画走势图

纯api绘制走势图 vfp 画图的质量真不怎么样

通过SVG实现彩票数据走势图

主要通过html、css、js、svg等实现了彩票的数据走势图,主要利用空闲时间学习了下,请勿作为他用!svg.js 下载: https://download.youkuaiyun.com/download/songanshu/11863230 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&gt...

songanshu的博客 1753

程序源码 双色球走势分析图源码_tend(ASP.NET源码).rar

免责声明:资料部分来源于合法的互联网渠道收集和整理,部分自己学习积累成果,供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者或出版方,资料版权归原作者或出版方所有,本人不对所涉及的版权问题或内容负法律责任。如有侵权,请举报或通知本人删除。

jQuery仿双色球开奖抽奖特效代码

jQuery仿双色球开奖抽奖代码是一款jQuery利用css3属性制作数字转盘,点击抽奖按钮随机抽取数字号码中奖结果。

微信小程序彩票号码生成器

彩票号码生成器 一、案例说明 设计一个小程序,生成一注7个彩票号码(1-31),并在圆形图标上显示,加上一个按钮,每点一次重新生成,同时生成不同的颜色圆形图标。 二、案例代码 1)index.wxml文件 <!--index.wxml--> <image src="/image/caipiao.png" style="width: 750rpx; height: 256rpx; display: inline-block; box-sizing: bord......

weixin_45739654的博客 1万+

从零构建:基于Docker与FRR的OSPF虚拟网络实验室

本文详细介绍了如何利用Docker与FRR构建OSPF虚拟网络实验室,从环境设计到高级网络拓扑配置,再到实验验证与排错。通过容器化技术实现高效资源利用和快速部署,特别适合网络协议教学、企业网络架构验证等场景。

plum99的博客 221

前端 Vue实现彩票走势图

Vue结合Jq以及canvas的使用,完成简单的彩票走势图

前端全栈干货分享|小程序|Vue3|CSS 动效|工程化|项目实战 2555

HIL(硬件在环)技术汇总梳理

HIL(Hardware-in-the-Loop)测试领域的知名公司有dSPACE、NI、Vector和speedgoat等,本文是针对这几家HIL技术的对比分析。

Mr.Cssust的博客 3686

Seedance 2.5、HappyHorse 1.1与豆包Seed 2.1:一周内三大模型技术参数分析

音频生成延续原生音画同步架构,将文本、画面、音频统一序列建模,生成过程同步产出匹配口型的原声音频,支持中、英、日、韩、德、法、阿拉伯7种语言唇形对齐,无需二次调音。从行业趋势看,30秒直出、4K分辨率、7语种唇形同步正在成为视频生成的标配,编程Agent化和多模态理解正在成为语言模型的标配。技术狂奔的同时,监管在同步收紧。我理解这里的关键在于,视频生成模型的商业化落地不仅取决于生成质量,更取决于推理效率——生成一段15秒1080P视频需要多少秒、消耗多少算力,直接决定了模型的商用可行性。

lichunchuan1的博客 323

为了买彩票,我写了这个控件

0. 最近偶尔会买个双色球,一周买个6块钱的,也不多,就是凑个热闹,为生活添加个小情趣。因为不会选号,每次都是机选,作为一个阴谋论者,我觉得机选可能不够“随机”,为此我决定自己写个程序为我选号,为此我模仿老虎机写了一个控件。先上图 1. 先设计一下 1.1支持从数字和数组获取数据 1.2绘制两个数字,当前数字和下一个数字 1.3设置便宜量,并实现加速 1.4开始和停止,停止时添加回调 1.5支持...

weixin_33788244的博客 255

从零到一:手把手教你用DJI E-Port套件为M350 RTK开发第三方负载(PSDK V3实战)

本文详细介绍了如何使用DJI E-Port套件为M350 RTK开发第三方负载,涵盖硬件配置、开发环境搭建及实战应用。通过PSDK V3开发套件,开发者可以高效实现负载与无人机的通信,适用于电力巡检等工业场景,提升开发效率与系统稳定性。

weixin_26841743的博客 701

Android仿网易彩票数字奖池动画效果

明显的动画效果,而且是随着时间的推移,前面的数字暂停下来。数字的滚动用线程?!当然可以实现。但是前面的数字停下,这种效果不好处理。我开始想的是从最大的数字开始跑,一直减到0,在跑的过程中比对数字的位数,高位的就截取最终的结果,低位的显示当前的计数。同样的很麻烦,而且控制不了显示的位数,万一显示上亿,GG了。换思路,我发现网易的动画里每个位置上的数字都是很随机的出现,不是规律的递减。那就获取最终结果的位数,然后线程里随机0到9:如果size是5,返回的一直是一个五位数,当很快速的刷新的时候,效果就很动画了。

金戈鐡馬 530

从碰撞电离到雪崩击穿:Sentaurus仿真中的模型选择与验证艺术

本文深入探讨了Sentaurus TCAD中雪崩击穿模型的选取与验证方法,特别关注平行平面结的仿真实践。通过对比Chynoweth、van Overstraeten等主流模型的适用场景与精度差异,结合具体案例展示了从几何建模到边界条件设定的完整验证流程,并针对非理想因素提供了有效的补偿技术,助力工程师提升器件仿真的准确性与可靠性。

weixin_29074295的博客 592

硬件工程师八大细分岗位详解:从芯片到整机的技术分工与职业选择

硬件工程作为电子系统设计的核心领域,涉及从芯片级到整机级的完整技术链条。其基本原理是通过电路设计、信号处理和功率管理等技术,将电子元件集成为功能完备的硬件系统。随着产品复杂度提升,硬件工程师岗位出现高度专业化分工,这种细分不仅提升了技术深度,更优化了团队协作效率。在工程实践中,信号完整性和电源完整性成为高速数字设计的两个关键技术挑战,直接影响系统稳定性。本文基于行业热词"硬件工程师"和"信号完整性",深入解析八大细分岗位的技术差异,帮助从业者明确职业发展方向,构建系统化的硬件设计思维。

weixin_33811539的博客 450

Android纯手工实现几种数据趋势图的自定义View(超简单,有源码)

不需要依赖第三方框架,直接使用Canvas drawLine,drawPath,drawCircle 复制代码 等几个简单的API即可搞定 效果图 源码:https://github.com/woshiwzy/trendviews 部分代码节选 onDraw protected void onDraw(Canvas canvas) { super.onDraw(canvas); w = getWidth(); h = g..

Sand哥的博客 3022

4 屏 + 8 摄像头一开,谁在悄悄拖慢你的座舱域控?

如果你觉得座舱卡顿:❌ 别第一反应怪 SoC❌ 别盲目堆算力。

weixin_43199439的博客 148

Python数据分析及可视化(Matplotlib, Plotly,random)实例:双色球根据往期数据产生随机号码

Python数据分析及可视化(Matplotlib, Plotly,random)实例:双色球根据往期数据产生随机号码

曾经的你-2015的博客 3492

Redhawk:如何gds2def?

使用redhawk gds2def功能 这其中gds_layer.map的书写方式如下: m代表metal,v代表via。 ICC/ICC2用户可以从tech file中获取layer number。 innovus用户可以从stream out layer map中获取layer number。 最后运行gds2def -m gds2def.config即可。 ...

m0_61544122的博客 5340

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

android 彩票 控件,Android_自我总结(一)之彩票app总结

1.Android Studio引用其他project:APP路径:D:\workspace\AndroidStudio\EnjoyLottery\app\build.gradle2.开机动画,联网操作:new handler.postDelayed(startActivity,2000);延迟操作+startActivity->联网操作。实现方法:封装:okgo框架+RxJava. 关键代...

weixin_35959694的博客 633

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

上一篇: 后台仿京东商城接口设计缺陷吐槽篇
下一篇: CoordinatorLayout实现嵌套滑动吸顶效果
AnalyzeSystem
博客等级 码龄11年 204粉丝 114原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值