Android:圈头像

Question

我正在尝试为我的应用程序制作个人资料页面。这是我要创建的示例。

我想知道如何对齐封面底部带圆圈的图片。我很困惑。

谢谢。

Answer 1

您可以轻松地将此库添加到您的 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" />

您可以根据需要更改其他因素。基本上它用于为图像或任何布局设置边框。但它的工作，你所要做的就是根据你的选择设置半径，它会围绕你的 image.You 如果你不想要可以删除边框。

Answer 3

这是一个 class 的循环 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

如果您使用的是 Coordinator Layout，您可以将此行添加到您的 CircleImageView：

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

Answer 6

幸运的是 Android 已经支持圆形而无需声明半径。只需确保您的 ImageView 是方形的：

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

Answer 7

我之前也遇到过同样的问题。我知道它是由androidx提供的CardView。

使用androidx的代码如下

<androidx.cardview.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:cardCornerRadius="50dp"
    app:cardElevation="0dp">

    <ImageView
        android:id="@+id/avatar"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:scaleType="fitXY"
        android:src="@drawable/avatar"/>

</androidx.cardview.widget.CardView>

Android:圈头像

Android: circle profile picture

android

androiddesignsupport