如何添加具有某些指定背景颜色的动态圆形图像视图答案

【问题标题】：How to add dynamically circular image view with some specified background color如何添加具有某些指定背景颜色的动态圆形图像视图
【发布时间】：2016-02-19 09:37:01
【问题描述】：

我正在开发一个即时聊天应用程序。我必须实现以下屏幕。

在屏幕截图中，您可以看到我们有一个圆形图像视图，其中显示了用户的个人资料图片。在个人资料图片上，我们有一个绿色的小圆圈，表示用户在线。我正在使用以下xml：

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="@dimen/padding10">

    <FrameLayout
        android:id="@+id/frame"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="@dimen/margin10">

        <com.almabay.almachat.circularImageView.CircularImageView
            android:id="@+id/imgContact"
            android:layout_width="80dp"
            android:layout_height="80dp "
            android:layout_gravity="bottom|left" />

        <com.almabay.almachat.circularImageView.CircularImageView
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:layout_gravity="top|right"
            android:background="#78dd63" />

    </FrameLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/margin10"
        android:layout_toRightOf="@+id/frame"
        android:orientation="vertical"
        android:padding="@dimen/padding5">

        <TextView
            android:id="@+id/txtNam"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Neeraj"
            android:textSize="15sp" />

        <TextView
            android:id="@+id/stats"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin10"
            android:text="Welocme to Almachat" />

    </LinearLayout>

</RelativeLayout>

但我得到的屏幕如下所示：

在这里您可以看到绿色不是以圆形显示。它以方形显示。但是我在设计中设置了颜色，在实际实践中我想在用户将其设置为绿色时使用 java 代码在线。我已经采取了圆形图像视图。仍然背景颜色显示为正方形。请指导我如何解决此问题。

解决了问题：

创建一个名为 circle_green.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="@color/green_color"
        android:startColor="@color/green_color" />
    <stroke
        android:width="2dp"
        android:color="@color/while_color"></stroke>
</shape>

在图像视图的背景中使用它

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="@dimen/padding10">


<com.almabay.almachat.circularImageView.CircularImageView
    android:id="@+id/imgContact"
    android:layout_width="80dp"
    android:layout_height="80dp "
    android:layout_alignParentLeft="true" />

<ImageView
    android:id="@+id/online"
    android:layout_width="15dp"
    android:layout_height="15dp"
    android:layout_alignRight="@+id/imgContact"
    android:layout_alignTop="@+id/imgContact"
    android:background="@drawable/circle_green" />

它现在对我有用。

【问题讨论】：

使用相对布局而不是 FrameLayout
@Madhur：你能详细解释一下吗？
建议你相同（可绘制文件作为背景）

标签： android imageview

【解决方案1】：

你需要像这样创建一个CustomImageView...

public class CircularImageView extends ImageView {

public CircularImageView(Context context,AttributeSet attributeSet){
    super(context,attributeSet);
}

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

并像这样在您的 xml 布局中使用 imageview 类...

   <com.xxxx.xxx.xxxx.CircularImageView
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:id="@+id/std_img"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="15dp"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="20dp"/>

【讨论】：

请检查我的 xml 代码。我已经使用了圆形图像视图，但我的问题是当我将绿色背景颜色设置为圆形图像视图时，它没有显示为圆形，而是显示为正方形。您可以查看提到的屏幕截图。
使用可绘制的背景圆圈.. 像这样并用它来代替绿色背景色，像这样... android:background="@drawable/circle"
谢谢亲爱的帮助。

【解决方案2】：

你可以这样做：

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/imgUserImage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:scaleType="centerCrop"
            android:src="@drawable/user_temp" />

        <ImageView
            android:id="@+id/imgOnlineIndicator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/imgUserImage"
            android:layout_alignTop="@+id/imgUserImage"
            android:layout_marginLeft="@dimen/margin_small"
            android:src="@drawable/online_indicator" />

    </RelativeLayout>

这只是我的应用程序中的一个示例。您可以相应地对其进行修改，它可以满足您的目的。 * 我使用了一个绿色的小图像作为在线指示器。

【讨论】：

即使您的答案似乎效果很好，但我使用了不同的方法来解决问题。请检查我编辑的代码。

【解决方案3】：

您可以使用强大的约束布局。

优点是：

不同布局尺寸的一致性。
简单实施。
您可以动画点=）。

创建一个名为 circle_green.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="@color/green_color"
        android:startColor="@color/green_color" />
    <stroke
        android:width="2dp"
        android:color="@color/while_color"></stroke>
</shape>

在约束布局中对齐 ImageView 上的在线点。

<de.hdodenhof.circleimageview.CircleImageView
    android:id="@+id/profile_image"
    android:layout_width="@dimen/avatar_profile_height"
    android:layout_height="@dimen/avatar_profile_height"
    android:layout_marginTop="@dimen/margin_medium"
    android:src="@drawable/avatar_1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/online"
    android:layout_width="12dp"
    android:layout_height="12dp"
    android:background="@drawable/circle_green"
    android:contentDescription="@string/online_status"
    app:layout_constraintCircle="@id/profile_image"
    app:layout_constraintCircleAngle="150"
    app:layout_constraintCircleRadius="@dimen/avatar_profile_radius" />

忽略 ImageView 不受约束的警告。

最后，为了制作动画，请执行以下操作：

view.button_home.setOnClickListener {
            //1
            val layoutParams = view.online.layoutParams as ConstraintLayout.LayoutParams
            val startAngle = layoutParams.circleAngle
            val endAngle = startAngle + 360

            //2
            val anim = ValueAnimator.ofFloat(startAngle, endAngle)
            anim.addUpdateListener { valueAnimator ->

                //3
                val animatedValue = valueAnimator.animatedValue as Float
                val layoutParam = view.online.layoutParams as ConstraintLayout.LayoutParams
                layoutParam.circleAngle = animatedValue
                view.online.layoutParams = layoutParam

                //4
                view.online.rotation = (animatedValue % 360 - 150)
            }
            //5
            anim.duration = 2000

            //6
            anim.interpolator = LinearInterpolator()
            anim.start()
        }

【讨论】：