ImageView circolare

Question

Ho cercato come creare un ImageView rotondo in Android. Dopo le domande di lettura già chiesto sull'argomento su StackOverflow a:

How to make an image fit into a circular frame in android

e

How to set bitmap in circular imageview?

ho messo insieme il mio ImageView usando i link come una guida che fa quello che ho bisogno fare: un'immagine arrotondata con un bordo.

Di seguito è il codice che sto usando:

public class CircularImageView extends ImageView 
{ 

private int borderWidth = 5; 
private int viewWidth; 
private int viewHeight; 
private Bitmap image; 
private Paint paint; 
private Paint paintBorder; 
private BitmapShader shader; 

public CircularImageView(Context context) { 
    super(context); 
    setup(); 
} 

public CircularImageView(Context context, AttributeSet attrs) { 
    super(context, attrs); 
    setup(); 
} 

public CircularImageView(Context context, AttributeSet attrs, int defStyle) { 
    super(context, attrs, defStyle); 
    setup(); 
} 

private void setup() 
{ 
    // init paint 
    paint = new Paint(); 
    paint.setAntiAlias(true); 

    paintBorder = new Paint(); 
    setBorderColor(Color.BLUE); 
    paintBorder.setAntiAlias(true);  
} 

public void setBorderWidth(int borderWidth) 
{ 
    this.borderWidth = borderWidth; 
    this.invalidate(); 
} 

public void setBorderColor(int borderColor) 
{  
    if(paintBorder != null) 
     paintBorder.setColor(borderColor); 

    this.invalidate(); 
} 

private void loadBitmap() 
{ 
    BitmapDrawable bitmapDrawable = (BitmapDrawable) this.getDrawable(); 

    if(bitmapDrawable != null) 
     image = bitmapDrawable.getBitmap(); 
} 

@SuppressLint("DrawAllocation") 
@Override 
public void onDraw(Canvas canvas) 
{ 
    //load the bitmap 
    loadBitmap(); 

    // init shader 
    if(image !=null) 
    { 
     // Create a shader with a scaled bitmap to match the view dimensions    
     shader = new BitmapShader(Bitmap.createScaledBitmap(image, canvas.getWidth(), canvas.getHeight(), false), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); 
     paint.setShader(shader); 
     int circleCenter = viewWidth/2; 

        // Draw the outer border 
        canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter + borderWidth, paintBorder); 
     // circleCenter is the x or y of the view's center 
     // radius is the radius in pixels of the cirle to be drawn 
     // paint contains the shader that will texture the shape    
     canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, circleCenter, paint); 
    }  
} 

@Override 
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) 
{ 
    int width = measureWidth(widthMeasureSpec); 
    int height = measureHeight(heightMeasureSpec, widthMeasureSpec);   

    viewWidth = width - (borderWidth *2); 
    viewHeight = height - (borderWidth*2); 

    setMeasuredDimension(width, height); 
} 

private int measureWidth(int measureSpec) 
{ 
     int result = 0; 
     int specMode = MeasureSpec.getMode(measureSpec); 
     int specSize = MeasureSpec.getSize(measureSpec); 

     if (specMode == MeasureSpec.EXACTLY) { 
      // We were told how big to be 
      result = specSize; 
     } else { 
      // Measure the text 
      result = viewWidth; 

     } 

    return result; 
} 

private int measureHeight(int measureSpecHeight, int measureSpecWidth) { 
    int result = 0; 
    int specMode = MeasureSpec.getMode(measureSpecHeight); 
    int specSize = MeasureSpec.getSize(measureSpecHeight); 

    if (specMode == MeasureSpec.EXACTLY) { 
     // We were told how big to be 
     result = specSize; 
    } else { 
     // Measure the text (beware: ascent is a negative number) 
     result = viewHeight;   
    } 
    return result; 
} 
} 

Sto pensando di rendere questo open source e quindi sarei grato se qualcuno potrebbe avere uno sguardo sul codice per assicurare che sto facendo tutto correttamente.

Answer 1

Prova questa funzione per ottenere un'immagine round-angolo:

private Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) 
    { 
     Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Config.ARGB_8888); 
     Canvas canvas = new Canvas(output); 
     final int color = 0xff424242; 
     final Paint paint = new Paint(); 
     final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()); 
     final RectF rectF = new RectF(rect); 
     final float roundPx = pixels; 
     paint.setAntiAlias(true); 
     canvas.drawARGB(0, 0, 0, 0); 
     paint.setColor(color); 
     canvas.drawRoundRect(rectF, roundPx, roundPx, paint); 
     paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN)); 
     canvas.drawBitmap(bitmap, rect, rect, paint); 
     return output; 
    } 

Answer 2

Se non siete così rigorosi circa il confine dei pulsanti. allora perché non creare un file immagine PNG rotondo con bordi trasparenti.

Answer 3

Questo potrebbe non essere il modo migliore e potrebbe non essere possibile modificare molte proprietà, ma è sicuramente il modo più semplice. Ho appena usato la libreria this e ho creato una vista panoramica circolare con un bordo.

---

Quindi, questa è la mia soluzione:

In primo luogo, ho messo nel mio build.grandle:

`compile 'com.github.siyamed:android-shape-imageview:0.9.+@aar'` 

In secondo luogo, ho messo questo nel mio file .xml di layout:

<com.github.siyamed.shapeimageview.CircularImageView 
        android:layout_width="150dp" 
        android:layout_gravity="center_horizontal" 
        android:layout_height="150dp" 
        android:id="@+id/photo" 
        app:siBorderWidth="5dp" 
        app:siBorderColor="#ffffff" 
        android:layout_alignParentTop="true" 
        android:layout_centerHorizontal="true" /> 

Nel mio file .java, questo è il modo in cui posso prendere o impostare l'immagine per l'CircularImageView:

final com.github.siyamed.shapeimageview.CircularImageView photo = (com.github.siyamed.shapeimageview.CircularImageView) convertView.findViewById(R.id.photo); 

photo.setBackgroundResource(R.drawable.female); 

---

Questo è tutto quello che ho fatto per fare circolare una foto con bordo bianco.