目的

完成畫板demo的前期步驟

相關技術、及其使用

xml配置文件：創建SeekBar比較簡單，但是不足之處在于當實現橫屏的時候就比較麻煩

代碼創建：代碼創建SeekBar比較簡單，能夠很好地實現橫豎屏切換。

2、創建Slider類繼承于View

初始化線條，小圓點，進度條的畫筆：

private void init(){

// 線條

linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);

linePaint.setColor(lineColor);

linePaint.setStrokeWidth(lineSize);

//小圓點

circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);

circlePaint.setColor(thumbColor);

circlePaint.setStyle(Paint.Style.FILL);

// 進度條

progressPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

progressPaint.setColor(progressColor);

progressPaint.setStrokeWidth(lineSize);

}

3、調用onDraw 方法進行橫豎屏的畫圖

protected void onDraw(Canvas canvas) {

//canvas 畫布

if(getWidth() > getHeight()){

//橫著

canvas.drawLine(0,getHeight()/2,getWidth(),getHeight()/2,linePaint);

if(position > 0){

//畫進度條背景

canvas.drawLine(0,getHeight()/2,getWidth(),getHeight()/2,progressPaint);

}

cy = getHeight()/2 ;

radius = getHeight()/thumbScale;

//確定cx的值

if(position < radius){

cx = radius;

}else if(position > getWidth()- radius){

cx = getWidth() - radius;

}else {

cx = (int)position;

}

}else {

//豎著

canvas.drawLine(getWidth()/2,0,getWidth()/2,getHeight(),linePaint);

if(position>0){

canvas.drawLine(getWidth()/2,0,getWidth()/2,position,progressPaint);

}

cx = getWidth()/2;

radius = getWidth()/thumbScale;

//確定中點cy的值

if(position < radius){

cy = radius;

}else if(position > getHeight() - radius){

cy = getHeight() - radius;

}else {

cy = (int)position;

}

}

//畫小圓點

if(style == SLIDER){

canvas.drawCircle(cx,cy,radius,circlePaint);

}

}

4、通過onTouchEvent方法來實現進度條隨著觸摸位置的改變：

public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()){

case MotionEvent.ACTION_DOWN:

//小圓點放大

thumbScale = 2;

if(getWidth() > getHeight()){

//橫著 getWidth 表示得到LinearLayout的大小 y不變 x 改變

position = event.getX();

}else {

//豎著 x 不變 y 改變

position = event.getY();

if(position < 0){

position=0;

}else if(position > getHeight()){

position = getHeight();

}

}

callBake();

break;

case MotionEvent.ACTION_MOVE:

//橫豎兩種情況

//獲取當前觸摸點的值 x y

if(getWidth() > getHeight()){

//橫著 getWidth 表示得到LinearLayout的大小 y不變 x 改變

position = event.getX();

}else {

//豎著 x 不變 y 改變

position = event.getY();

if(position < 0){

position=0;

}else if(position > getHeight()){

position = getHeight();

}

}

callBake();

break;

case MotionEvent.ACTION_UP:

thumbScale = 4;

break;

}

if(style == SLIDER){

//重新繪制

invalidate();

}

return true;

}

5、寫一個獲取進度值的方法callback()：

private void callBake(){

if(onSliderChangeListener != null){

if(getWidth() > getHeight()){

progress = position / getWidth();

}else {

progress = position / getHeight();

}

onSliderChangeListener.progressChanged(progress*max);

}

}

6、定義接口和監聽器來監聽Slider改變值：

public void setMax(int max) {

this.max = max;

}

public interface OnSliderChangeListener{

void progressChanged(float progress);

}

public void setOnSliderChangeListener(OnSliderChangeListener onSliderChangeListener) {

this.onSliderChangeListener = onSliderChangeListener;

}

PS

今天畫板的前期布局主要是進度條的代碼設置，進一步的學習了通過代碼畫圖Paint。

總結

以上是生活随笔為你收集整理的android画布demo,Android开发画板demo前奏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。