如何创建具有以下要求的可绘制圆圈?

时间:2015-05-11 07:04:08

标签: android xml drawable shape

enter image description here我正在尝试创建一个圆形的drawable作为配置文件图片的叠加(圆形图像) 我为圆形可绘制叠加层编写了以下代码,

 <?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape>
            <solid android:color="@color/light_blue_bg" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <stroke
                android:width="2dp"
                android:color="@android:color/white" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</layer-list>

请参阅以下屏幕图像中的输出, enter image description here

已知问题:我使用@ color / light_blue_color创建一个矩形,它具有内部椭圆形状,笔触颜色和内部实心透明色,但由于外部矩形颜色,内部圆形透明度不显示图片。 如果我删除外部矩形颜色,实际正方形图片将从圆形叠加中出来。

有没有办法单独给外圆形部分涂上颜色?

任何帮助都将受到高度赞赏

4 个答案:

答案 0 :(得分:1)

@Sreedhu Madhu ....你必须自定义你的imageview并在位图和画布上工作才能实现这一点。

虽然我建议您在github和android-arsenal上使用 Henning Dodenhof 发布的库之一... CircleImageView

另一方面你可以看看这是怎么做的......使用这个课程..

Custom Class for Circular ImageView

imp方法是setup()和onDraw()

答案 1 :(得分:0)

我认为只用XML做这件事是不可能的。但是你可以在代码中掩盖它。有关示例,请参阅this tutorial

答案 2 :(得分:0)

对于圆形(Circled imageView),将此类添加到源

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class RoundedImageView extends ImageView {

       public RoundedImageView(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(), 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(Mode.SRC_IN));
              canvas.drawBitmap(finalBitmap, rect, rect, paint);

              return output;
       }

}

然后将您的ImageView更改为布局文件中的包名和类名(RoundedImageView),例如

<com.mypackege.RoundedImageView
        android:id="@+id/imageView_round"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="15dp"
        android:src="@drawable/my_image" />

希望这会奏效。

答案 3 :(得分:0)

尝试这样的事情,它对我有用!

在您的xml中放置此自定义RoundImage:

<com.example.hkh.learningandroid.RoundedImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@drawable/person"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/MyImageView" />

并创建新类并将其命名为RoundImageView:

public class RoundedImageView extends ImageView {

public RoundedImageView(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;

 }
}

然后运行,我希望它会有所帮助,它会根据您的需要提供预期的圆形图像