web-dev-qa-db-ja.com

白い円形の境界線で画像を円形にする

画像を円形にして白い円形の境界線を付ける方法は？ 2つの画像ビューを使用する必要がありますか。1つは画像用で、もう1つは白い境界線用です。これを行う他の方法はありますか？

androidlayoutimageviewgeometrydrawing
11
user2875895

これを試して...

public static Bitmap getCircularBitmapWithWhiteBorder(Bitmap bitmap,
        int borderWidth) {
    if (bitmap == null || bitmap.isRecycled()) {
        return null;
    }

    final int width = bitmap.getWidth() + borderWidth;
    final int height = bitmap.getHeight() + borderWidth;

    Bitmap canvasBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    BitmapShader shader = new BitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP);
    Paint paint = new Paint();
    Paint.setAntiAlias(true);
    Paint.setShader(shader);

    Canvas canvas = new Canvas(canvasBitmap);
    float radius = width > height ? ((float) height) / 2f : ((float) width) / 2f;
    canvas.drawCircle(width / 2, height / 2, radius, Paint);
    Paint.setShader(null);
    Paint.setStyle(Paint.Style.STROKE);
    Paint.setColor(Color.BLUE);
    Paint.setStrokeWidth(borderWidth);
    canvas.drawCircle(width / 2, height / 2, radius - borderWidth / 2, Paint);
    return canvasBitmap;
}
23
Gopal Gopi

最初に以下の行をbuild.gradleファイルに追加します

implementation 'de.hdodenhof:circleimageview:2.2.0'

次に、[〜＃〜] xml [〜＃〜]コードをxmlファイルに追加します。

<de.hdodenhof.circleimageview.CircleImageView
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/profile_image"
    Android:layout_width="96dp"
    Android:layout_height="96dp"
    Android:src="@drawable/profile"
    app:civ_border_width="2dp"
    app:civ_border_color="#FF000000"/>

enter image description here

6
Md Nakibul Hassan

まず、コードでCirculat画像を取得します。次に、このxmlを適用します。

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="oval" >
    <gradient Android:startColor="#333440" Android:endColor="#333440"
        Android:angle="270"/>
</shape>

次に、相対レイアウトを追加し、それに画像ビューを追加します。それを相対レイアウトの中央に配置します。この円の形状を画像ビューの背景として設定します。次に、前に追加した画像ビューの上に円形の画像ビューを配置します。中央にも配置します。 imageview marginを使用すると、目的のボーダー効果が得られます。これがお役に立てば幸いです。

5
SweetWisher ツ

これは最善の方法ではない可能性があり、多くのプロパティを変更できない可能性がありますが、最も簡単な方法です。私はちょうど this ライブラリを使用し、境界線もある円形のイメージビューを作成しました。

だから、これは私の解決策です：

最初、これをbuild.grandle：

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

2番目、これを.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" />

私の.Javaファイル、これは画像をCircularImageViewに取得または設定する方法です。

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

photo.setBackgroundResource(R.drawable.female);

これで、白い境界線のある円形のイメージを作成しました。

4
Marialena

いいえ、2つの画像ビューを使用する必要はありません。1つは画像用で、もう1つは白い境界線用です。以下のような新しいXMLファイルを1つ作成できます

border.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
<solid Android:color="#FFFFFF" />
<stroke Android:width="5dp" Android:color="#000000" />
<padding Android:left="5dp" Android:top="5dp" Android:right="5dp"
    Android:bottom="5dp" />
</shape>

そしてそれをあなたのイメージビューに設定します。下の行を画像ビューに追加するように。

Android:background="@drawable/border"
1
InnocentKiller

これがいい tutorial です。

このチュートリアルでは、メソッドを使用します：-

/ * *円形の画像を作成しています* /

public Bitmap getRoundedShape(Bitmap scaleBitmapImage) {
  // TODO Auto-generated method stub
  int targetWidth = 50;
  int targetHeight = 50;
  Bitmap targetBitmap = Bitmap.createBitmap(targetWidth, 
                            targetHeight,Bitmap.Config.ARGB_8888);

                Canvas canvas = new Canvas(targetBitmap);
  Path path = new Path();
  path.addCircle(((float) targetWidth - 1) / 2,
  ((float) targetHeight - 1) / 2,
  (Math.min(((float) targetWidth), 
                ((float) targetHeight)) / 2),
          Path.Direction.CCW);

                canvas.clipPath(path);
  Bitmap sourceBitmap = scaleBitmapImage;
  canvas.drawBitmap(sourceBitmap, 
                                new Rect(0, 0, sourceBitmap.getWidth(),
    sourceBitmap.getHeight()), 
                                new Rect(0, 0, targetWidth,
    targetHeight), null);
  return targetBitmap;
 }

ImageViewの周囲にボーダーを提供する場合：

このxmlをドローアブルフォルダー内に追加します。

=> rounded.xml

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

    <solid Android:color="@Android:color/white" />

    <stroke
        Android:width="3dip"
        Android:color="#FF0000" />

    <corners Android:radius="10dp" />

    <padding
        Android:bottom="0dp"
        Android:left="0dp"
        Android:right="0dp"
        Android:top="0dp" />

</shape>

希望、これは役立ちます

1
Praveen Sharma

circular image view with rounded white border

これを使用することで linkFrameLayoutとtwoRoundedImageViewを使用して正常に作成できました。私がやったことの背後にあるロジックは、ラッパービューであり、もう1つはプロファイル画像を含むビューです。これが私のコードです

XMLコード：

_    <FrameLayout
    Android:id="@+id/llImageProfile"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_marginLeft="20dp"
    Android:layout_marginTop="40dp"
    Android:foregroundGravity="center">


    <com.pepperpk.frt.mallpk.custom.RoundedImageView
        Android:id="@+id/circleViewOverlay"
        Android:layout_width="100dp"
        Android:layout_height="100dp"
        Android:layout_gravity="center" />

    <com.pepperpk.frt.mallpk.custom.RoundedImageView
        Android:id="@+id/circleView"
        Android:layout_width="95dp"
        Android:layout_height="95dp"
        Android:layout_gravity="center" />
</FrameLayout>
_

Javaコード：

_profileWrapper.setImageResource(R.drawable.white_background);
profile.setImageResource(R.drawable.profile);
_

それが役に立てば幸いです、もし混乱があれば下にコメントしてください。

0
Syed Raza Mehdi

ImageViewをCardView内に保持し、それに応じてCardViewの半径を調整してみました。

NetworkImageViewはVolley Libraryのものです。 ImageViewでも同様に機能するはずです。

<Android.support.v7.widget.CardView
            Android:layout_width="105dp"
            Android:layout_height="105dp"
            Android:layout_margin="5dp"
            Android:elevation="0dp"
            Android:id="@+id/card_image_view"
            app:cardCornerRadius="53dp"
            Android:innerRadius="0dp"
            Android:background="@color/reco_widget_search_background"
            Android:shape="ring"
            Android:thicknessRatio="1">

            <NetworkImageView
                Android:id="@+id/circle_networkImageViewProduct"
                Android:layout_width="105dp"
                Android:layout_height="105dp"
                Android:backgroundTint="@color/white"
                Android:tint="@color/white"
                Android:scaleType="fitXY"
                Android:layout_gravity="center"
                Android:visibility="gone"
                />
        </Android.support.v7.widget.CardView>
0
Max Droid
Try This
    public static Bitmap createRoundImage(Bitmap loadedImage) {
    System.out.println("loadbitmap" + loadedImage);
    loadedImage = Bitmap.createScaledBitmap(loadedImage, 100, 100, true);
    Bitmap circleBitmap = Bitmap.createBitmap(loadedImage.getWidth(),
            loadedImage.getHeight(), Bitmap.Config.ARGB_8888);
    BitmapShader shader = new BitmapShader(loadedImage,
            Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
    Paint paint = new Paint();
    Paint.setAntiAlias(true);
    Paint.setShader(shader);

    Canvas c = new Canvas(circleBitmap);
    c.drawCircle(loadedImage.getWidth() / 2, loadedImage.getHeight() / 2,
            loadedImage.getWidth() / 2, Paint);
    return circleBitmap;
}
0
Palak