Visione circolare circolare selezionabile come Google+

Question

Come posso creare una circolare selezionabile ImageView come nell'app Google+ corrente utilizzata per le immagini del profilo?

Questo è ciò che mi riferisco a:

L'immagine sopra è selezionata e il sotto è selezionato.

cerco di replicare le immagini del profilo 1 a 1.

Il mio lavoro finora:

loadedImage è la Bitmap che viene visualizzato

mImageView.setBackground(createStateListDrawable()); 
mImageView.setImageBitmap(createRoundImage(loadedImage)); 

I metodi utilizzati:

private Bitmap createRoundImage(Bitmap loadedImage) { 
    Bitmap circleBitmap = Bitmap.createBitmap(loadedImage.getWidth(), loadedImage.getHeight(), Bitmap.Config.ARGB_8888); 

    BitmapShader shader = new BitmapShader(loadedImage, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); 
    Paint paint = new Paint(); 
    paint.setAntiAlias(true); 
    paint.setShader(shader); 

    Canvas c = new Canvas(circleBitmap); 
    c.drawCircle(loadedImage.getWidth()/2, loadedImage.getHeight()/2, loadedImage.getWidth()/2, paint); 

    return circleBitmap; 
} 

private StateListDrawable createStateListDrawable() { 
    StateListDrawable stateListDrawable = new StateListDrawable(); 

    OvalShape ovalShape = new OvalShape(); 
    ShapeDrawable shapeDrawable = new ShapeDrawable(ovalShape); 
    stateListDrawable.addState(new int[] { android.R.attr.state_pressed }, shapeDrawable); 
    stateListDrawable.addState(StateSet.WILD_CARD, shapeDrawable); 

    return stateListDrawable; 
} 

La dimensione di ImageView è imageSizePx e la dimensione dell'immagine è imageSizePx - 3. Quindi, ciò significa che lo sfondo dovrebbe sovrapporsi all'immagine. Che non funziona

Answer 1

Soluzione davvero semplice, grazie a @CommonsWare per i suggerimenti.

Dimensioni Bitmap: imageSizePx - 3DP
Dimensioni ImageView: imageSizePx

mImageView.setBackground(createStateListDrawable(imageSizePx)); 
mImageView.setImageBitmap(loadedImage); 

private StateListDrawable createStateListDrawable(int size) { 
    StateListDrawable stateListDrawable = new StateListDrawable(); 

    OvalShape ovalShape = new OvalShape(); 
    ovalShape.resize(size, size); 
    ShapeDrawable shapeDrawable = new ShapeDrawable(ovalShape); 
    shapeDrawable.getPaint().setColor(getResources().getColor(R.color.somecolor)); 

    stateListDrawable.addState(new int[]{android.R.attr.state_pressed}, shapeDrawable); 
    stateListDrawable.addState(new int[]{android.R.attr.state_focused}, shapeDrawable); 
    stateListDrawable.addState(new int[]{}, null); 

    return stateListDrawable; 
} 

Answer 2

È possibile creare una vista personalizzata che estende ImageView. Sostituisci onDraw per ritagliare la tela con una regione circolare e disegnare l'immagine sulla tela. Qualcosa di simile a questo come un punto di partenza:

public class CircularImageView extends ImageView { 
    /* constructors omitted for brevity ... */ 

    protected void onDraw(Canvas canvas) { 
     int saveCount = canvas.save(); 

     // clip in a circle 

     // draw image 
     Drawable d = getDrawable(); 
     if (d != null) { 
      d.draw(canvas); 
     } 

     // do extra drawing on canvas if pressed 

     canvas.restoreToCount(saveCount); 
    } 
} 

Prendetevi del tempo per acquisire familiarità con la tela e altre API di disegno 2D in Android.

Answer 3

Supponendo che per "selezionabile" intendi "verificabile, come un CheckBox", quindi che potrebbe essere qualche CompoundButton che utilizza un StateListDrawable con stati regolari e controllati per lo sfondo l'immagine in primo piano "SkillOverflow" dietro.

È possibile utilizzare uiautomatorviewer per visualizzare il widget effettivo che Google+ utilizza.

Answer 4

ero in grado di ottenere questo effetto attraverso un ImageView personalizzato sovrascrivendo onDraw e dipingendo una sorta di "confine" ogni volta che rileva un evento di tocco. Come bonus, c'è un overlay del selettore. Speriamo che si può trovare questo punto di vista utile ...

https://github.com/Pkmmte/CircularImageView