Question

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

在屏幕截图中，您可以看到我们有一个圆形图像视图，我们正在显示用户的个人资料图片。在个人资料图片中，我们有一个绿色的小圆圈，表示用户在线。我正在使用跟随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>

在imageview的背景中使用

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

现在正在为我工作。

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

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

这只是我的应用程序中的一个示例。您可以相应地修改它，它符合您的目的。 *我用一个小绿色图像显示为在线指示器。

Answer 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()
        }

如何使用一些指定的背景颜色添加动态圆形图像视图

3 个答案: