Wybieralny widok kołowy, taki jak Google+

Question

Jak utworzyć zaznaczalny okrągły kod ImageView, tak jak w bieżącej aplikacji Google+ używanej do zdjęć profilowych?

To, co odnosi się do:

Powyższy obraz jest zaznaczone, a poniżej jest zaznaczona.

próbuję replikować zdjęcia profilowe 1 do 1.

Moja praca do tej pory:

loadedImage jest Bitmap który jest wyświetlany

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

stosowanych metod:

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

Rozmiar urządzenia ImageView to imageSizePx, a jego rozmiar to imageSizePx - 3. Oznacza to, że tło powinno nakładać się na obraz. Co nie działa.

Answer 1

Naprawdę proste rozwiązanie, dzięki @CommonsWare za wskazówki.

Rozmiar Bitmap: imageSizePx - 3DP
Rozmiar 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

Można utworzyć niestandardowy widok rozszerzający widok obrazu. Zastąp element onDraw, aby przyciąć płótno za pomocą okrągłego obszaru i narysować obraz na obszarze roboczym. Coś w tym stylu jako punkt wyjścia:

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

Poświęć trochę czasu, aby zapoznać się z Canvas i innymi interfejsami API do rysowania 2D w systemie Android.

Answer 3

Zakładając, że przez „wyboru” znaczy „dostępne do kontroli, jak CheckBox”, to może być jakiś CompoundButton że stosuje StateListDrawable regularnie sprawdzane i stanach na tle za „SkillOverflow” planie obrazu.

Można użyć uiautomatorviewer, aby zobaczyć, co rzeczywiste widget jest to, że korzysta z Google+.

Answer 4

udało mi się osiągnąć ten efekt dzięki niestandardowym ImageView nadrzędnymi onDraw i malowanie jakieś „granicy”, gdy wykryje wydarzenie dotykowe. Jako bonus znajduje się nakładka selektora. Mam nadzieję, że może się okazać ten pogląd jako ...

https://github.com/Pkmmte/CircularImageView