元宵佳節,希望大家開開心心,新的一年更加順順利利!!!
不多說,首先來一個效果看看:
show.gif
使用場景
公司要求做個視頻回放的東西,在一天24小時內,根據刻度時間去定位具體的位置.當然了上面的效果可以用到很多其他地方!!
自定義步驟
基礎性的東西就不說了,直接貼上代碼,沒什么好講的,都是簡單的一些東西!!
public class TimeRule extends View implements View.OnTouchListener {
//最大刻度的長度
private int mMaxScaleHeight;
//中間刻度的長度
private int mMiddleScaleHeight;
//最短刻度的長度
private int mMinScaleHeight;
//最大刻度的高度占控件的高度比例
public float mMaxScaleHeightRatio = 0.4f;
//中間刻度的高度占控件的高度比例
public float mMidScaleHeightRatio = 0.2f;
//最小刻度的高度占控件的高度比例
public float mMinScaleHeightRatio = 0.1f;
private Paint mTopBotLinePaint;
private int windowWidth;
private int windowHeight;
private int viewWidth;
private int viewHeight;
private int mBottomTopLineWidth = 5;
private int mSaleMaxWidth = 2;
private int mSaleMidWidth = 2;
private int mSaleMinWidth = 2;
private Paint mScaleMaxPaint;
private Paint mScaleMidPaint;
private Paint mScaleMinPaint;
//每一個刻度之間的間隔距離
private float itemWidth;
private Paint mTextPaint;
private GestureDetector gestureDetector;
//當前時間值
private int currentM;
//將控件的寬度分為2個小時
private int pcsM;
private boolean isFling = false;
private Paint mMidLinePaint;
public TimeRule(Context context) {
this(context, null);
}
public TimeRule(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public TimeRule(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
Resources resources = this.getResources();
DisplayMetrics dm = resources.getDisplayMetrics();
float density = dm.density;
windowWidth = dm.widthPixels;
windowHeight = dm.heightPixels;
mTopBotLinePaint = new Paint();
mTopBotLinePaint.setColor(Color.RED);
mTopBotLinePaint.setStyle(Paint.Style.FILL_AND_STROKE);
mTopBotLinePaint.setStrokeWidth(mBottomTopLineWidth);
mScaleMaxPaint = new Paint();
mScaleMaxPaint.setColor(getResources().getColor(R.color.colorPrimary));
mScaleMaxPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mScaleMaxPaint.setStrokeWidth(mSaleMaxWidth);
mScaleMidPaint = new Paint();
mScaleMidPaint.setColor(Color.MAGENTA);
mScaleMidPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mScaleMidPaint.setStrokeWidth(mSaleMidWidth);
mMidLinePaint = new Paint();
mMidLinePaint.setColor(Color.CYAN);
mMidLinePaint.setStyle(Paint.Style.FILL_AND_STROKE);
mMidLinePaint.setStrokeWidth(mSaleMidWidth);
mTextPaint = new Paint();
mTextPaint.setColor(Color.WHITE);
mTextPaint.setStyle(Paint.Style.FILL);
mTextPaint.setTextSize(30);
Calendar calendar = Calendar.getInstance();
//當前的小時
int h = calendar.get(Calendar.HOUR_OF_DAY);
//當前的分鐘
int m = calendar.get(Calendar.MINUTE);
currentM = h * 60 + m;
gestureDetector = new GestureDetector(new GestureListener());
setOnTouchListener(this);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = measureWidth(widthMeasureSpec);
int height = measureHeight(heightMeasureSpec);
setMeasuredDimension(width, height);
}
private int measureWidth(int widthMeasureSpec) {
int resultWide = windowWidth;
int widSize = MeasureSpec.getSize(widthMeasureSpec);
int widMode = MeasureSpec.getMode(widthMeasureSpec);
if (widMode == MeasureSpec.EXACTLY) {
resultWide = widSize;
} else if (widMode == MeasureSpec.AT_MOST) {
resultWide = windowWidth;
}
return resultWide;
}
private int measureHeight(int heightMeasureSpec) {
int resultHeight = 200;
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
if (heightMode == MeasureSpec.EXACTLY) {
resultHeight = heightSize;
} else if (heightMode == MeasureSpec.AT_MOST) {
resultHeight = 200;
}
return resultHeight;
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
if (w == 0 || h == 0) {
return;
}
viewWidth = w;
viewHeight = h;
//這個地方已經寫死了,意思是在一個寬度顯示兩個小時
itemWidth = (float) viewWidth / (60 * 2);
mMaxScaleHeight = (int) (h * mMaxScaleHeightRatio);
mMiddleScaleHeight = (int) (h * mMidScaleHeightRatio);
mMinScaleHeight = (int) (h * mMinScaleHeightRatio);
pcsM = viewWidth / 60 * 2;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawScaleLine(canvas);
drawTopBottomLine(canvas);
drawMiddleLine(canvas);
}
private void drawScaleLine(Canvas canvas) {
canvas.drawColor(Color.BLACK);
int offest = 0;
//這個是要畫出2個小時,超出部分不再畫出,所以,一進一出就是2小時
for (int i = currentM - 60; i < currentM + 60; i++) {
//累計X軸的平移
offest += itemWidth;
//如果超出范圍的刻度不需要畫
if (i < 0 || i > 24 * 60) {
continue;
}
if (i % 60 == 0) {
//畫小時
canvas.drawLine(offest, 0, offest, mMaxScaleHeight, mScaleMaxPaint);
canvas.drawLine(offest, viewHeight - 30, offest, viewHeight - 30 - mMaxScaleHeight, mScaleMaxPaint);
int hour = i / 60;
canvas.drawText(hour + "", offest, viewHeight, mTextPaint);
} else {
//畫分
canvas.drawLine(offest, 0, offest, mMiddleScaleHeight, mScaleMidPaint);
canvas.drawLine(offest, viewHeight - 30, offest, viewHeight - 30 - mMiddleScaleHeight, mScaleMidPaint);
}
}
}
//畫底部線和頂部線
private void drawTopBottomLine(Canvas canvas) {
canvas.drawLine(0, 0 + 3, windowWidth, 0 + 3, mTopBotLinePaint);
canvas.drawLine(0, viewHeight - 30, windowWidth, viewHeight - 30, mTopBotLinePaint);
}
//畫中間的那個條線
private void drawMiddleLine(Canvas canvas) {
String minuteStr;
canvas.drawLine(viewWidth / 2 + itemWidth, 3, viewWidth / 2 + itemWidth, viewHeight, mMidLinePaint);
int minute = currentM % 60;
if (minute < 10) {
minuteStr = "0" + minute;
} else {
minuteStr = minute + "";
}
int hour = currentM / 60;
canvas.drawText(hour + ":" + minuteStr, windowWidth / 2, viewHeight/2, mTextPaint);
}
@Override
public boolean onTouch(View v, MotionEvent event) {
return gestureDetector.onTouchEvent(event);
}
private class GestureListener implements GestureDetector.OnGestureListener {
private AutoFlingRunable autoFlingRunable;
@Override
public boolean onDown(MotionEvent e) {
if (isFling) {
removeCallbacks(autoFlingRunable);
}
return true;
}
@Override
public void onShowPress(MotionEvent e) {
}
@Override
public boolean onSingleTapUp(MotionEvent e) {
return false;
}
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
if (Math.abs(distanceX) > pcsM) {
currentM += distanceX / pcsM;
} else if (Math.abs(distanceX) > 2) {
if (distanceX > 0) {
currentM += 1;
} else {
currentM -= 1;
}
}
if (checkTime()) {
invalidate();
}
return false;
}
@Override
public void onLongPress(MotionEvent e) {
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
if (Math.abs(velocityX) > 1000) {
isFling = true;
//滑翔的時候.一步步停下來,利用runable來控制!
autoFlingRunable = new AutoFlingRunable(velocityX);
post(autoFlingRunable);
}
return false;
}
}
private class AutoFlingRunable implements Runnable {
private float velocityX;
public AutoFlingRunable(float velocityX) {
this.velocityX = velocityX;
}
@Override
public void run() {
if (velocityX > 0) {
currentM -= (velocityX / 500);
} else {
currentM -= (velocityX / 500);
}
velocityX /= 1.0666F;
if (checkTime()) {
postDelayed(this, 30);
invalidate();
}
}
}
//檢查是否是超出時間范圍(0-24)
private boolean checkTime() {
if (currentM <= 0) {
currentM = 0;
invalidate();
return false;
}
if (currentM >= 24 * 60) {
currentM = 24 * 60;
invalidate();
return false;
}
return true;
}
}
后期
已經貼出全部代碼,后期準備做個控制顯示秒或者分的,同時可以這個控件!為了過元宵就提前這樣貼代碼了!!都是一些輪子!!
