目的

完成畫板demo的前期步驟

相關(guān)技術(shù)、及其使用

xml配置文件：創(chuàng)建SeekBar比較簡(jiǎn)單，但是不足之處在于當(dāng)實(shí)現(xiàn)橫屏的時(shí)候就比較麻煩

代碼創(chuàng)建：代碼創(chuàng)建SeekBar比較簡(jiǎn)單，能夠很好地實(shí)現(xiàn)橫豎屏切換。

2、創(chuàng)建Slider類繼承于View

初始化線條，小圓點(diǎn)，進(jìn)度條的畫筆：

private void init(){

// 線條

linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);

linePaint.setColor(lineColor);

linePaint.setStrokeWidth(lineSize);

//小圓點(diǎn)

circlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);

circlePaint.setColor(thumbColor);

circlePaint.setStyle(Paint.Style.FILL);

// 進(jìn)度條

progressPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

progressPaint.setColor(progressColor);

progressPaint.setStrokeWidth(lineSize);

}

3、調(diào)用onDraw 方法進(jìn)行橫豎屏的畫圖

protected void onDraw(Canvas canvas) {

//canvas 畫布

if(getWidth() > getHeight()){

//橫著

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

if(position > 0){

//畫進(jìn)度條背景

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;

//確定中點(diǎn)cy的值

if(position < radius){

cy = radius;

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

cy = getHeight() - radius;

}else {

cy = (int)position;

}

}

//畫小圓點(diǎn)

if(style == SLIDER){

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

}

}

4、通過onTouchEvent方法來實(shí)現(xiàn)進(jìn)度條隨著觸摸位置的改變：

public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()){

case MotionEvent.ACTION_DOWN:

//小圓點(diǎn)放大

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:

//橫豎兩種情況

//獲取當(dāng)前觸摸點(diǎn)的值 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、寫一個(gè)獲取進(jìn)度值的方法callback()：

private void callBake(){

if(onSliderChangeListener != null){

if(getWidth() > getHeight()){

progress = position / getWidth();

}else {

progress = position / getHeight();

}

onSliderChangeListener.progressChanged(progress*max);

}

}

6、定義接口和監(jiān)聽器來監(jiān)聽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

今天畫板的前期布局主要是進(jìn)度條的代碼設(shè)置，進(jìn)一步的學(xué)習(xí)了通過代碼畫圖Paint。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。