Android：サークルプロフィール画像

Question

私のアプリケーションのプロフィールページを作ろうとしています。ここに私が作成したいサンプルがあります。

私はカバーの下にある丸で囲まれた画像を配置する方法を知りたいです。よくわかりません。

ありがとうございます。

Answer 1

あなたはeasillyあなたbuild.gradleでこのライブラリを追加することができます。

compile 'de.hdodenhof:circleimageview:1.2.1'。

使用

<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"/> 

Answer 2

円画像は、このコードを使用する：

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

     <stroke android:width="1dp" android:color="#1B5E20" /> 
     <corners android:radius="50dp"/> 
     <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" /> 
    </shape> 

と画像の背景に設定されます。

<ImageView 
       android:background="@drawable/shape" 
       android:id="@+id/btnMore" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" 
       android:src="@drawable/more_apps" /> 

あなたの要件によって他の要因を変更することができます。 基本的には、境界線をイメージまたはレイアウトに設定するために使用されます。しかし、その仕事、あなたがしなければならないことはあなたの選択によって半径に設定され、それはあなたのイメージを丸くします。

Answer 3

ここには、図書館を引っ越す必要のない円形ImageViewのクラスがあります。

public class CircularImageView extends ImageView 
{ 

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

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

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

@Override 
protected void onDraw(@NonNull Canvas canvas) 
{ 

    Drawable drawable = getDrawable(); 

    if (drawable == null) 
    { 
     return; 
    } 

    if (getWidth() == 0 || getHeight() == 0) 
    { 
     return; 
    } 
    Bitmap b = ((BitmapDrawable) drawable).getBitmap(); 
    Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true); 

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

    Bitmap roundBitmap = getCroppedBitmap(bitmap, w); 
    canvas.drawBitmap(roundBitmap, 0, 0, null); 

} 

private static Bitmap getCroppedBitmap(@NonNull Bitmap bmp, int radius) 
{ 
    Bitmap bitmap; 

    if (bmp.getWidth() != radius || bmp.getHeight() != radius) 
    { 
     float smallest = Math.min(bmp.getWidth(), bmp.getHeight()); 
     float factor = smallest/radius; 
     bitmap = Bitmap.createScaledBitmap(bmp, (int) (bmp.getWidth()/factor), (int) (bmp.getHeight()/factor), false); 
    } 
    else 
    { 
     bitmap = bmp; 
    } 

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

    final Paint paint = new Paint(); 
    final Rect rect = new Rect(0, 0, radius, radius); 

    paint.setAntiAlias(true); 
    paint.setFilterBitmap(true); 
    paint.setDither(true); 
    canvas.drawARGB(0, 0, 0, 0); 
    paint.setColor(Color.parseColor("#BAB399")); 
    canvas.drawCircle(radius/2 + 0.7f, 
      radius/2 + 0.7f, radius/2 + 0.1f, paint); 
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); 
    canvas.drawBitmap(bitmap, rect, rect, paint); 

    return output; 
} 

} 

使用例：

<your.package.name.CircularImageView 
        android:id="@+id/circleImage" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_centerInParent="true"/> 

Answer 4

import android.content.Context; 
import android.graphics.Bitmap; 
import android.graphics.Bitmap.Config; 
import android.graphics.Canvas; 
import android.graphics.Color; 
import android.graphics.Paint; 
import android.graphics.PorterDuff.Mode; 
import android.graphics.PorterDuffXfermode; 
import android.graphics.Rect; 
import android.graphics.drawable.BitmapDrawable; 
import android.graphics.drawable.Drawable; 
import android.util.AttributeSet; 
import android.widget.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 defStyle) { 
super(context, attrs, defStyle); 
} 

@Override 
protected void onDraw(Canvas canvas) { 

Drawable drawable = getDrawable(); 

if (drawable == null) { 
    return; 
} 

if (getWidth() == 0 || getHeight() == 0) { 
    return; 
} 
Bitmap b = ((BitmapDrawable)drawable).getBitmap() ; 
Bitmap bitmap = b.copy(Config.ARGB_8888, true); 

int w = getWidth(), h = getHeight(); 
Bitmap roundBitmap = getCroppedBitmap(bitmap, w); 
canvas.drawBitmap(roundBitmap, 0,0, null); 

} 

public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) { 
Bitmap sbmp; 
if(bmp.getWidth() != radius || bmp.getHeight() != radius) 
    sbmp = Bitmap.createScaledBitmap(bmp, radius, radius, false); 
else 
    sbmp = bmp; 
Bitmap output = Bitmap.createBitmap(sbmp.getWidth(), 
     sbmp.getHeight(), Config.ARGB_8888); 
Canvas canvas = new Canvas(output); 

final Paint paint = new Paint(); 
final Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight()); 
paint.setAntiAlias(true); 
paint.setFilterBitmap(true); 
paint.setDither(true); 
canvas.drawARGB(0, 0, 0, 0); 
paint.setColor(Color.parseColor("#BAB399")); 
canvas.drawCircle(sbmp.getWidth()/2+0.7f, sbmp.getHeight()/2+0.7f, 
     sbmp.getWidth()/2+0.1f, paint); 
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN)); 
canvas.drawBitmap(sbmp, rect, rect, paint); 


     return output; 
} 

} 

Answer 5

あなたはあなたのCircleImageViewにこの行を追加することができコーディネーターのレイアウトを使用している場合：

app:layout_anchor="@id/your_cover_id" 
    app:layout_anchorGravity="bottom|center" 

Answer 6

幸いにもアンドロイドは既に円形をサポートしています半径を宣言する必要はありません。 ImageViewが正方形であることを確認してください：

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval"> 
    <stroke 
     android:width="1dp" 
     android:color="#ff0000"/> 
</shape>