web-dev-qa-db-ja.com

角が丸いImageViewのビットマップ

ImageViewがあり、rounded cornersで作成したい。

私はこれを使用します：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle"> 
    <solid  Android:color="@null"/>    

    <stroke Android:width="1dp"
            Android:color="#ff000000"/>


    <corners Android:radius="62px"/> 
</shape>

そして、このコードを画像ビューの背景として設定します。動作しますが、ImageViewに配置したsrcイメージは境界から外れてしまい、新しい形状に適応しません。

どうすれば問題を解決できますか？

androidbitmapimageviewrounded-corners
46
BoraBora

これを試してください：

public class CustomImageView extends ImageView {

    public static float radius = 18.0f;  

    public CustomImageView(Context context) {
        super(context);
    }

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

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

    @Override
    protected void onDraw(Canvas canvas) {
        //float radius = 36.0f;  
        Path clipPath = new Path();
        RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight());
        clipPath.addRoundRect(rect, radius, radius, Path.Direction.CW);
        canvas.clipPath(clipPath);
        super.onDraw(canvas);
    }
}

そして

<your.pack.name.CustomImageView
                Android:id="@+id/selectIcon"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_centerInParent="true"
                Android:scaleType="centerCrop" />

CustomImageView  iconImage = (CustomImageView )findViewById(R.id.selectIcon);
iconImage.setImageBitmap(bitmap);

または、

ImageView iv= new CustomImageView(this);
iv.setImageResource(R.drawable.pic);
82
Anand

ここで誰も言及していないのは奇妙です RoundedBitmapDrawable from Android Support Library v4。私にとっては、国境のない角を丸くする最も簡単な方法です。ここに使用例があります。

RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(getResources(), bitmap);
final float roundPx = (float) bitmap.getWidth() * 0.06f;
roundedBitmapDrawable.setCornerRadius(roundPx);
25
lobzik

キャンバスを使用してビットマップに丸める関数を1つ作成します。

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

詳細情報：> こちら

19
Ketan Ahir

受け入れられた回答ではパスクリッピングを使用していますが、アンチエイリアスはサポートしていません。 Romain Guyの投稿に対するコメントを参照してください。 「パスクリッピングはアンチエイリアスをサポートしていないため、エッジがギザギザになります。」

http://www.curious-creature.com/2012/12/11/Android-recipe-1-image-with-rounded-corners/

ImageViewの角丸をサポートする優れたライブラリ（vinc3m1のRoundedImageView）が1つありますが、すべての角で同じ半径のみをサポートします。そこで、各コーナーに異なる半径を設定できるものを作成しました。

パスのクリッピングや再描画に依存しません。 canvas.drawPath()メソッドで1回だけ描​​画します。だから私は最終的に私が以下のようにしたい結果を得ました。

enter image description here

参照： https://github.com/pungrue26/SelectableRoundedImageView

9
김준호

境界線も必要な場合は、次の手順を実行します。1.透明なボディと白の外側の丸いボックスイメージを使用できます。例えば：

Rounded box

以下のようなターゲット画像でこれを使用します：

<FrameLayout
Android:layout_width="100px"
Android:layout_height="100px" >
<ImageView
        Android:id="@+id/targetImage"
        Android:layout_width="100px"
        Android:layout_height="100px"
        Android:src="@drawable/app_icon"
        Android:layout_gravity="center" />
<ImageView
        Android:id="@+id/boxImage"
        Android:layout_width="fill_parent"
        Android:layout_height="fill_parent"
        Android:scaleType="fitXY"
        Android:src="@drawable/box" />
  1. ImageViewの親レイアウトとして CardView を追加することも良い解決策です。
5
Kalu Khan Luhar

異なるコーナー半径でビットマップを作成する必要がある場合、コードに従うことをお勧めします：

private static Bitmap createRoundedRectBitmap(@NonNull Bitmap bitmap,
                                float topLeftCorner, float topRightCorner,
                                float bottomRightCorner, float bottomLeftCorner) {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), 
                                        Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = Color.WHITE;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
    final RectF rectF = new RectF(rect);
    Path path = new Path();
    float[] radii = new float[]{
            topLeftCorner, bottomLeftCorner,
            topRightCorner, topRightCorner,
            bottomRightCorner, bottomRightCorner,
            bottomLeftCorner, bottomLeftCorner
    };

    Paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    Paint.setColor(color);
    path.addRoundRect(rectF, radii, Path.Direction.CW);
    canvas.drawPath(path, Paint);
    Paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, Paint);
    return output;
}
4
Sergei Vasilenko

私にとっては、以下の方法が魔法をします。 :)このメソッドはビットマップオブジェクトを受け取り、角の丸いオブジェクトを返します。 roundPxは、必要な丸められたピクセルの数です。

public static Bitmap getRoundedCornerBitmap(Bitmap bitmap) {
    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 = 12;

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

...または、ImageViewの代わりに this ライブラリを使用し、さらにコーディングする必要はありません。

3
Niamatullah Bakhshi

これは、これを含む多くの投稿で説明するように、背景のドロアブルで実行できますが、クリッピングを設定する必要もあります。ここに完全な例：

コード：

AppCompatImageView iconView = findViewById(R.id.thumbnail);
iconView.setClipToOutline(true);

レイアウト：

<Android.support.v7.widget.AppCompatImageView
    Android:id="@+id/thumbnail"
    Android:layout_width="80dp"
    Android:layout_height="80dp"
    Android:contentDescription="@string/thumbnail"
    Android:scaleType="centerInside"
    Android:background="@drawable/round_view" <!--here set the drawable as background -->
    tools:src="@mipmap/ic_user" />

ドロアブル：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
    <corners Android:radius="10dp" />
</shape>
0
ByteArtisan
public class RoundedImageView extends ImageView {

    public RoundedImageView(Context context) {
        super(context);
    }

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

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

    @Override
    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        Bitmap rounder = Bitmap.createBitmap(getWidth(),getHeight(),Bitmap.Config.ARGB_8888);
        Canvas canvasRound = new Canvas(rounder);    

        Paint xferPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        xferPaint.setColor(Color.BLACK);

        final int rx = this.getWidth(); //our x radius
        final int ry = this.getHeight(); //our y radius

        canvasRound.drawRoundRect(new RectF(0,0,rx,ry), rx, ry, xferPaint);     

        xferPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

        canvas.drawBitmap(rounder, 0, 0, xferPaint);

    }

}
0
carlosgpn