角が丸いImageViewを作成する方法は?


573

Androidでは、ImageViewはデフォルトで長方形です。ImageViewで丸みを帯びた長方形(ビットマップの4つの角すべてを切り取って丸みを帯びた長方形にする)にするにはどうすればよいですか?


これが役に立つかもしれませんstackoverflow.com/questions/26850780/...
マンゲシュ

古い、より複雑な答えの下に隠れ、私は今、受け入れ答えをされるべきだと思うものです:RoundedBitmapDrawable、v4のサポートライブラリのリビジョンに追加21
Jonik

あなたはそれをちょうどImageViewのを内部でCardViewを使用して最も簡単な方法を行うことができます-ここでは例を見てstackoverflow.com/a/41479670/4516797を
タラスVovkovych

このライブラリは非常に便利です。
grrigore

これをチェックし、今我々が持っているShapeableImageView円形または丸いImageViewのを作るために stackoverflow.com/a/61086632/7666442
Nilesh Rathod

回答:


545

これはかなり遅い応答ですが、これを探している他の人のために、次のコードを実行して画像の角を手動で丸めることができます。

http://www.ruibm.com/?p=184

これは私のコードではありませんが、私はそれを使用したことがあり、見事に機能しています。ImageHelperクラス内のヘルパーとして使用し、特定の画像に必要なぼかしの量を渡すために少し拡張しました。

最終的なコードは次のようになります。

package com.company.app.utils;

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Bitmap.Config;
import android.graphics.PorterDuff.Mode;

public class ImageHelper {
    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;
    }
}

これが誰かを助けることを願っています!


4
すべてのデバイスで機能するわけではありません。どこかに変更が必要ですか?
Spring Breaker

7
200 * 200の画像の場合、0.03秒近くかかるので、これは最善の解決策ではないと思います。
ジャッキー2013

2
左上隅と右上隅のみを丸めます。どうして ?
Prateek 2014

1
ここでのvinc3m1ソリューションgithub.com/makeramen/RoundedImageViewは本当にうまく機能します!また、彼の答え(参照stackoverflow.com/a/15032283/2048266を
nommer

16
imageviewのscaletypeを設定しようとするとうまく機能せず、fitXYのみが機能し、centerCropなどが予期しない結果を示していますが、ここで誰もが同じ問題を抱えていますか?
Shivansh 14

211

上記の答えは機能しますが、Romain Guy(コアAndroid開発者)は、ビットマップのコピーを作成しないシェーダーを使用することにより、より少ないメモリを使用するより良い方法をブログで示しいます。機能の概要は次のとおりです。

BitmapShader shader;
shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(shader);

RectF rect = new RectF(0.0f, 0.0f, width, height);

// rect contains the bounds of the shape
// radius is the radius in pixels of the rounded corners
// paint contains the shader that will texture the shape
canvas.drawRoundRect(rect, radius, radius, paint);

他の方法に対するこれの利点は次のとおりです。

  • 大きな画像で多くのメモリを使用するビットマップの個別のコピーは作成しません [他のほとんどの回答と比較して]
  • サポートantialisasing [クリップ経路法VS]
  • アルファをサポート[vs xfermode + porterduffメソッド]
  • ハードウェアアクセラレーションをサポート[vs clipPathメソッド]
  • キャンバスに1回だけ描画します [vs xfermodeおよびclippathメソッド]

このロジックをImageViewにラップし、適切なサポートとオプションの丸みを帯びた境界線を追加するこのコードに基づいてRoundedImageViewを作成しましたScaleType


/ example / res / layout / rounded_item.xml すべてのソースがハードコーディングされているときに、なぜ画像のsrcを指定するのですか?素晴らしいデモです。
誰かどこか

Romain Guyの元のサンプルと同様に、サンプルには深刻なメモリ不足の問題があります。何が原因かはまだわかりませんが、彼のコードと同じように、これを見つけるのは非常に困難です。OOMが原因でアプリからのクラッシュが表示されない場合は、それが発生するまでアプリを何度も回転できます(デバイス、ROMなどによって異なります)。:私はここで、過去にそれについて報告してきたstackoverflow.com/questions/14109187/...
Androidデベロッパー

1
メモリ不足の問題を報告している人は他にいないので、コードの外で行っているのは間違いであるに違いありません。この例では、ビューが描画されるたびにビットマップ再作成することなく、限られたビットマップセットをアダプターに正しく保持しています。ここに示す例は、Drawable内のdraw()メソッドのスニペットです。これは、元のビットマップへの参照を使用して、それが保持し、正しく機能します。これは、元のビットマップを変更するためのものではなく、丸い角でレンダリングするためのものです。この例では、中央の作物もうまく機能しています。
vinc3m1 2013年

1
スクリーンショットやデバイスが機能しない場所で提供したり、修正やプルリクエストを提供したりすることができれば、最も生産性が高くなります。デバイスで複数回回転をテストしましたが、メモリは同じままです。
vinc3m1 2013年

11
画像サイズが2048ピクセルを超える場合は機能しないことに注意してください。シェーダーは、それよりも大きいテクスチャをサポートしていません。
ガーボル

209

もう1つの簡単な方法は、隅の半径と内側のImageViewでCardViewを使用することです。

  <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:cardCornerRadius="8dp"
            android:layout_margin="5dp"
            android:elevation="10dp">

            <ImageView
                android:id="@+id/roundedImageView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/image"
                android:background="@color/white"
                android:scaleType="centerCrop"
                />
        </android.support.v7.widget.CardView>

ここに画像の説明を入力してください


5
良い回避策のようです。ただし、ロリポップ前の画像はクリップされません。
ニコライ

1
もし、すべてのコーナーではなく、左上隅と右上隅の半径のみが必要な場合はどうでしょうか?
Pratik Singhal

3
任意のビューで曲線の境界を適用する非常にシンプルでスマートな方法。
AMI CHARADAVA 2018

1
良い解決策ですが、標高はAPIレベル21以上でのみサポートされています
Saad Bilal

1
カードの昇格を無効にするには、app:cardElevation = "0dp"を使用します(android:elevationではありません)
Johnny Five

150

丸みを帯びた形状へのクリッピングはView、API 21のクラスに追加されました。

これを行うだけです:

  • 次のような丸い形状のドローアブルを作成します。

res / drawable / round_outline.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="10dp" />
    ...
</shape>
  • ドローアブルをImageViewの背景として設定します。 android:background="@drawable/round_outline"
  • このドキュメントによれば、追加する必要があるのはandroid:clipToOutline="true"

残念ながら、バグがあり、そのXML属性は認識されません。幸い、Javaでクリッピングを設定できます。

  • あなたの活動またはフラグメントで: ImageView.setClipToOutline(true)

これは次のようになります。

ここに画像の説明を入力してください

注意:

このメソッドは、(丸みを帯びただけでなく)任意の描画可能な形状で機能します。Drawable xmlで定義した形状の輪郭にImageViewをクリップします。

ImageViewsに関する特記事項

setClipToOutline()ビューの背景が描画可能な形状に設定されている場合にのみ機能します。この背景形状が存在する場合、Viewは形状の輪郭をクリッピングおよびシャドウイングの境界として扱います。

あなたが使用したい場合は、この手段は、setClipToOutline()ImageViewの上の角を丸めるために、あなたのイメージを使用して設定しなければならないandroid:src代わりにandroid:background(背景があなたの丸みを帯びた形状に設定されなければならないため)。srcの代わりに背景を使用して画像を設定する必要がある場合は、次の回避策を使用できます。

  • レイアウトを作成し、その背景を描画可能な図形に設定します
  • ImageViewの周りにそのレイアウトをラップします(パディングなし)
  • ImageView(レイアウトの他のものを含む)は、丸みのあるレイアウト形状で表示されます。

10
エラー:(x)パッケージ 'android'の属性 'clipToOutline'にリソース識別子が見つかりません
Anu Martin

7
代わりにandroid:clipToOutline、使用する必要がありますandroid:outlineProvider="background"
WindRider 2018年

2
私がGoogleを「大好き」にしたもう1つの理由は、このバグがほぼ私の年齢であり、まだ小さな世界に存在していることです。Googleはそれについてcr * apを与えていないようです))
Farid

1
背景の形状のtopleftとtopRightの角を丸めただけに設定すると、この方法ではうまくいかないようです。
Peterdk

@AnuMartinこれは既知の問題です-issuetracker.google.com/issues/37036728
Vadim Kotov

132

Supportライブラリのv21には、これに対する解決策があります。これはRoundedBitmapDrawableと呼ばれます

基本的には通常のDrawableと同じですが、クリッピングのコーナー半径を次のように指定します。

setCornerRadius(float cornerRadius)

したがって、Bitmap srcおよびtarget で始まると、ImageView次のようになります。

RoundedBitmapDrawable dr = RoundedBitmapDrawableFactory.create(res, src);
dr.setCornerRadius(cornerRadius);
imageView.setImageDrawable(dr);

3
次のステップは次のとおりです。stackoverflow.com
David d C e Freitas

実際にそこにあるandroid.support.v4.graphics.drawable.RoundedBitmapDrawableFactoryので、v4また、それをサポートしています。
デッドフィッシュ

2
@deadfishはいv4サポートライブラリにありますがREVISION 21、サポートライブラリまではありません
tyczj

3
これは簡単で最新のソリューションです。最小限のコードで十分な拡張性を備えています。ローカルファイル、キャッシュされたドローアブル、またはVolleyのNetworkImageViewの画像を操作できます。@Jonikが指摘したように、私はこれが今日受け入れられる答えであるべきだと強く同意します。
katie 2017

2
残念ながら動作しませんscaleType centerCrop(サポートライブラリv25.3.1)
rocknow

67

カスタムImageViewで実行しました:

public class RoundRectCornerImageView extends ImageView {

    private float radius = 18.0f;
    private Path path;
    private RectF rect;

    public RoundRectCornerImageView(Context context) {
        super(context);
        init();
    }

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

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

    private void init() {
        path = new Path();

    }

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

使い方:

<com.mypackage.RoundRectCornerImageView
     android:id="@+id/imageView"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="@drawable/image"
     android:scaleType="fitXY" />

出力:

ここに画像の説明を入力してください

これがお役に立てば幸いです。


これにより画像がぼやけます
Amit Hooda

2
android:scaleType = "centerCrop"でも機能し、シンプルで、新しいビットマップを作成しません。ありがとう!
ernazm 2017年

1
@Hirenこのソリューションは、背景画像のあるImageViewで正常に機能します。ただし、背景色のみで画像がないImageViewsでは機能しません。なぜこれが起こっているのか教えてください。
user2991413

Canvas.clipPath()場合によっては発生java.lang.UnsupportedOperationExceptionすることがあります。stackoverflow.com/questions/13248904/…を
Artyom

1
このソリューションはandroid:background、で設定された画像に対してのみ機能しますandroid:src
CoolMind 2018

65

簡単なxmlソリューション-

<android.support.v7.widget.CardView
            android:layout_width="40dp"
            android:layout_height="40dp"
            app:cardElevation="0dp"
            app:cardCornerRadius="4dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/rounded_user_image"
        android:scaleType="fitXY"/>

</android.support.v7.widget.CardView>

CardViewでは希望の幅、高さ、半径を設定でき、ImageViewではscaleTypeを設定できます。

AndroidXでは、 <androidx.cardview.widget.CardView>


4
このアプローチは私の場合androidx.cardview.widget.CardViewで機能しました
Ivan

7
なぜこれに賛成票がないのかわかりませんか?私の意見では、ライブラリと大量のくだらないコードなしの最良のソリューション(私の場合は、centerCropスケーリングを使用しましたが)。
ThemBones

1
それは新しい答えなので、まだ多くの賛成票はありません。しかし、すぐに+1するために+1を入れました。ありがとう!
マイサー

しかし、それは動作しますが、ここでの画像は、理由の伸びになるscaleType="fitXY"と、適切@ThemBonesを見ていない
WIZARD

@WIZARDだからこそ、ImageViewで希望のscaleTypeを設定できると述べました
Chirag Mittal

57

どちらの方法も実用的な解決策を見つけるのに非常に役立つことがわかりました。これが私の複合バージョンです。これはピクセルに依存せず、一部の正方形のコーナーに同じ半径を持つ残りのコーナーを含めることができます(通常の使用例です)。上記の両方のソリューションのおかげで:

public static Bitmap getRoundedCornerBitmap(Context context, Bitmap input, int pixels , int w , int h , boolean squareTL, boolean squareTR, boolean squareBL, boolean squareBR  ) {

    Bitmap output = Bitmap.createBitmap(w, h, Config.ARGB_8888);
    Canvas canvas = new Canvas(output);
    final float densityMultiplier = context.getResources().getDisplayMetrics().density;

    final int color = 0xff424242;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, w, h);
    final RectF rectF = new RectF(rect);

    //make sure that our rounded corner is scaled appropriately
    final float roundPx = pixels*densityMultiplier;

    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawRoundRect(rectF, roundPx, roundPx, paint);


    //draw rectangles over the corners we want to be square
    if (squareTL ){
        canvas.drawRect(0, h/2, w/2, h, paint);
    }
    if (squareTR ){
        canvas.drawRect(w/2, h/2, w, h, paint);
    }
    if (squareBL ){
        canvas.drawRect(0, 0, w/2, h/2, paint);
    }
    if (squareBR ){
        canvas.drawRect(w/2, 0, w, h/2, paint);
    }


    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(input, 0,0, paint);

    return output;
}

また、ImageViewをオーバーライドしてこれを配置し、xmlで定義できるようにしました。super呼び出しがここで行うロジックの一部を追加することもできますが、私の場合は役に立たないため、コメントしました。

    @Override
protected void onDraw(Canvas canvas) {
    //super.onDraw(canvas);
        Drawable drawable = getDrawable();

        Bitmap b =  ((BitmapDrawable)drawable).getBitmap() ;
        Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

        int w = getWidth(), h = getHeight();


        Bitmap roundBitmap =  CropImageView.getRoundedCornerBitmap( getContext(), bitmap,10 , w, h , true, false,true, false);
        canvas.drawBitmap(roundBitmap, 0,0 , null);
}

お役に立てれば!


4
かなり素晴らしい、特にImageViewの拡張
誰かがどこか

2
ImageView#onDraw()のロジックを維持する簡単な方法は、丸みを帯びたコーナービットマップをImageViewのドローアブルに設定し、super.onDraw()をそのままにしてビットマップを描画することです。RoundedCornerImageViewクラスを作成しました。その使用例はこちらです。私が使用したgetRoundedCornerBitmap()はピクセルに依存しないことに注意してください。
umbalaconmeogia

RoundedCornerImageViewをありがとう。使用しましたが、ピクセル密度に依存しないように変更しました。
PacificSky、2012年

ウンバのRoundedCornerImageViewにソースコードはここにある:code.google.com/p/android-batsg/source/browse/trunk/...
誰かどこか

@Caspar Harmerは1つの編集で正常に動作します... 4つの条件があります..true、true、false、falseを設定するように変更するだけで、上隅ではなく下隅が設定されます。それ以外の場合、コードは正常に機能しています。sosquareTLとsquareTRは、squareBLとsquareBRそれぞれの条件です。
TheFlash

48

使用して丸みを帯びた画像ImageLoader こちら

作成DisplayImageOptions

DisplayImageOptions options = new DisplayImageOptions.Builder()
    // this will make circle, pass the width of image 
    .displayer(new RoundedBitmapDisplayer(getResources().getDimensionPixelSize(R.dimen.image_dimen_menu))) 
    .cacheOnDisc(true)
    .build();

imageLoader.displayImage(url_for_image,ImageView,options);

またはPicasso、SquareのLibraryを使用できます。

Picasso.with(mContext)
    .load(com.app.utility.Constants.BASE_URL+b.image)
    .placeholder(R.drawable.profile)
    .error(R.drawable.profile)
    .transform(new RoundedTransformation(50, 4))
    .resizeDimen(R.dimen.list_detail_image_size, R.dimen.list_detail_image_size)
    .centerCrop()
    .into(v.im_user);

ここ RoundedTransformationファイルをダウンロードできます


1
画像が表示されない
Amit Thaper

3
ピカソライブラリは1つで、実装も非常に簡単です。おかげで、+ 1
Hitesh

3
ただし、ピカソライブラリは「プレースホルダー」と「エラー」の画像を変換しないようです。そのため、画像の読み込みに失敗した場合(エラー)、または最初の読み込みに時間がかかる場合(プレースホルダー)、画像は丸みを帯びた画像として表示されません。 github.com/square/picasso/issues/337
Pelpotronic

その他の便利なピカソ変換は、このライブラリによって提供されます。このライブラリには、RoundedCornersTransformationも含まれています。github.com/ wasabeef
Massimo

ユニバーシティの画像のトリミングでは機能しません。画像ローダー。
2018

26

すべての答えが私にとって丸みを帯びただけでは複雑すぎるように思えたので、画像の周りにスペースがある場合に備えて、XMLで共有する価値があると思う別のソリューションにたどり着きました。

次のように透明なコンテンツでボーダー付きのシェイプを作成します。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners 
        android:radius="30dp" />
    <stroke 
        android:color="#ffffffff"
        android:width="10dp" />
</shape> 

次に、RelativeLayoutで最初に画像を配置し、次に別のImageViewを使用して形状の上の同じ場所に配置できます。カバー形状は、境界線の幅の分だけサイズが大きくなければなりません。外側の半径が定義されていますが、内側の半径が画像を覆うものであるため、コーナーの半径を大きくするように注意してください。

それが誰かにも役立つことを願っています。

CQMに従って編集して、相対レイアウトの例を要求します。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/imageToShow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imgCorners"
        android:layout_alignLeft="@+id/imgCorners"
        android:layout_alignRight="@+id/imgCorners"
        android:layout_alignTop="@+id/imgCorners"
        android:background="#ffffff"
        android:contentDescription="@string/desc"
        android:padding="5dp"
        android:scaleType="centerCrop" />

    <ImageView
        android:id="@+id/imgCorners"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:contentDescription="@string/desc"
        android:src="@drawable/corners_white" />

</RelativeLayout>

より多くのコードでこれについてさらに詳しく説明できますか?特に2番目の画像ビューで何が行われていて、「ボーダー形状」のxmlが適用されている場所(srcまたは背景として?)にいくつかの質問があります。それは私が独立して、すべての四隅を制御できるようになるので、私はこのソリューションを好きにしたい
CQM

1
簡単な答えのようですが、残念ながら、「マスクされた」画像ビューの周囲にマージンが追加され、望ましくない副作用です。
Abdalrahman Shatou 2014年

はい。ただし、角が丸く、背景が透明なPNG-Drawableに基づくImageView、または未定義のアスペクトがある場合は9-Patch-Drawableで同じように機能します。
クリスチャン

私は同じようにして、その働きをしています。それが向きと異なる電話サイズで問題を引き起こさないかどうか知りたいだけですか?
オープンおよび無料

寸法を互いに相対的に保つ場合、これは問題を引き起こしません。
クリスチャン

22

バージョン以降で1.2.0-alpha03マテリアルコンポーネントライブラリの新しいがありますShapeableImageView

あなたは次のようなものを使うことができます:

  <com.google.android.material.imageview.ShapeableImageView
      ...
      app:shapeAppearanceOverlay="@style/roundedImageView"
      app:srcCompat="@drawable/ic_image" />

と:

  <style name="roundedImageView" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">8dp</item>
  </style>

またはプログラムで:

float radius = getResources().getDimension(R.dimen.default_corner_radius);
imageView.setShapeAppearanceModel(imageView.getShapeAppearanceModel()
    .toBuilder()
    .setAllCorners(CornerFamily.ROUNDED,radius)
    .build());

ここに画像の説明を入力してください


画像に背景色がある場合、これは現在、丸い角の下にポップする背景色を生成します。これは、画像のscaleTypeプロパティも無視します。
inokey

14

角の丸いウィジェットを備えたImageViewの私の実装は、画像を必要なサイズに(ダウン||アップ)サイズ変更します。CaspNZのコードを利用しています。

public class ImageViewRounded extends ImageView {

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

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

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

    @Override
    protected void onDraw(Canvas canvas) {
        BitmapDrawable drawable = (BitmapDrawable) getDrawable();

        if (drawable == null) {
            return;
        }

        if (getWidth() == 0 || getHeight() == 0) {
            return; 
        }

        Bitmap fullSizeBitmap = drawable.getBitmap();

        int scaledWidth = getMeasuredWidth();
        int scaledHeight = getMeasuredHeight();

        Bitmap mScaledBitmap;
        if (scaledWidth == fullSizeBitmap.getWidth() && scaledHeight == fullSizeBitmap.getHeight()) {
            mScaledBitmap = fullSizeBitmap;
        } else {
            mScaledBitmap = Bitmap.createScaledBitmap(fullSizeBitmap, scaledWidth, scaledHeight, true /* filter */);
        }

        Bitmap roundBitmap = ImageUtilities.getRoundedCornerBitmap(getContext(), mScaledBitmap, 5, scaledWidth, scaledHeight,
                false, false, false, false);
        canvas.drawBitmap(roundBitmap, 0, 0, null);

    }

}

12
ImageUtilitiesはどこから来たのですか?
JasonWyatt 2013年

1
@JasonWyattは以下のsorrodosの投稿を参照してください
Damjan

12

最近では、別の方法があります-Glideの生成されたAPIを使用することです。最初の作業は多少必要ですが、実際のコードを作成するため、Glideのすべての機能を柔軟に実行できるため、長期的には優れたソリューションだと思います。さらに、使用方法は非常にシンプルで端正です。

まず、Glideバージョン4+をセットアップします。

implementation 'com.github.bumptech.glide:glide:4.6.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.6.1'

次に、Glidのアプリモジュールクラスを作成して注釈処理をトリガーします。

@GlideModule
public final class MyAppGlideModule extends AppGlideModule {}

次に、実際に機能するGlide拡張機能を作成します。あなたはそれをカスタマイズしてあなたが望むことを何でもすることができます:

@GlideExtension
public class MyGlideExtension {

    private MyGlideExtension() {}

    @NonNull
    @GlideOption
    public static RequestOptions roundedCorners(RequestOptions options, @NonNull Context context, int cornerRadius) {
        int px = Math.round(cornerRadius * (context.getResources().getDisplayMetrics().xdpi / DisplayMetrics.DENSITY_DEFAULT));
        return options.transforms(new RoundedCorners(px));
    }
}

これらのファイルを追加したら、プロジェクトをビルドします。

次に、次のようにコードで使用します。

GlideApp.with(this)
        .load(imageUrl)
        .roundedCorners(getApplicationContext(), 5)
        .into(imageView);

間にスペースを追加することを忘れてはいけないRequestOptionsoptionsのparams内を
StevenTB

できました。入力いただきありがとうございます。
Codesalot卿2018

.roundedCornersが来ないので、他に何かセットアップする必要がありますか?プロジェクトの再構築後も
aNdRO博士、

これでうまくいきました。ありがとうございます。@GlideExtension注釈付きのクラスを使用しないほうが簡単で.transform(new RoundedCorners(px))、どこpxが同じか(int px = Math.round(cornerRadius * (context.getResources().getDisplayMetrics().xdpi / DisplayMetrics.DENSITY_DEFAULT));)をそのまま使用しました。
Michael Osofsky

10

imageviewsを形作ることができるクールなライブラリがあります。

次に例を示します。

<com.github.siyamed.shapeimageview.mask.PorterShapeImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:siShape="@drawable/shape_rounded_rectangle"
    android:src="@drawable/neo"
    app:siSquare="true"/>

形状定義:

<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:topLeftRadius="18dp"
        android:topRightRadius="18dp"
        android:bottomLeftRadius="18dp"
        android:bottomRightRadius="18dp" />
    <solid android:color="@color/black" />
</shape>

結果:

結果


1
これは素晴らしいことであり、境界線を追加して任意の形状を使用できるようになります
Adam Kis

8

これは、imageViewをオーバーライドする簡単な例です。レイアウトデザイナーでそれを使用してプレビューすることもできます。

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 defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public RoundedImageView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    public void setImageDrawable(Drawable drawable) {
        float radius = 0.1f;
        Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();
        RoundedBitmapDrawable rid = RoundedBitmapDrawableFactory.create(getResources(), bitmap);
        rid.setCornerRadius(bitmap.getWidth() * radius);
        super.setImageDrawable(rid);
    }
}

これは高速なソリューションのためのものです。半径はすべてのコーナーで使用され、ビットマップ幅のパーセンテージに基づいています。

私はオーバーライドしてsetImageDrawable、丸みを帯びたビットマップドローアブルのサポートv4メソッドを使用しました。

使用法:

<com.example.widgets.RoundedImageView
        android:layout_width="39dp"
        android:layout_height="39dp"
        android:src="@drawable/your_drawable" />

imageViewとカスタムimageViewでプレビュー:

ここに画像の説明を入力してください


これはすべての状況で機能します。ありがとうございます。あなたは私の日を救った。
Mehul Solanki、2018

7

ImageView独自の角丸長方形を拡張して描画する必要があります。

画像の周りにフレームが必要な場合は、レイアウトの画像ビューの上に丸いフレームを重ねることもできます。

[編集] FrameLayoutたとえばを使用して、フレームを元の画像に重ね合わせます。の最初の要素は、FrameLayout丸めて表示するイメージです。次に、別ImageViewのフレームを追加します。2つ目ImageViewはオリジナルの上に表示されるImageViewため、Androidはオリジナルのコンテンツの上にコンテンツを描画しImageViewます。


ありがとうございました。しかし、ImageViewにはsetDrawableメソッドしかありません。ImageViewのsetDrawableを画像のコンテンツに設定して、ImageViewの上に丸いフレームを重ね合わせるにはどうすればよいですか?
マイケル

すみません、はっきりしていませんでした。私は、レイアウトに重ねることを意味:これ(IE)を使用FrameLayout置くImageViewことで、別の追加ImageView丸い枠で。その方法では、最初のImageView画像は選択した画像ImageFrameを表示し、2番目の画像は丸みを帯びたフレームを表示します。
MrSnowflake 2010年

正解-FrameLayoutを使用すると、1つの画像/ビューを別の画像/ビューにオーバーレイできます。FrameLayoutのandroid:foregroundタグを利用することもできます。
Richard Le Mesurier、2011年

7

ロマンガイはそれがどこにあるかです。

以下のように縮小版。

Bitmap bitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.image)).getBitmap();

Bitmap bitmapRounded = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), bitmap.getConfig());
Canvas canvas = new Canvas(bitmapRounded);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
canvas.drawRoundRect((new RectF(0.0f, 0.0f, bitmap.getWidth(), bitmap.getHeight())), 10, 10, paint);

imageView.setImageBitmap(bitmapRounded);

悲しいことに、それは機能しますが、ここでの他のソリューションと同様に、現在のビットマップを使用する代わりに新しいビットマップを作成します。
Android開発者

あんまり。bitmapRoundedは何度も使用されます。ドローアブルキャンバスにアクセスできる場合は、新しいビットマップを生成する代わりに、drawメソッドを直接使用できます。
アレックス

どうやってやるの?特別なドローアブルを使用せず、単一のビットマップのみを処理し、プロセスの最後にsetImageBitmapを使用するとします。どうすればそのようなことを達成できますか?
Android開発者


どちらもビットマップを変更しませんが、カスタムドローアブルとカスタムイメージビューを使用してラップします。これは私が尋ねたものではありません。ビットマップ自体をどのように変更するかを尋ねました。
Android開発者

7

私の場合、この純粋なxmlソリューションで十分でした。http://www.techrepublic.com/article/pro-tip-round-corners-on-an-android-imageview-with-this-hack/

編集

一言で言えば、答えは次のとおりです。

/ res / drawableフォルダーに、frame.xmlファイルを作成します。その中で、角が丸く、中心が透明な単純な長方形を定義します。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
     <solid android:color="#00ffffff" />
     <padding android:left="6dp"
        android:top="6dp"
        android:right="6dp"
        android:bottom="6dp" />
     <corners android:radius="12dp" />
     <stroke android:width="6dp" android:color="#ffffffff" />
</shape>

レイアウトファイルで、標準のImageViewとネストされたFrameLayoutを含むLinearLayoutを追加します。FrameLayoutは、パディングとカスタムドローアブルを使用して、角が丸いように見せます。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_gravity="center"
    android:gravity="center" 
    android:background="#ffffffff">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="6dp"
        android:src="@drawable/tr"/>

    <FrameLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="6dp"
            android:src="@drawable/tr"/>

        <ImageView 
             android:src="@drawable/frame"
             android:layout_width="match_parent"
             android:layout_height="match_parent" />

    </FrameLayout>

</LinearLayout>

いいアイデアです。私はそれを使ってImageViewの隅を表示していません
Gal Rom

6

上記のジョージウォルタースII氏への小道具、私は彼の答えを取り入れて、個々のコーナーの丸みを個別にサポートするために少し拡張しました。これは少し最適化できますが(ターゲットの四角形の一部が重複しています)、全体ではありません。

私はこのスレッドが少し古いことを知っていますが、AndroidでImageViewsの角を丸める方法に関するGoogleでのクエリの上位結果の1つです。

/**
 * Use this method to scale a bitmap and give it specific rounded corners.
 * @param context Context object used to ascertain display density.
 * @param bitmap The original bitmap that will be scaled and have rounded corners applied to it.
 * @param upperLeft Corner radius for upper left.
 * @param upperRight Corner radius for upper right.
 * @param lowerRight Corner radius for lower right.
 * @param lowerLeft Corner radius for lower left.
 * @param endWidth Width to which to scale original bitmap.
 * @param endHeight Height to which to scale original bitmap.
 * @return Scaled bitmap with rounded corners.
 */
public static Bitmap getRoundedCornerBitmap(Context context, Bitmap bitmap, float upperLeft,
        float upperRight, float lowerRight, float lowerLeft, int endWidth,
        int endHeight) {
    float densityMultiplier = context.getResources().getDisplayMetrics().density;

    // scale incoming bitmap to appropriate px size given arguments and display dpi
    bitmap = Bitmap.createScaledBitmap(bitmap, 
            Math.round(endWidth * densityMultiplier),
            Math.round(endHeight * densityMultiplier), true);

    // create empty bitmap for drawing
    Bitmap output = Bitmap.createBitmap(
            Math.round(endWidth * densityMultiplier),
            Math.round(endHeight * densityMultiplier), Config.ARGB_8888);

    // get canvas for empty bitmap
    Canvas canvas = new Canvas(output);
    int width = canvas.getWidth();
    int height = canvas.getHeight();

    // scale the rounded corners appropriately given dpi
    upperLeft *= densityMultiplier;
    upperRight *= densityMultiplier;
    lowerRight *= densityMultiplier;
    lowerLeft *= densityMultiplier;

    Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setColor(Color.WHITE);

    // fill the canvas with transparency
    canvas.drawARGB(0, 0, 0, 0);

    // draw the rounded corners around the image rect. clockwise, starting in upper left.
    canvas.drawCircle(upperLeft, upperLeft, upperLeft, paint);
    canvas.drawCircle(width - upperRight, upperRight, upperRight, paint);
    canvas.drawCircle(width - lowerRight, height - lowerRight, lowerRight, paint);
    canvas.drawCircle(lowerLeft, height - lowerLeft, lowerLeft, paint);

    // fill in all the gaps between circles. clockwise, starting at top.
    RectF rectT = new RectF(upperLeft, 0, width - upperRight, height / 2);
    RectF rectR = new RectF(width / 2, upperRight, width, height - lowerRight);
    RectF rectB = new RectF(lowerLeft, height / 2, width - lowerRight, height);
    RectF rectL = new RectF(0, upperLeft, width / 2, height - lowerLeft);

    canvas.drawRect(rectT, paint);
    canvas.drawRect(rectR, paint);
    canvas.drawRect(rectB, paint);
    canvas.drawRect(rectL, paint);

    // set up the rect for the image
    Rect imageRect = new Rect(0, 0, width, height);

    // set up paint object such that it only paints on Color.WHITE
    paint.setXfermode(new AvoidXfermode(Color.WHITE, 255, AvoidXfermode.Mode.TARGET));

    // draw resized bitmap onto imageRect in canvas, using paint as configured above
    canvas.drawBitmap(bitmap, imageRect, imageRect, paint);

    return output;
}

密度乗数を追加し、個別に角を丸めるサポートを追加するための+1。あなたの解決策はうまくいかなかったので、私は実際に上部の解決策を使用しました-しかし、それは非常に役に立ちました!:以下の私の複合ソリューションを参照してください
カスパー・ハーマー

6

imageView以下のように形状を適用します。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="#faf5e6" />
    <stroke
        android:width="1dp"
        android:color="#808080" />
    <corners android:radius="15dp" />
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />
</shape>

それはあなたの友人に役立つかもしれません。


6

なぜクリッピングしないのdraw()ですか?

これが私の解決策です:

  • クリッピングでRelativeLayoutを拡張する
  • ImageView(または他のビュー)をレイアウトに配置します。

コード:

public class RoundRelativeLayout extends RelativeLayout {

    private final float radius;

    public RoundRelativeLayout(Context context, AttributeSet attrs) {
        super(context, attrs);

        TypedArray attrArray = context.obtainStyledAttributes(attrs,
                R.styleable.RoundRelativeLayout);
        radius = attrArray.getDimension(
                R.styleable.RoundRelativeLayout_radius, 0);
    }

    private boolean isPathValid;
    private final Path path = new Path();

    private Path getRoundRectPath() {
        if (isPathValid) {
            return path;
        }

        path.reset();

        int width = getWidth();
        int height = getHeight();
        RectF bounds = new RectF(0, 0, width, height);

        path.addRoundRect(bounds, radius, radius, Direction.CCW);
        isPathValid = true;
        return path;
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        canvas.clipPath(getRoundRectPath());
        super.dispatchDraw(canvas);
    }

    @Override
    public void draw(Canvas canvas) {
        canvas.clipPath(getRoundRectPath());
        super.draw(canvas);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int oldWidth = getMeasuredWidth();
        int oldHeight = getMeasuredHeight();
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int newWidth = getMeasuredWidth();
        int newHeight = getMeasuredHeight();
        if (newWidth != oldWidth || newHeight != oldHeight) {
            isPathValid = false;
        }
    }

}

1
私はこのアプローチが好きです。私はそれを使って独自のRoundImageViewを作成しました。これをありがとう。
Pascal

ハードワードアクセラレーションがオンの場合、これは機能しません。簡単な回避策はありませんでした...
secureboot 2013

結果をドローアブルとして、コンテンツの周囲にアウトライン(AKAストローク)を追加する機能、および一部のコーナーのみを丸める機能を備えた方法を教えていただけませんか?
Android開発者

5

次の例では、配置された子オブジェクトの周りに角丸長方形を描画する角丸長方形のレイアウトオブジェクトを作成します。また、layout xmlファイルを使用せずにプログラムでビューとレイアウトを作成する方法も示します。

package android.example;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.ViewGroup.LayoutParams;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MessageScreen extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  int mainBackgroundColor = Color.parseColor("#2E8B57");
  int labelTextColor = Color.parseColor("#FF4500");
  int messageBackgroundColor = Color.parseColor("#3300FF");
  int messageTextColor = Color.parseColor("#FFFF00");

  DisplayMetrics metrics = new DisplayMetrics();
  getWindowManager().getDefaultDisplay().getMetrics(metrics);
  float density = metrics.density;
  int minMarginSize = Math.round(density * 8);
  int paddingSize = minMarginSize * 2;
  int maxMarginSize = minMarginSize * 4;

  TextView label = new TextView(this);
  /*
   * The LayoutParams are instructions to the Layout that will contain the
   * View for laying out the View, so you need to use the LayoutParams of
   * the Layout that will contain the View.
   */
  LinearLayout.LayoutParams labelLayoutParams = new LinearLayout.LayoutParams(
    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
  label.setLayoutParams(labelLayoutParams);
  label.setTextSize(TypedValue.COMPLEX_UNIT_SP, 18);
  label.setPadding(paddingSize, paddingSize, paddingSize, paddingSize);
  label.setText(R.string.title);
  label.setTextColor(labelTextColor);

  TextView message = new TextView(this);
  RoundedRectangle.LayoutParams messageLayoutParams = new RoundedRectangle.LayoutParams(
 LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
  /*
   * This is one of the calls must made to force a ViewGroup to call its
   * draw method instead of just calling the draw method of its children.
   * This tells the RoundedRectangle to put some extra space around the
   * View.
   */
  messageLayoutParams.setMargins(minMarginSize, paddingSize,
    minMarginSize, maxMarginSize);
  message.setLayoutParams(messageLayoutParams);
  message.setTextSize(TypedValue.COMPLEX_UNIT_SP, paddingSize);
  message.setText(R.string.message);
  message.setTextColor(messageTextColor);
  message.setBackgroundColor(messageBackgroundColor);

  RoundedRectangle messageContainer = new RoundedRectangle(this);
  LinearLayout.LayoutParams messageContainerLayoutParams = new LinearLayout.LayoutParams(
    LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
  messageContainerLayoutParams.setMargins(paddingSize, 0, paddingSize, 0);
  messageContainer.setLayoutParams(messageContainerLayoutParams);
  messageContainer.setOrientation(LinearLayout.VERTICAL);
  /*
   * This is one of the calls must made to force a ViewGroup to call its
   * draw method instead of just calling the draw method of its children.
   * This tells the RoundedRectangle to color the the exta space that was
   * put around the View as well as the View. This is exterior color of
   * the RoundedRectangle.
   */
  messageContainer.setBackgroundColor(mainBackgroundColor);
  /*
   * This is one of the calls must made to force a ViewGroup to call its
   * draw method instead of just calling the draw method of its children.
   * This is the interior color of the RoundedRectangle. It must be
   * different than the exterior color of the RoundedRectangle or the
   * RoundedRectangle will not call its draw method.
   */
  messageContainer.setInteriorColor(messageBackgroundColor);
  // Add the message to the RoundedRectangle.
  messageContainer.addView(message);

  //
  LinearLayout main = new LinearLayout(this);
  LinearLayout.LayoutParams mainLayoutParams = new LinearLayout.LayoutParams(
    LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
  main.setLayoutParams(mainLayoutParams);
  main.setOrientation(LinearLayout.VERTICAL);
  main.setBackgroundColor(mainBackgroundColor);
  main.addView(label);
  main.addView(messageContainer);

  setContentView(main);
 }
}

RoundedRectangleレイアウトオブジェクトのクラスは、次のように定義されています。

/**
 *  A LinearLayout that draws a rounded rectangle around the child View that was added to it.
 */
package android.example;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.widget.LinearLayout;

/**
 * A LinearLayout that has rounded corners instead of square corners.
 * 
 * @author Danny Remington
 * 
 * @see LinearLayout
 * 
 */
public class RoundedRectangle extends LinearLayout {
 private int mInteriorColor;

 public RoundedRectangle(Context p_context) {
  super(p_context);
 }

 public RoundedRectangle(Context p_context, AttributeSet attributeSet) {
  super(p_context, attributeSet);
 }

 // Listener for the onDraw event that occurs when the Layout is drawn.
 protected void onDraw(Canvas canvas) {
  Rect rect = new Rect(0, 0, getWidth(), getHeight());
  RectF rectF = new RectF(rect);
  DisplayMetrics metrics = new DisplayMetrics();
  Activity activity = (Activity) getContext();
  activity.getWindowManager().getDefaultDisplay().getMetrics(metrics);
  float density = metrics.density;
  int arcSize = Math.round(density * 10);

  Paint paint = new Paint();
  paint.setColor(mInteriorColor);

  canvas.drawRoundRect(rectF, arcSize, arcSize, paint);
 }

 /**
  * Set the background color to use inside the RoundedRectangle.
  * 
  * @param Primitive int - The color inside the rounded rectangle.
  */
 public void setInteriorColor(int interiorColor) {
  mInteriorColor = interiorColor;
 }

 /**
  * Get the background color used inside the RoundedRectangle.
  * 
  * @return Primitive int - The color inside the rounded rectangle.
  */
 public int getInteriorColor() {
  return mInteriorColor;
 }

}

5

コトリン

import android.graphics.BitmapFactory
import android.os.Bundle
import android.support.v4.graphics.drawable.RoundedBitmapDrawableFactory
import kotlinx.android.synthetic.main.activity_main.*

val bitmap = BitmapFactory.decodeResource(resources, R.drawable.myImage)
val rounded = RoundedBitmapDrawableFactory.create(resources, bitmap)
rounded.cornerRadius = 20f
profileImageView.setImageDrawable(rounded)

ImageViewCircular を作成するには、次のように変更できますcornerRadius

rounded.isCircular = true

4

最初の回答に感謝します。ここでは、長方形の画像を正方形の画像に変換する(そして丸みを帯びた)変更されたバージョンがあり、塗りつぶしの色がパラメーターとして渡されています。

public static Bitmap getRoundedBitmap(Bitmap bitmap, int pixels, int color) {

    Bitmap inpBitmap = bitmap;
    int width = 0;
    int height = 0;
    width = inpBitmap.getWidth();
    height = inpBitmap.getHeight();

    if (width <= height) {
        height = width;
    } else {
        width = height;
    }

    Bitmap output = Bitmap.createBitmap(width, height, Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, width, height);
    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(inpBitmap, rect, rect, paint);

    return output;
}

4

Glide Libraryを使用している場合、これは役に立ちます:

Glide.with(getApplicationContext())
     .load(image_url)
     .asBitmap()
     .centerCrop()
     .into(new BitmapImageViewTarget(imageView) {
        @Override
        protected void setResource(Bitmap resource) {
          RoundedBitmapDrawable circularBitmapDrawable =
                       RoundedBitmapDrawableFactory.create(getApplicationContext().getResources(), resource);
          circularBitmapDrawable.setCornerRadius(dpToPx(10));
          circularBitmapDrawable.setAntiAlias(true);
          imageView.setImageDrawable(circularBitmapDrawable);
        }
     });


public int dpToPx(int dp) {
  DisplayMetrics displayMetrics = getApplicationContext().getResources().getDisplayMetrics();
  return Math.round(dp * (displayMetrics.xdpi / DisplayMetrics.DENSITY_DEFAULT));
}

Glideバージョン4以降を使用する場合--- RequestOptions requestOptions = new RequestOptions(); requestOptions = requestOptions.transforms(new CenterCrop()、new RoundedCorners(16)); Glide.with(itemView.getContext()).load(item.getImage()).apply(requestOptions).into(mProgramThumbnail);
B.shruti

3

画像がインターネット上にある場合は、glideを使用してRoundedBitmapDrawableFactory(API 21以降-サポートライブラリで利用可能)、次のようにするのが最善の方法です。

 Glide.with(ctx).load(url).asBitmap().centerCrop().into(new BitmapImageViewTarget(imageView) {
    @Override
    protected void setResource(Bitmap res) {
        RoundedBitmapDrawable bitmapDrawable =
             RoundedBitmapDrawableFactory.create(ctx.getResources(), res);
        bitmapDrawable.setCircular(true);//comment this line and uncomment the next line if you dont want it fully cricular
        //circularBitmapDrawable.setCornerRadius(cornerRadius);
        imageView.setImageDrawable(bitmapDrawable);
    }
});

これはエレガントなAPIですが、.centerInsideが欠落しているようです。そのため、このようなパラメーターを定義するためにxmlを使用する方がよいでしょう
carl

これは、画像がリソース内にあり、使用する必要がある場合にも役立ちますcenterCrop
Artyom

3

あなたはImageViewあなたのレイアウトでのみ使用でき、glide、このメソッドを使用して丸い角を適用できます。

あなたのgradle書き込みの最初に、

compile 'com.github.bumptech.glide:glide:3.7.0'

角が丸い画像の場合、

public void loadImageWithCorners(String url, ImageView view) {
    Glide.with(context)
            .load(url)
            .asBitmap()
            .centerCrop()
            .placeholder(R.color.gray)
            .error(R.color.gray)
            .diskCacheStrategy(DiskCacheStrategy.SOURCE)
            .into(new BitmapImageViewTarget(view) {
                @Override
                protected void setResource(Bitmap resource) {
                    RoundedBitmapDrawable circularBitmapDrawable =
                            RoundedBitmapDrawableFactory.create(context.getResources(), resource);
                    circularBitmapDrawable.setCornerRadius(32.0f); // radius for corners
                    view.setImageDrawable(circularBitmapDrawable);
                }
            });
}

呼び出し方法:

loadImageWithCorners("your url","your imageview");

これにより、HTTPリクエストを介して画像をロードするためのライブラリが追加されますが、これは質問には関係ありません。
creativecreatoror18年

どのライブラリがロードされますか?画像の読み込みには、glideとそのスニペットを、glide自体のメソッドとクラスに純粋に基づいて使用できます。他のライブラリを追加する必要はありません
Deep Patel

Glideは主にHTTP経由で画像をロードするためのライブラリですが、OPはの角を丸める方法を知りたいと考えていましたImageView
creativecreatoror18年

2

ここにリダイレクトされる質問の答え:「Androidで円形のImageViewを作成する方法?」

public static Bitmap getRoundBitmap(Bitmap bitmap) {

    int min = Math.min(bitmap.getWidth(), bitmap.getHeight());

    Bitmap bitmapRounded = Bitmap.createBitmap(min, min, bitmap.getConfig());

    Canvas canvas = new Canvas(bitmapRounded);
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setShader(new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
    canvas.drawRoundRect((new RectF(0.0f, 0.0f, min, min)), min/2, min/2, paint);

    return bitmapRounded;
}

2

助けを借りてグライドライブラリとRoundedBitmapDrawableFactoryクラスそれが実現するのは簡単です。円形のプレースホルダー画像を作成する必要がある場合があります。

    Glide.with(context)
        .load(imgUrl)
        .asBitmap()
        .placeholder(R.drawable.placeholder)
        .error(R.drawable.placeholder)
        .into(new BitmapImageViewTarget(imgProfilePicture) {
            @Override
            protected void setResource(Bitmap resource) {
                RoundedBitmapDrawable drawable = RoundedBitmapDrawableFactory.create(context.getResources(),
                        Bitmap.createScaledBitmap(resource, 50, 50, false));
                drawable.setCornerRadius(10); //drawable.setCircular(true);
                imgProfilePicture.setImageDrawable(drawable);
            }
        });

2

GlideとKotlinを使用している場合は、拡張することで達成できます。 RequestBuilder

fun <T> GlideRequest<T>.roundCorners(cornerRadius: Int) =
    apply(RequestOptions().transform(RoundedCorners(cornerRadius)))

そしてとして使用;

 GlideApp.with(context)
            .load(url)
            .roundCorners(context.resources.getDimension(R.dimen.radius_in_dp).toInt())
            .into(imgView)

.roundedCornersが来ないので、他に何かセットアップする必要がありますか?
aNdRO博士2018

roundCorners上記のように拡張機能を追加しましたか?@ Dr.aNdRO
dgngulcan 2018

適切な例を提供してください!この答えは紛らわしいです!
Junia Montana
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.