국경 별 진행 상황을 표시합니다.

Question

경계선을 기준으로 진행 상황을 표시해야합니다. 예. 처음에는보기가 전혀 경계를 가지지 않을 것입니다. 50 % 진행에 도달하면보기의 50 % 만 경계를 얻습니다. 첨부 된 이미지를 찾습니다. 나는 많은 인터넷 검색을했지만 행운은 없었다. 내가 사용한 시각은 텍스트 뷰이다.

는

다음 코드를 편집 맵의 가장자리를 절단. 이 코드에서 수행 한 작업은 다음과 같습니다. - 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; 
} 

}

Answer 1

이 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; 
    } 
} 

Answer 2

그 자체가 어렵다. ProgressWheel은이 작업을 수행하는 올바른 사용자 지정 View입니다. ProgressWheel의 onDraw() 클래스를 수정하여 원하는 것과 매우 유사한 작업을 수행 할 수 있어야합니다.

Answer 3

check this link 귀하의 요구 사항에 따라 물건을 변경하십시오. 이것은 귀하의 요구 사항에 맞는 꽤 좋은 예입니다.