github上已經有如此多漂亮的progressbar,可還是滿足不了美工MM的胃口,無奈只得根據美工的需求,自定義一個符合要求的progrssbar了,美工給的效果圖如下:
好看是好看,還要求上面指示器的顏色隨着進度去改變,上網找了一番還真沒有發現完全符合要求的,只好自己想辦法了。
思路:1.肯定的繼承View或者progressbar去重寫,由於我對progressbar的源碼不太熟悉,就繼承View開始自定義。繼承progressbar一定可以更加輕鬆的實現,應爲基本只需重寫onDraw()方法即可。
2.就是重寫 View的onDraw(), onMeasure(),onDetachedFromWindow(),onTouchEvent() 等若干方法。
思路就這麼點,下面先看最終效果:
模擬器中的圓角度數有點太園了,用的時候可以調整下。
源碼如下:
package com.example.demo;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;
/**
* @author rzq
* @function 風險指數標示View
*
*/
public class IndiactorView extends View {
/**
* 公共部分
*/
private static final int MAX = 100;
private static final int ROUND_DEGREE = 8;
private static final int[] cursorColors = new int[] { R.color.color_7ea1de,
R.color.color_7aa7d6, R.color.color_73adcd, R.color.color_6cb4c4,
R.color.color_66bbba, R.color.color_63c6a8, R.color.color_63cd99,
R.color.color_6bce90, R.color.color_7dce8a, R.color.color_96cc84,
R.color.color_b2c97d, R.color.color_d3c477, R.color.color_e9be72,
R.color.color_fab76d, R.color.color_ffae68, R.color.color_ff9c60,
R.color.color_f87653, R.color.color_ff8a5a, R.color.color_f0674e,
R.color.color_e85548 };
private Context mContext;
private Resources res;
private Paint mPaint;
private DisplayMetrics dm;
/**
* resource
*/
private Bitmap bitmapProgress;
private Bitmap bitmapIndictor;
/**
* 進度條寬高,座標
*/
private float bitmapProgressWidth, bitmapProgressHeight;
private float bitmapProgressX, bitmapProgressY;
private float bitmapIndictorWidth, bitmapIndictorHeight;
/**
* 手機屏幕寬高
*/
private int screenHeight, screenWidth;
/**
* 指示矩形的寬高
*/
private int rectWidth;
private int rectHeight;
/**
* 風險指數內容
*/
private int cursorPosition = 0;
private float precent = 0;
private String drawText = "0/100";
public IndiactorView(Context context, AttributeSet attrs) {
super(context, attrs);
this.mContext = context;
this.res = getResources();
initView();
}
private void initView() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
dm = new DisplayMetrics();
WindowManager wm = (WindowManager) mContext
.getSystemService(Context.WINDOW_SERVICE);
wm.getDefaultDisplay().getMetrics(dm);
screenWidth = dm.widthPixels;
screenHeight = dm.heightPixels;
rectWidth = dip2px(47);
rectHeight = dip2px(25);
bitmapProgress = BitmapFactory.decodeResource(res,
R.drawable.icon_indictor);
bitmapIndictor = BitmapFactory.decodeResource(res, R.drawable.san_jiao);
bitmapProgressWidth = bitmapProgress.getWidth();
bitmapProgressHeight = bitmapProgress.getHeight();
bitmapIndictorWidth = bitmapIndictor.getWidth();
bitmapIndictorHeight = bitmapIndictor.getHeight();
bitmapProgressX = (screenWidth - bitmapProgressWidth) / 2;
bitmapProgressY = rectHeight + bitmapIndictorHeight;
}
/**
* 更新遊標位置
*
* @param position
*/
public void setPosition(int position) {
cursorPosition = position;
precent = (position * bitmapProgressWidth) / MAX;
drawText = new StringBuilder().append(position).append("/100")
.toString();
/**
* 還要根據position設置paint顏色
*/
int offset = position / 5;
if (offset == 20) {
offset = offset - 1;
}
mPaint.setColor(res.getColor(cursorColors[offset]));
invalidate();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int viewHeight = (int) (bitmapIndictorHeight + bitmapProgressHeight + rectHeight);
setMeasuredDimension((int) screenWidth, viewHeight);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
return super.onTouchEvent(event);
}
@Override
protected void onDraw(Canvas canvas) {
/**
* 遊標當前X座標
*/
float cursorX = (cursorPosition > 0) ? (bitmapProgressX + precent - bitmapIndictorWidth / 2)
: (bitmapProgressX + precent);
canvas.drawBitmap(bitmapProgress, bitmapProgressX, bitmapProgressY,
null);
canvas.drawBitmap(bitmapIndictor, cursorX, rectHeight, null);
/**
* 邊界判斷,防止超出屏幕
*/
if (cursorX + rectWidth >= screenWidth) {
cursorX = cursorX - rectWidth + bitmapIndictorWidth;
}
RectF rect = new RectF(cursorX, 0, cursorX + rectWidth, rectHeight - 1);
canvas.drawRoundRect(rect, ROUND_DEGREE, ROUND_DEGREE, mPaint);
mPaint.setColor(Color.WHITE);
mPaint.setTextSize(dip2px(11));
float cursorTextX = (rectWidth - mPaint.measureText(drawText)) / 2;
float cursorTextY = ((rectHeight / 2) - ((mPaint.descent() + mPaint
.ascent()) / 2));
canvas.drawText(drawText, cursorX + cursorTextX, cursorTextY, mPaint);
}
/**
* 釋放資源,竟可能少消耗內存
*/
@Override
protected void onDetachedFromWindow() {
mContext = null;
res = null;
mPaint = null;
dm = null;
bitmapIndictor = null;
bitmapProgress = null;
}
/**
* 根據手機的分辨率從 dp 的單位 轉成爲 px(像素)
*/
private int dip2px(float dpValue) {
return (int) (dpValue * dm.density + 0.5f);
}
}
View使用:
package com.example.demo;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
public class MainActivity extends Activity {
private IndiactorView indictorView;
private int i = 0;
private Handler handler = new Handler() {
public void handleMessage(Message msg) {
indictorView.setPosition(i++);
if (i <= 100) {
this.sendEmptyMessageDelayed(0x01, 500);
}
};
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
indictorView = (IndiactorView) findViewById(R.id.indictor_view);
indictorView.setPosition(i);
handler.sendEmptyMessageDelayed(0x01, 500);
}
}
註釋的已經很詳細了,就不在囉嗦的解釋代碼了,源碼及如何使用DEMO會在最後給出。
擴展:對指示器添加觸摸事件處理,可以將此progressbar擴站位一個帶指示器的SeekBar,待後續完成後給出。有興趣的也可以自行擴展。