用邊框表示進度Android

我需要用視圖的邊界表示進度。例如最初視圖根本沒有任何邊框，當達到50％的進度時，只有50％的視圖會出現邊框。找到附加的圖像。我做了很多谷歌搜索，但沒有運氣。我使用的視圖是textview。用邊框表示進度Android

enter image description here

編輯

下面的代碼，位圖切割的邊緣。我在這段代碼中做了什麼 - 1. Bg設置爲黑色六角形 2.我已經採取了空心綠色有邊六角形&，揭示了這個空心六邊形，使它看起來像邊框正在積累。

public class MyView extends View { 

private Bitmap mBitmap; 
private Paint mPaint; 
private RectF mOval; 
private float mAngle = 135; 
private Paint mTextPaint; 
private Bitmap bgBitmap; 

public MyView(Context context) { 
    super(context); 
    doInit(); 
} 


/** 
* @param context 
* @param attrs 
* @param defStyleAttr 
*/ 
public MyView(Context context, AttributeSet attrs, int defStyleAttr) { 
    super(context, attrs, defStyleAttr); 
    // TODO Auto-generated constructor stub 
    doInit(); 
} 


/** 
* @param context 
* @param attrs 
*/ 
public MyView(Context context, AttributeSet attrs) { 
    super(context, attrs); 
    // TODO Auto-generated constructor stub 
    doInit(); 
} 

private void doInit() { 
    // use your bitmap insted of R.drawable.ic_launcher 
    mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.hexagon_border); 
    bgBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.view_message_small_hexagon); 
    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
    mOval = new RectF(); 
    mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
    mTextPaint.setTextSize(48); 
    mTextPaint.setTextAlign(Align.CENTER); 
    mTextPaint.setColor(0xffffaa00); 
    mTextPaint.setTypeface(Typeface.DEFAULT_BOLD); 
} 

@Override 
protected void onSizeChanged(int w, int h, int oldw, int oldh) { 
    Matrix m = new Matrix(); 
    RectF src = new RectF(0, 0, mBitmap.getWidth(), mBitmap.getHeight()); 
    RectF dst = new RectF(0, 0, w, h); 
    m.setRectToRect(src, dst, ScaleToFit.CENTER); 
    Shader shader = new BitmapShader(mBitmap, TileMode.CLAMP, TileMode.CLAMP); 
    shader.setLocalMatrix(m); 
    mPaint.setShader(shader); 
    m.mapRect(mOval, src); 
} 

@Override 
protected void onDraw(Canvas canvas) { 
    //canvas.drawColor(0xff0000aa); 
    Matrix matrix = new Matrix(); 
    canvas.drawBitmap(bgBitmap, matrix, null); 
    canvas.drawArc(mOval, -90, mAngle, true, mPaint); 
} 

@Override 
public boolean onTouchEvent(MotionEvent event) { 
    float w2 = getWidth()/2f; 
    float h2 = getHeight()/2f; 
    mAngle = (float) Math.toDegrees(Math.atan2(event.getY() - h2, event.getX() - w2)); 
    mAngle += 90 + 360; 
    mAngle %= 360; 
    invalidate(); 
    return true; 
}

}

來源

2014-01-13 Vishal Pawale

在這裏看到我的答案http://stackoverflow.com/questions/19710613/how-do-i-draw-a-partial-bitmap-arc-like-a-circular-progress-wheel-but-with-ab – pskink

我已經通過你的代碼，但不明白應該做什麼改變，使其按預期工作。 –

想了一會兒，現在你有解決方案如何以徑向方式裁剪一個bitmao，接下來是什麼？ – pskink

嘗試this SO answer：

public class MyView extends View { 

    private Bitmap mBitmap; 
    private Paint mPaint; 
    private RectF mOval; 
    private float mAngle = 135; 
    private Paint mTextPaint; 

    public MyView(Context context) { 
     super(context); 
     // use your bitmap insted of R.drawable.ic_launcher 
     mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher); 
     mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
     mOval = new RectF(); 
     mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
     mTextPaint.setTextSize(48); 
     mTextPaint.setTextAlign(Align.CENTER); 
     mTextPaint.setColor(0xffffaa00); 
     mTextPaint.setTypeface(Typeface.DEFAULT_BOLD); 
    } 

    @Override 
    protected void onSizeChanged(int w, int h, int oldw, int oldh) { 
     Matrix m = new Matrix(); 
     RectF src = new RectF(0, 0, mBitmap.getWidth(), mBitmap.getHeight()); 
     RectF dst = new RectF(0, 0, w, h); 
     m.setRectToRect(src, dst, ScaleToFit.CENTER); 
     Shader shader = new BitmapShader(mBitmap, TileMode.CLAMP, TileMode.CLAMP); 
     shader.setLocalMatrix(m); 
     mPaint.setShader(shader); 
     m.mapRect(mOval, src); 
    } 

    @Override 
    protected void onDraw(Canvas canvas) { 
     canvas.drawColor(0xff0000aa); 
     canvas.drawArc(mOval, -90, mAngle, true, mPaint); 
     canvas.drawText("click me", getWidth()/2, getHeight()/2, mTextPaint); 
    } 

    @Override 
    public boolean onTouchEvent(MotionEvent event) { 
     float w2 = getWidth()/2f; 
     float h2 = getHeight()/2f; 
     mAngle = (float) Math.toDegrees(Math.atan2(event.getY() - h2, event.getX() - w2)); 
     mAngle += 90 + 360; 
     mAngle %= 360; 
     invalidate(); 
     return true; 
    } 
}

來源

2014-01-13 19:59:20

我沒有嘗試過這個代碼......但我認爲這會在view.view中繪製橢圓。 –

它應該以橢圓形方式顯示您的位圖。 –

我不想透露圖像，我想繪製它的邊框。 –

獲得一個良好的圓進步微調本身是困難的。 ProgressWheel是一個很好的定製View這是做到這一點。你應該可以修改ProgressWheel的onDraw（）類來做一些非常相似的事情。

來源

2014-01-25 19:29:13

check this link並根據您的要求更改內容。這是一個非常好的示例，可以滿足您的要求。

來源

2014-01-27 09:24:42 sachin10

用邊框表示進度Android

回答

相關問題