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

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>

这给了我以下设计:

我想添加一个相机图标,如​​下图所示:

CircularImageView.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

逻辑在这里使用框架布局

 <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 2

您正在使用 Circular 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" />