2013-03-19 19 views
8

私はAndroidで丸型ImageViewを作成する方法を見てきました。ですでにStackOverflowの上の被写体に質問を読んだ後:円形ImageView

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

How to set bitmap in circular imageview?

私はそれを必要とする何をガイドとしてリンクを使用して一緒に自分のImageViewのを入れていますto do:境界線を持つ丸められたイメージ。以下は

は、私が使用していますコードです:

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

私はこのオープンソースを作ることに計画していますし、誰かが、私はすべてを正しくやって確保するために、コードの上に顔を持っていることができれば、それをので感謝します。

+1

まず、あなたのコードを共有していただきありがとうございます!私はstackoverflow形式が適切であるとは確信していない/コードレビューのためのもので、あなたが手元のコードで*具体的な*質問や問題がない限り。 http://codereview.stackexchange.com/より適切な場所、またはGitHubのようなオープンソースのホストが、プルリクエストを通じてコードレビューを有効にするようです。 –

+0

@ Paul-Janはcodereview.stackexchange.comを使用していると述べています。第2に、この種のもののカスタムドロアブルを作成する方が良いです。 http://www.curious-creature.org/2012/12/11/android-recipe-1-image-with-rounded-corners/を参照してください。これはあなたのやることを行う最もメモリ効率のよい方法です。 –

答えて

2

ラウンドコーナー画像取得するには、この機能を試してみてください:あなたは、ボタンの境界線についてとても厳格でない場合

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

を。透明なエッジを持つ丸いPNG画像ファイルを作成しないでください。

0

これは最善の方法ではないかもしれませんし、多くのプロパティを変更することができないかもしれませんが、確かに最も簡単な方法です。私はちょうどthisライブラリを使用して、私はまた、境界を持っている円形の画像ビューを作った。だから、


、これは私のソリューションです:

まず、私は私のbuild.grandleでこれを置く:

`compile 'com.github.siyamed:android-shape-imageview:[email protected]'` 

第二、私は私の.xmlレイアウトファイルでこれを置く:

<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" /> 
私は白のボーダーで画像円形を行うためにやったすべてですそれ

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

photo.setBackgroundResource(R.drawable.female); 

:私の.javaファイルで210

が、これは私がCircularImageViewに画像を取るか、または設定することができる方法です。