Question

如何具有这样的自定义圆形图像视图 custom circular imageview

我是这样写xml的，还检查了我的卡是否正确

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
xmlns:cardview="http://schemas.android.com/apk/res-auto"
android:id="@+id/mood_cardView_id"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_margin="10dp"
android:foreground="?android:attr/selectableItemBackground"
app:ignore="NamespaceTypo"
cardview:cardCornerRadius="10dp"
cardview:cardElevation="8dp">

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:background="@android:color/black"
        android:orientation="vertical"
        >
        <TextView
            android:id="@+id/titleCat"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:textColor="#FFF"
            android:text="Romance"
            android:textAlignment="center"
            android:layout_margin="5dp"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"



    </LinearLayout>

Answer 1

您可以用白色边框制作一个简单的圆圈，并用形状制作透明的内容。

// res / drawable / circle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="1.9"
    android:useLevel="false" >
    <solid android:color="@android:color/transparent" />

    <stroke
        android:width="10dp"
        android:color="@android:color/white" />
</shape>

然后使图层列表可绘制，并将其作为背景放置到您的imageview中。

// res / drawable / img.xml

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

<item android:drawable="@drawable/circle"/>    
<item android:drawable="@drawable/ic_launcher"/>

并把它作为您的imageview背景。

   <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/img"/>

此代码可能有助于适合您的视图..

Answer 2

然后，您必须在XML布局中使用此RoundedImageView。这将用于RoundedImageView，但在RoundedImageView上应使用framelayout

在顶部使用此FrameLayout

    <FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

      <com.package.RoundedImageView
                            android:id="@+id/pic"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:layout_gravity="center"
                            android:scaleType="fitXY"
                            android:src="@mipmap/user_contact"
                            android:visibility="visible">
        </com.package.RoundedImageView>

</FrameLayout>

然后将此类放在您的项目中

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.AppCompatImageView;
import android.util.AttributeSet;
import android.util.Log;

public class RoundedImageView extends AppCompatImageView {

    private static final String TAG = RoundedImageView.class.getSimpleName();

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

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

    public RoundedImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        try {
            Drawable drawable = getDrawable();

            if (drawable == null) {
                return;
            }

            if (getWidth() == 0 || getHeight() == 0) {
                return;
            }

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

            if (w <= 0 || h <= 0) {
                return;
            }

            if (drawable instanceof BitmapDrawable) {
                Bitmap b = ((BitmapDrawable) drawable).getBitmap();
                bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
            } else if (drawable instanceof ColorDrawable) {
                bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
                Canvas c = new Canvas(bitmap);
                c.drawColor(((ColorDrawable) drawable).getColor());

            } else {
                return;
            }

            Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, Math.min(w, h));
            canvas.drawBitmap(roundBitmap, 0, 0, null);
        } catch (Exception e) {
            Log.e(TAG, "onDraw Exception", e);
        }

    }

    private 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("#edebec"));
        canvas.drawCircle(finalBitmap.getWidth() / 2,
                finalBitmap.getHeight() / 2,
                finalBitmap.getWidth() / 2, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(finalBitmap, rect, rect, paint);

        return output;
    }
}

如何在Android中使用圆角矩形自定义图像视图

2 个答案: