web-dev-qa-db-ja.com

ImageViewでラウンドコーナー画像を設定する

私はウェブサイトでもっと検索して、以下のような多くの提案を得ました

  • 角の半径とパディングを設定するカスタムスタイルで背景を変更する（画像を長方形として、背景を丸い角として取得）

  • このビットマップと幅を渡すことで画像をデコードし、トリミング機能を使用して、指定された画像をビットマップに変更します（読み込みに時間がかかります）

WhatsApp Chat history list and it has rounded corner images but its loaded with minimum timeを確認しました。

WhatsAppのように丸みを帯びた画像でリストビューテンプレートを作成する最良の方法を教えてください

xml ページでスタイルの詳細を設定して、角が丸い画像を変更することを期待しています。 （画像の幅と高さは60 dpで、リストビューにも約60のアイテムがあります）

参照：

res/mylayout.xml:

<ImageView
        Android:id="@+id/contactssnap"
        Android:layout_width="50dp"
        Android:layout_height="50dp"
        Android:src="@drawable/contactssnap"
        Android:background="@drawable/roundimage" />

res/drawable/roundimage.xml:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle" >
    <solid Android:color="#ffffffff" />
    <stroke
        Android:width="2dp"
        Android:color="#90a4ae" />
    <size
        Android:height="50dp"
        Android:width="50dp" />
    <padding
        Android:bottom="2dp"
        Android:left="2dp"
        Android:right="2dp"
        Android:top="2dp" />
    <corners Android:radius="100dp" />
</shape>

注：サポートされていますAndroid 14から22へのバージョン

androidandroid-listviewandroid-imageviewandroid-xml
11
Ponmalar

Satsからの回答が機能します。ただし、RoundedBitmapDrawableは、scaleType：centerCropのImageViewには適用できません。

更新されました。

Android APIをレベル21で使用している場合。ここに簡単な解決策があります。

1つ目は、imageviewの背景としてドローアブルを作成する

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle">
<corners Android:radius="8dp" />
<solid Android:color="@Android:color/white" />

<stroke
    Android:width="1dp"
    Android:color="@color/colorWhite" />
</shape>

次に、ImageViewのプロパティsetClipToOutlineをtrueに変更します。また、ImageViewの背景として丸いドローアブルを設定します。

それでおしまい。

enter image description here

私のデモでは、この方法を使用して丸めたイメージビューを作成します。ここで見つけることができます cubertoのダイアログ

12
Cuong Vo

CardViewにimageViewを配置し、CardViewのCornerRadiusを設定します。

<Android.support.v7.widget.CardView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:orientation="vertical"
        app:cardCornerRadius="8dp"
        app:cardElevation="0dp">

        <ImageView
            Android:id="@+id/imgTourismHr"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:scaleType="fitXY" />

    </Android.support.v7.widget.CardView>
8
Mostafa Azadi

googleが提供する標準APIを使用して、循環ImageViewを作成できます。

ImageView imageView = (ImageView) findViewById(R.id.circleImageView);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image);
RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(getResources(), bitmap);
roundedBitmapDrawable.setCircular(true);
imageView.setImageDrawable(roundedBitmapDrawable);

また参照 https://www.youtube.com/watch?v=zVC-YAnDlgk

7
sats

角の丸い境界線で出力された角丸四角形の画像出力を参照

今度は丸みを帯びたボーダーで丸みのある長方形の画像を設定します

app：cardCornerRadius = "30dp"、app：cardUseCompatPadding = "true"、 app：cardElevation = "0dp"。

以下のXmlコードを参照してください

            <androidx.cardview.widget.CardView
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:layout_gravity="center"
                app:cardCornerRadius="30dp"
                app:cardUseCompatPadding="true"
                app:cardElevation="0dp"
                Android:layout_margin="5dp"
                >
                <ImageView
                    Android:layout_width="match_parent"
                    Android:layout_height="match_parent"
                    Android:src="@drawable/temp"
                    Android:scaleType="fitXY"
                    Android:layout_gravity="center"
                    />
            </androidx.cardview.widget.CardView>
        </androidx.cardview.widget.CardView>
2
CodeInsideCofee

RequestImages.circleCropTransform（）を使用してネットワーク画像をロードする際にGlideを使用する人のための簡単な解決策：

Glide.with(context)
     .load(imageUrl)
     .apply(RequestOptions.circleCropTransform())
     .into(object : CustomViewTarget<ImageView, Drawable>(imageView) {
            override fun onLoadFailed(errorDrawable: Drawable?) {
            }
            override fun onResourceCleared(placeholder: Drawable?) {
            }
            override fun onResourceReady(resource: Drawable, transition: Transition<in Drawable>?) {
                imageView.setImageDrawable(resource)
            }
        })
0
giang nguyen

あなたはアンドロイドで9パッチテクニックをチェックしましたか？

角の丸いwhatsアプリのバブルチャットのようなものを作成しようとしている場合は、XMLビットマップデコーダーを使用する代わりに、この手法を使用することをお勧めします。

次に例を示します。 Link

この例によれば、9つのパッチジェネレーターを使用して、ビューのコンテンツと画面のサイズに合わせて自動的にサイズ変更される独自のカスタム形状とビットマップ画像を作成できます。画像の選択された部分は、画像内に描かれたインジケーターを水平方向または垂直方向にスケーリングします。

enter image description here

0
Hamid Reza