12

Catch Notes App
Circle Android Menu Ti piace Cattura Note

che cerco di fare menù cerchio come in questa applicazione.

In modalità "esteso" i disegnare questo componente come segue:

<RelativeLayout android:id="@+id/bigCircle"> 
<!--color full borders--> 
    <my.custom.component android:id="@+id/middleCircle"> 
    <!--circle for buttons--> 
     <RelativeLayout android:id="@+id/smallCircle"> 
      <!--minus button--> 
     </RelativeLayout> 
    </my.custom.component> 
</RelativeLayout> 

In OnDraw metodo my.custom.component i dividere cerchio su 8 parti usando android.graphics.Path con android.graphics.Paint e alcuni matematica.
Visivamente ho esattamente come mostrato nello screenshot. Ma quando premo su una parte del cerchio, ho bisogno di ridisegnare questa parte in un altro colore per mostrare all'utente cosa sta succedendo.

Come posso ridisegnare parte della tela del componente tagliando da un'altra parte di tela per android.graphics.Path ad esempio.
In un'altra parola so cosa ridisegno la tela dovrei fare nel metodo onDraw, so che posso mostrare alcuni bitmap da drawable dipinti in Photoshop e avere qualche "problema multischermo", so come posso determinare la parte che l'utente ha premuto. Ma non so come posso selezionare parte della tela e ridisegnarla.

risposta

20

Sviluppatore di Catch qui. Se capisco il tuo problema, hai difficoltà a capire come disegnare in modo specifico l'indicatore di evidenziazione/selezione su una sezione del tuo menu circolare.

Mentre ci sono molti modi diversi per implementarlo, quello a cui ci si sta appoggiando (usando android.graphics.Path) è come l'abbiamo fatto. Nella gerarchia della vista del nostro pulsante di acquisizione, viene disegnato un elemento che funge da area di disegno su cui viene evidenziato il colore di evidenziazione della selezione (se c'è è una selezione attiva).

Se si dispone di un'analoga personalizzazione View nel proprio layout, è possibile duplicare questo comportamento in questo modo. Innanzitutto, è necessario lo Path che definisce la selezione per un particolare segmento di cerchio. Usando Path.addArc(RectF, float, float) si può ottenere il percorso ad pizza slice occorre:

private Path getPathForSegment(float startAngle, float sweep) { 
    Point center = new Point(getWidth()/2, getHeight()/2); 
    RectF rect = new RectF(0f, 0f, getWidth(), getHeight()); 
    Path selection = new Path(); 
    selection.addArc(rect, startAngle, sweep); 
    selection.lineTo(center.x, center.y); 
    selection.close(); 
    return selection; 
} 

Il getWidth() e getHeight() sopra sono per l'oggetto visualizzazione personalizzata racchiude, in modo da definire il riquadro contenente il cerchio su cui la selezione è disegnato.

Poi, nella vostra abitudine vista di onDraw(Canvas), se il codice ha determinato una selezione dovrebbe essere disegnato per un segmento:

@Override 
protected void onDraw(Canvas canvas) { 
    // Assume one has the rest of these simple helper functions defined 
    if (shouldDrawSelection()) { 
     float startAngle = getStartAngleOfSelectedSegment(); 
     float sweep = getSweepAngle(); 
     Paint paint = getPaintStyleForSelectedSegment(); 
     Path path = getPathForSegment(startAngle, sweep); 
     canvas.drawPath(path, paint); 
    } 

    // ... 

    super.onDraw(canvas); 
} 

Nelle altre zone del vostro codice che stanno monitorando la tocchi, basta chiamare invalidate() sulla visualizzazione personalizzata in modo che possa ridisegnare (o meno) il percorso di selezione in base alle modifiche in ingresso o stato.

ricordiamo che è buona norma evitare new oggetti ING onDraw(), quindi la maggior parte di questi blocchi (Path s, Paint s, etc.) possono essere costruite in anticipo (o una volta, sulla prima occorrenza) e riutilizzati.

Spero che questo sia vicino a quello che stavi chiedendo!

+3

Ora sono tornato per indagare su questa domanda. Non mi aspettavo nemmeno una risposta, grazie mille per lo sviluppatore di Catch. Hai fatto un'app molto bella. – Mrusful

+1

+1 per il supporto della comunità Android.Adoro la tua app, a proposito. – cgTag