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…

相關文章
相關標籤/搜索