Android:圈子个人资料图片

时间:2016-06-24 10:55:27

标签: android androiddesignsupport

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

one

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

谢谢。

6 个答案:

答案 0 :(得分:15)

您可以在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"/>

答案 1 :(得分:6)

这是一个循环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"/>

答案 2 :(得分:1)

将此代码用于圆形图像:

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

您可以根据您的要求更改其他因素。 基本上它用于设置边框到图像或任何布局。但是它的工作,你所要做的就是根据你的选择设置半径,它会圈出你的图像。如果你不想要你可以删除边框。

答案 3 :(得分:1)

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;
 }

 }

答案 4 :(得分:0)

如果您使用的是协调器布局,可以将此行添加到CircleImageView:

/[wildfly-location]/standalone/tmp

答案 5 :(得分:0)

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

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