如何在圆形图像视图中添加图标

Question

我有两个圆形图像视图，一个是包含配置文件pic，另一个是用于相机。以下是我的XML文件：

1. Welocome.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg"
    android:orientation="vertical"
    tools:context=".activity.WelcomeActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/margin40"
        android:text="Welcome to Almachat"
        android:textColor="#ffffff"
        android:textSize="25dp" />

    <FrameLayout
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/margin10">

        <com.almabay.almachat.circularImageView.CircularImageView
            android:id="@+id/profilePic"
            android:layout_width="170dp"
            android:layout_height="170dp"
            android:layout_gravity="bottom|center_horizontal" />

        <com.almabay.almachat.circularImageView.CircularImageView
            android:id="@+id/iv_camera"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_gravity="top|right"
            android:layout_marginTop="@dimen/margin30"
            android:background="@drawable/color"
            />
    </FrameLayout>

    <TextView
        android:id="@+id/txtName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/margin20"
        android:textColor="#ffffff"
        android:textSize="30sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/txtSomeText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Some static text will be here"
        android:textColor="#ffffff"
        android:textSize="20sp" />

    <Button
        android:id="@+id/btnContinue"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/margin20"
        android:background="#F7AE21"
        android:padding="@dimen/padding20"
        android:text="Continue"
        android:textColor="#ffffff" />
</LinearLayout>

2.color.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <gradient
        android:angle="270"
        android:endColor="#F7AE21"
        android:startColor="#F7AE21" />
    <stroke
        android:width="10dp"
        android:color="#F7AE21" ></stroke>
</shape>

这给了我以下设计：

我想添加一个相机图标，如​​下图所示：

circular image view.Java

public class CircularImageView extends ImageView {

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

    @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(Bitmap.Config.ARGB_8888, true);

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

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

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

        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
                finalBitmap.getHeight());

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

        return output;
    }
}

如何在圆形图像视图中添加相机图标？如果我在后台设置相机图标，则仅显示相机图标。没有圆形图像视图。

使用以下代码后：

<com.almabay.almachat.circularImageView.CircularImageView
    android:id="@+id/iv_camera"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_gravity="top|right"
    android:layout_marginTop="@dimen/margin30"
    android:background="@drawable/color"
    android:src="@drawable/camera" />

我得到以下屏幕：

如何设置图像大小以适应CircularImageView内部。

Answer 1

您正在使用圆形ImageView的库。因此，您需要检查是否有任何属性在ImageView中设置图标。无论如何，这是你如何实现理想的行为。您可以添加内部带有相机图标的图像，而不是设置背景颜色。

<com.almabay.almachat.circularImageView.CircularImageView
    android:id="@+id/iv_camera"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_gravity="top|right"
    android:layout_marginTop="@dimen/margin30"
    android:background="@drawable/image_with_camera" />

您可能尝试获得此行为的另一种方法是将摄像机图像设置为src属性。

<com.almabay.almachat.circularImageView.CircularImageView
    android:id="@+id/iv_camera"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_gravity="top|right"
    android:layout_marginTop="@dimen/margin30"
    android:background="@drawable/color"
    android:padding="5dp"
    android:src="@drawable/image_camera" />

Answer 2

逻辑在这里使用框架布局

 <FrameLayout
                    android:layout_width="150dp"
                    android:layout_height="150dp"
                    android:layout_gravity="center"
                    android:layout_marginTop="10dp">

                    <xxx.xxxx.CircleImageView
                        android:id="@+id/profilePic"
                        android:layout_width="150dp"
                        android:layout_height="150dp"
                        android:src="@drawable/male"
                        android:layout_gravity="bottom|center_horizontal" />

                    <xxx.xxx.CircleImageView
                        android:id="@+id/iv_camera"
                        android:layout_width="40dp"
                        android:layout_height="40dp"
                        android:src="@drawable/editfloat"
                        android:layout_gravity="top|right"

                        />
                </FrameLayout>

Answer 3

使用这个，来自melanke回答How to create a circular ImageView in Android?

public class MLRoundedImageView extends ImageView {

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

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

public MLRoundedImageView(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(Bitmap.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) {
        float smallest = Math.min(bmp.getWidth(), bmp.getHeight());
        float factor = smallest / radius;
        sbmp = Bitmap.createScaledBitmap(bmp, (int)(bmp.getWidth() / factor), (int)(bmp.getHeight() / factor), false);
    } else {
        sbmp = bmp;
    }

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

    final int color = 0xffa19774;
    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(Mode.SRC_IN));
    canvas.drawBitmap(sbmp, rect, rect, paint);

    return output;
}}