Wypełnij dwie nakładki graficzne, takie jak pasek wyszukiwania na zdarzeniu dotykowym widoku obrazu.

Question

Istnieją dwa obrazy: czarny i niebieski, podczas gdy dotykając niebieskiego obrazu, powinien on wypełniać się jak postęp. Osiągnąłem używając wielu cięć obrazów bez użycia płótna, ale nie dostaję przy dotykaniu smoothness, jak 100 Pushups application.

Właściwie staram się osiągnąć podobne jak 100 aplikacji Pushups, jak wspomnę powyżej, mam jeden link, ale to osiągnięto za pomocą płótna i chcę osiągnąć za pomocą obrazów, Google ale bez powodzenia, dowolny link lub samouczek podobny do tego wniosku (100 pompek)?

Answer 1

Oto coś, co wymyśliłem, używając ścieżki klipu. Używam następujących obrazów (kolorów koderów), z których tło jest stałe, a na pierwszym planie zawiera tylko niebieskie kółko na przezroczystym tle. Pierwszy obraz tła jest rysowany na ekranie, a następnie ścieżka klipu jest ustawiana tak, aby obraz postępu, pierwszy plan, był prawidłowo rysowany na wierzchu.

Obraz tła; http://i.imgur.com/Sf6kg.png
Obraz pierwszego planu; http://i.imgur.com/Svtoh.png

I kod;

private class ProgressView extends View { 

    private Bitmap bgBitmap; 
    private Bitmap fgBitmap; 
    private RectF fullRect = new RectF(); 
    private Path clipPath = new Path(); 

    public ProgressView(Context context) { 
     super(context); 
     bgBitmap = BitmapFactory.decodeResource(
            context.getResources(), R.drawable.bg); 
     fgBitmap = BitmapFactory.decodeResource(
            context.getResources(), R.drawable.fg); 
    } 

    @Override 
    public void onDraw(Canvas c) { 
     fullRect.right = getWidth(); 
     fullRect.bottom = getHeight(); 

     c.drawBitmap(bgBitmap, null, fullRect, null); 

     float angle = SystemClock.uptimeMillis() % 3600/10.0f; 

     clipPath.reset(); 
     clipPath.setLastPoint(getWidth()/2, getHeight()/2); 
     clipPath.lineTo(getWidth()/2, getHeight()); 
     clipPath.arcTo(fullRect, -90, angle); 
     clipPath.lineTo(getWidth()/2, getHeight()/2); 
     c.clipPath(clipPath); 

     c.drawBitmap(fgBitmap, null, fullRect, null); 

     invalidate(); 
    } 
} 

Nie powinno być zbyt trudno zastąpić moje tymczasowe obrazy przyzwoitymi i zaktualizować kąt w bardziej odpowiedni sposób.

Answer 2

To będzie widok niestandardowy, a zostanie on obsługę metody onTouchEvent() i przerysować, kiedy użytkownik dotyka widok.

Sposób onDraw() będzie sprawdzał coś takiego:

if(mIsBeingTouched){ 
    //set colour to touched 
} 
doDraw(canvas); 
///.... 

Więc kiedy użytkownik dotyka pogląd, chciałbym zwiększyć licznik, a następnie zwiększyć liczbę łuku.

final float arcDistance = mCurrentCount * 3.6; //Based on a max of 100 
canvas.drawArc(mBoundsRectF, 0f, mCurrentCount, mPaint); 

Następnie, który byłby oparty na liczbie.