Android自定义分段报警进度条

效果图(不喜勿喷)

需求

  1. 分段显示一天的报警进度条javascript

  2. 点击报警区域弹出报警的开始时间与结束时间java

  3. 显示区域的数据格式(如下伪代码,就是个说明):git

    List<String> list,{2020-09-01 00:00:00,2020-09-01 02:00:00}
    list[0]=2020-09-01 00:00:00; //开始时间
    list[1]=2020-09-01 02:00:00; //结束
    
    复制代码

原理

  1. 每秒像素点px是多少 = 测量到的自定义组件长度 / 24 x 60 x 60github

  2. 须要一个起始长度,也就是天天零点的时间戳是多少,参数:mStartSection算法

  3. 绘制算法:每个报警显示的分段都有开始的时间与结束的时间,经过开始与结束的时间戳与天天零点的时间戳相减既可得出每个报警分段:canvas

    int startSection = (int) ((timeShaftItem.getStartSection() - mStartSection) / mConvertUnit);
    int endSection = (int) ((timeShaftItem.getEndSection() - mStartSection) / mConvertUnit);
    复制代码

    mConvertUnit是转换单位,这里是1000毫秒,即1秒。最后经过startSection与endSection计算每一个分段要显示的报警区域的x坐标:缓存

    int startX = (int) (startSection * mPixelsPer);
    int endX = (int) (endSection * mPixelsPer);
    复制代码

    最后经过画笔cavas绘制出,咱们须要的区块:markdown

    canvas.drawRect(startX, 0, endX, getHeight(), mRegionPaint);
    复制代码
  4. 点击区域的算法要怎么搞呢,聪明的同窗应该想到了吧,哈哈~oop

    不扯了,算法以下:spa

    ShaftRegionItem timeShaftItem = mShaftItems.get(i);
    int startSection = (int) ((timeShaftItem.getStartSection() - mStartSection) / mConvertUnit);
    int endSection = (int) ((timeShaftItem.getEndSection() - mStartSection) / mConvertUnit);
    int startX = (int) (startSection * mPixelsPer);
    int endX = (int) (endSection * mPixelsPer);
    //存下坐标,给点击判断用;
    timeShaftItem.setStartX(startSection * mPixelsPer);
    timeShaftItem.setEndX(endSection * mPixelsPer);
    mShaftItems.set(i, timeShaftItem);
    复制代码
    for (ShaftRegionItem item : mShaftItems) {
            if (x >= item.getStartX() && x <= item.getEndX()) {
                Log.e(TAG, "ACTION_UP + " + item.toString());
                if (clickSectionListener != null) {
                    clickSectionListener.clickBar(item, viewY);
                }
                break;
            }
        }
    复制代码
    public boolean onTouchEvent(MotionEvent event) {
            int actionType = event.getActionMasked();
            switch (actionType) {
                case MotionEvent.ACTION_UP:
                    clickBar(event.getX(), getBottom());
                    break;
            }
            return true;
        }
    复制代码

    看到了没哟,是否是很简单,没啥难度,就是看到你在点击的时候,判断你点击的x轴坐标是否在咱们缓存好的每一个显示区域开始与结束的X坐标区间内,是的话就弹咯~

遗憾

其实里面还有个问题是弹出框的定位与显示问题,没找到合适的弹出方式,就先这样了~

地址

github.com/hzl512/Sect…

相关文章
相关标签/搜索