Circular ImageView

Question

Ich habe untersucht, wie man eine runde ImageView in Android erstellen. Nach der Lektüre bereits Fragen zum Thema auf Stackoverflow bei gestellt:

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

und

How to set bitmap in circular imageview?

habe ich mein eigenes Image über die Links als Leitfaden zusammengestellt, das tut, was ich brauche es zu tun: ein gerundetes Bild mit einer Grenze.

Unten ist der Code, den ich verwende:

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

ich machen diese Open-Source bin der Planung und würde es daher begrüßen, wenn jemand einen Blick auf den Code, den ich alles tue, richtig, um sicherzustellen, haben könnte.

Answer 1

diese Funktion Versuchen Rund Ecke Bild zu bekommen:

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

Wenn Sie nicht so streng über die Grenze der Tasten sind. Warum machst du dann keine runde PNG-Bilddatei mit transparenten Kanten?

Answer 3

Dies ist möglicherweise nicht der beste Weg und Sie können möglicherweise nicht viele Eigenschaften ändern, aber es ist sicherlich der einfachste Weg. Ich habe gerade this Bibliothek verwendet und ich habe eine kreisförmige Bildansicht, die auch eine Grenze hat.

---

Also, das ist meine Lösung:

Erste, habe ich in meinem build.grandle:

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

Zweite ich diese Datei in meinem .xml Layout setzen:

<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" /> 

In meiner .java Datei, das ist die Art, wie ich oder setze das Bild in die CircularImageView nehmen:

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

photo.setBackgroundResource(R.drawable.female); 

---

Das ist alles, was ich getan habe, zu tun, die ein Bild kreisförmig mit weißen Rande.