6

Мне нужно обозначить прогресс на границе взгляда. . Первоначально просмотр не будет иметь никакой границы вообще, когда достигнут 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; 
} 

}

+2

см. Мой ответ здесь http://stackoverflow.com/questions/19710613/how-do-draw-a-partial-bitmap-arc-like-a-circular-progress-wheel-but-with-ab – pskink

+0

Я просмотрел ваш код, но не понял, какие изменения нужно сделать, чтобы он работал должным образом. –

+0

подумайте, теперь у вас есть решение, как скопировать один битмао в радиальном направлении, что дальше? – pskink

ответ

2

попробовать 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; 
    } 
} 
+0

Я не пробовал этот код ... но я думаю, что это будет рисовать овал вокруг view.right? –

+0

Предполагается, что ваше растровое изображение будет отображаться овальным образом. –

+0

Я не хочу раскрывать изображение, я хочу рисовать границу вокруг него. –

1

Получение хороший круговой прогресс кок трудно само по себе. ProgressWheel является хорошим обычным View, который делает это. Вы должны иметь возможность изменить класс onDraw() ProgressWheel, чтобы сделать что-то очень похожее на то, что вы хотите.

2

check this link и измените вещи согласно вашему требованию. Это довольно хороший пример, соответствующий вашим требованиям.

Смежные вопросы