你好,歡迎來到IOS教程網

 Ios教程網 >> IOS編程開發 >> IOS開發綜合 >> 自定義時間選擇控件(仿ios滾動效果)

自定義時間選擇控件(仿ios滾動效果)

編輯:IOS開發綜合

1.先上自定義的控件:

/**
 * 滾輪選擇器
 * author LH
 * data 2016/8/20 17:26
 */
public class WheelView extends View {

    public static final String TAG = "WheelView";

    /**
     * 自動回滾到中間的速度
     */
    public static final float SPEED = 2;

    /**
     * 除選中item外,上下各需要顯示的備選項數目
     */
    public static final int SHOW_SIZE = 1;

    private Context context;

    private List itemList;
    private int itemCount;

    /**
     * item高度
     */
    private int itemHeight = 50;

    /**
     * 選中的位置,這個位置是mDataList的中心位置,一直不變
     */
    private int currentItem;

    private Paint selectPaint;
    private Paint mPaint;
    // 畫背景圖中單獨的畫筆
    private Paint centerLinePaint;

    private float centerY;
    private float centerX;

    private float mLastDownY;
    /**
     * 滑動的距離
     */
    private float mMoveLen = 0;
    private boolean isInit = false;
    private SelectListener mSelectListener;
    private Timer timer;
    private MyTimerTask mTask;

    Handler updateHandler = new Handler() {

        @Override
        public void handleMessage(Message msg) {
            if (Math.abs(mMoveLen) < SPEED) {
                // 如果偏移量少於最少偏移量
                mMoveLen = 0;
                if (null != timer) {
                    timer.cancel();
                    timer.purge();
                    timer = null;
                }
                if (mTask != null) {
                    mTask.cancel();
                    mTask = null;
                    performSelect();
                }
            } else {
                // 這裡mMoveLen / Math.abs(mMoveLen)是為了保有mMoveLen的正負號,以實現上滾或下滾
                mMoveLen = mMoveLen - mMoveLen / Math.abs(mMoveLen) * SPEED;
            }
            invalidate();
        }

    };

    public WheelView(Context context) {
        super(context);
        init(context);
    }

    public WheelView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public void setOnSelectListener(SelectListener listener) {
        mSelectListener = listener;
    }

    public void setWheelStyle(int style) {
        itemList = WheelStyle.getItemList(context, style);
        if (itemList != null) {
            itemCount = itemList.size();
            resetCurrentSelect();
            invalidate();
        } else {
            Log.i(TAG, "item is null");
        }
    }

    public void setWheelItemList(List itemList) {
        this.itemList = itemList;
        if (itemList != null) {
            itemCount = itemList.size();
            resetCurrentSelect();
        } else {
            Log.i(TAG, "item is null");
        }
    }

    private void resetCurrentSelect() {
        if (currentItem < 0) {
            currentItem = 0;
        }
        while (currentItem >= itemCount) {
            currentItem--;
        }
        if (currentItem >= 0 && currentItem < itemCount) {
            invalidate();
        } else {
            Log.i(TAG, "current item is invalid");
        }
    }

    public int getItemCount() {
        return itemCount;
    }
    /**
     * 選擇選中的item的index
     * author LH
     * data 2016/9/4 11:09
     */
    public void setCurrentItem(int selected) {
        currentItem = selected;
        resetCurrentSelect();
    }

    public int getCurrentItem() {
        return currentItem;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int mViewHeight = getMeasuredHeight();
        int mViewWidth = getMeasuredWidth();
        centerX = (float) (mViewWidth / 2.0);
        centerY = (float) (mViewHeight / 2.0);

        isInit = true;
        invalidate();
    }


    private void init(Context context) {
        this.context = context;

        timer = new Timer();
        itemList = new ArrayList<>();

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Style.FILL);
        mPaint.setTextAlign(Align.CENTER);
        mPaint.setColor(getResources().getColor(R.color.wheel_unselect_text));
        int size1 = (int) (SupportDisplay.getLayoutScale()*22+0.5);
        mPaint.setTextSize(size1);

        selectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        selectPaint.setStyle(Style.FILL);
        selectPaint.setTextAlign(Align.CENTER);
        selectPaint.setColor(getResources().getColor(R.color.color_1a1a1a));
        int size2 = (int) (SupportDisplay.getLayoutScale()*24+0.5);
        selectPaint.setTextSize(size2);

        centerLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        centerLinePaint.setStyle(Style.FILL);
        centerLinePaint.setTextAlign(Align.CENTER);
        centerLinePaint.setColor(getResources().getColor(R.color.wheel_unselect_text));

        // 繪制背景
        setBackground(null);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (isInit) {
            drawData(canvas);
        }
    }

    private void drawData(Canvas canvas) {
        // 先繪制選中的text再往上往下繪制其余的text
        if (!itemList.isEmpty()) {
            // 繪制中間data
            drawCenterText(canvas);
            // 繪制上方data
            for (int i = 1; i < SHOW_SIZE + 1; i++) {
                drawOtherText(canvas, i, -1);
            }
            // 繪制下方data
            for (int i = 1; i < SHOW_SIZE + 1; i++) {
                drawOtherText(canvas, i, 1);
            }
        }
    }

    private void drawCenterText(Canvas canvas) {
        // text居中繪制,注意baseline的計算才能達到居中,y值是text中心坐標
        float y = centerY + mMoveLen;
        FontMetricsInt fmi = selectPaint.getFontMetricsInt();
        float baseline = (float) (y - (fmi.bottom / 2.0 + fmi.top / 2.0));
        canvas.drawText(itemList.get(currentItem), centerX, baseline, selectPaint);
    }

    /**
     * 繪制文本
     * author LH
     * data 2016/9/4 11:10
     * @param canvas   畫布
     * @param position 距離mCurrentSelected的差值
     * @param type     1表示向下繪制,-1表示向上繪制
     */
    private void drawOtherText(Canvas canvas, int position, int type) {
        int index = currentItem + type * position;
        if (index >= itemCount) {
            index = index - itemCount;
        }
        if (index < 0) {
            index = index + itemCount;
        }
        String text = itemList.get(index);

        int itemHeight = getHeight() / (SHOW_SIZE * 2 + 1);
        float d = itemHeight * position + type * mMoveLen;
        float y = centerY + type * d;

        FontMetricsInt fmi = mPaint.getFontMetricsInt();
        float baseline = (float) (y - (fmi.bottom / 2.0 + fmi.top / 2.0));
        canvas.drawText(text, centerX, baseline, mPaint);
    }

    @Override
    public void setBackground(Drawable background) {
        background = new Drawable() {
            @Override
            public void draw(Canvas canvas) {
                itemHeight = getHeight() / (SHOW_SIZE * 2 + 1);
                int width = getWidth();

                canvas.drawLine(0, itemHeight, width, itemHeight, centerLinePaint);
                canvas.drawLine(0, itemHeight * 2, width, itemHeight * 2, centerLinePaint);

                centerLinePaint.setColor(getResources().getColor(R.color.wheel_bg));
                Rect topRect = new Rect(0, 0, width, itemHeight);
                canvas.drawRect(topRect, centerLinePaint);
                Rect bottomRect = new Rect(0, itemHeight * 2, width, itemHeight * 3);
                canvas.drawRect(bottomRect, centerLinePaint);
            }

            @Override
            public void setAlpha(int alpha) {

            }

            @Override
            public void setColorFilter(ColorFilter cf) {

            }

            @Override
            public int getOpacity() {
                return 0;
            }
        };
        super.setBackground(background);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getActionMasked()) {
            case MotionEvent.ACTION_DOWN:
                doDown(event);
                break;
            case MotionEvent.ACTION_MOVE:
                doMove(event);
                break;
            case MotionEvent.ACTION_UP:
                doUp();
                break;
            default:
                break;
        }
        return true;
    }

    private void doDown(MotionEvent event) {
        if (mTask != null) {
            mTask.cancel();
            mTask = null;
        }
        mLastDownY = event.getY();
    }

    private void doMove(MotionEvent event) {

        mMoveLen += (event.getY() - mLastDownY);
        if (mMoveLen > itemHeight / 2) {
            // 往下滑超過離開距離
            mMoveLen = mMoveLen - itemHeight;
            currentItem--;
            if (currentItem < 0) {
                currentItem = itemCount - 1;
            }
        } else if (mMoveLen < -itemHeight / 2) {
            // 往上滑超過離開距離
            mMoveLen = mMoveLen + itemHeight;
            currentItem++;
            if (currentItem >= itemCount) {
                currentItem = 0;
            }
        }

        mLastDownY = event.getY();
        invalidate();
    }

    private void doUp() {
        // 抬起手後mCurrentSelected的位置由當前位置move到中間選中位置
        if (Math.abs(mMoveLen) < 0.0001) {
            mMoveLen = 0;
            return;
        }
        if (mTask != null) {
            mTask.cancel();
            mTask = null;
        }
        if (null == timer) {
            timer = new Timer();
        }
        mTask = new MyTimerTask(updateHandler);
        timer.schedule(mTask, 0, 10);
    }

    class MyTimerTask extends TimerTask {
        Handler handler;

        public MyTimerTask(Handler handler) {
            this.handler = handler;
        }

        @Override
        public void run() {
            handler.sendMessage(handler.obtainMessage());
        }

    }

    private void performSelect() {
        if (mSelectListener != null) {
            mSelectListener.onSelect(currentItem, itemList.get(currentItem));
        } else {
            Log.i(TAG, "null listener");
        }
    }

    public interface SelectListener {
        void onSelect(int index, String text);
    }

}
2.然後是時間選擇控件的樣式工具類

 

 

/**
 * 時間選擇樣式
 * author LH
 * data 2016/9/4 11:05
 */
public class WheelStyle {

    public static final int minYear = 1980;
    public static final int maxYear = 2020;

    /**
     * Wheel Style Hour
     */
    public static final int STYLE_HOUR = 1;
    /**
     * Wheel Style Minute
     */
    public static final int STYLE_MINUTE = 2;
    /**
     * Wheel Style Year
     */
    public static final int STYLE_YEAR = 3;
    /**
     * Wheel Style Month
     */
    public static final int STYLE_MONTH = 4;
    /**
     * Wheel Style Day
     */
    public static final int STYLE_DAY = 5;
    /**
     * Wheel Style Simple Day
     */
    public static final int STYLE_SIMPLE_DAY = 6;
    /**
     * Wheel Style Set Warn
     */
    public static final int STYLE_SET_WARN = 7;
    /**
     * Wheel Style Work Answer
     */
    public static final int STYLE_WORK_ANSWER = 8;

    private WheelStyle() {
    }

    public static List getItemList(Context context, int Style) {
        if (Style == STYLE_HOUR) {
            return createHourString();
        } else if (Style == STYLE_MINUTE) {
            return createMinuteString();
        } else if (Style == STYLE_YEAR) {
            return createYearString();
        } else if (Style == STYLE_MONTH) {
            return createMonthString();
        } else if (Style == STYLE_DAY) {
            return createDayString();
        } else if (Style == STYLE_SIMPLE_DAY) {
            return createSimpleDayString();
        } else if (Style == STYLE_SET_WARN) {
            return createSetWarnTimeString();
        } else {
            throw new IllegalArgumentException("style is illegal");
        }
    }

    private static List createHourString() {
        List wheelString = new ArrayList<>();
        for (int i = 0; i < 24; i++) {
            wheelString.add(String.format("%02d" + "時", i));
        }
        return wheelString;
    }

    private static List createMinuteString() {
        List wheelString = new ArrayList<>();
        for (int i = 0; i < 60; i++) {
            wheelString.add(String.format("%02d" + "分", i));
        }
        return wheelString;
    }

    private static List createYearString() {
        List wheelString = new ArrayList<>();
        for (int i = minYear; i <= maxYear; i++) {
            wheelString.add(Integer.toString(i));
        }
        return wheelString;
    }

    private static List createMonthString() {
        List wheelString = new ArrayList<>();
        for (int i = 1; i <= 12; i++) {
            wheelString.add(String.format("%02d" + "月", i));
        }
        return wheelString;
    }

    private static List createDayString() {
        List wheelString = new ArrayList<>();
        for (int i = 1; i <= 31; i++) {
            wheelString.add(String.format("%02d" + "日", i));
        }
        return wheelString;
    }

    private static List createSimpleDayString() {
        List wheelString = new ArrayList<>();
        wheelString.add("一天後");
        wheelString.add("兩天後");
        wheelString.add("三天後");
        return wheelString;
    }

    private static List createSetWarnTimeString() {
        List wheelString = new ArrayList<>();
        wheelString.add("30分鐘");
        wheelString.add("60分鐘");
        wheelString.add("90分鐘");
        wheelString.add("120分鐘");
        return wheelString;
    }
    /**
     * 計算閏月
     *
     * @param month
     * @return
     */
    private static boolean isLeapMonth(int month) {
        return month == 1 || month == 3 || month == 5 || month == 7
                || month == 8 || month == 10 || month == 12;
    }

    /**
     * 計算閏年
     *
     * @param year
     * @return
     */
    private static boolean isLeapYear(int year) {
        return (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
    }
}
3.使用的xml
4.在Java文件中設置mWheelView.setWheelStyle(WheelStyle.STYLE_YEAR);就可以顯示WheelStyle類中設置的類型了。這個類中的樣式種類讀者可以根據自己的需要自行添加。

5.獲取當前選擇的項也很簡單mWheelView.getCurrentItem();就能獲取到控件的當前選擇的項。獲取到所在的項以後剩下的就是邏輯操作了。

  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved