在圆形图像视图中显示图像时会拉伸

时间:2013-08-28 05:34:14

标签: android android-layout

下面是我的扩展ImageView的RoundedImageView类:

public class RoundedImageView extends ImageView {

public RoundedImageView(Context context) {
    super(context);
    // TODO Auto-generated constructor stub
}

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

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

@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 =  getCroppedBitmap(bitmap, w);
   // roundBitmap= ImageUtils.setCircularInnerGlow(roundBitmap, 0xFFBAB399, 4, 1);
    canvas.drawBitmap(roundBitmap, 0,0, null);

}

public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
    Bitmap sbmp;
    if(bmp.getWidth() != radius || bmp.getHeight() != radius)
        sbmp = Bitmap.createScaledBitmap(bmp, radius, radius, false);
    else
        sbmp = bmp;


    Bitmap output = Bitmap.createBitmap(sbmp.getWidth(),
            sbmp.getHeight(), Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xffa19774;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight());

    paint.setAntiAlias(true);
    paint.setFilterBitmap(true);
    paint.setDither(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(Color.parseColor("#BAB399"));
    canvas.drawCircle(sbmp.getWidth() / 2+0.7f, sbmp.getHeight() / 2+0.7f,
            sbmp.getWidth() / 2+0.1f, paint);
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(sbmp, rect, rect, paint);


            return output;
}

我的xml代码是:

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

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="horizontal" >

        <com.example.scaletypedemo.RoundedImageView
            android:layout_marginLeft="30dp"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_centerInParent="true"
            android:scaleType="centerCrop"
            android:src="@drawable/a"
            android:adjustViewBounds="true" />

         <ImageView
                android:layout_marginLeft="50dp"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:scaleType="centerCrop"
                android:src="@drawable/a" />

    </LinearLayout>

</RelativeLayout>

所以,问题是,如果我使用ImageView,显示的图像不会被拉伸但是如果我使用相同的图像并将其显示在RoundedImageView中并保持所有属性相同;图像被拉伸,如下面的屏幕截图所示:

enter image description here

请帮助防止RoundedImageView中显示的图像拉伸...........我在这一点上非常困难。

编辑:应用正红的解决方案后,它解决了拉伸问题,但未显示完整的一轮。

enter image description here

提前致谢!!!

2 个答案:

答案 0 :(得分:13)

您应该按宽度/高度速率调整位图大小。

---- ---- EDITED 这将是一种更灵活的方式。

@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();
    int radius = w < h ? w : h;

    Bitmap roundBitmap = getCroppedBitmap(bitmap, radius, w, h);
    // roundBitmap= ImageUtils.setCircularInnerGlow(roundBitmap, 0xFFBAB399,
    // 4, 1);
    canvas.drawBitmap(roundBitmap, 0, 0, null);

}

public static Bitmap getCroppedBitmap(Bitmap bmp, int radius, int w, int h) {
    Bitmap sbmp;
    if (bmp.getWidth() != radius || bmp.getHeight() != radius) {
        float _w_rate = 1.0f * radius / bmp.getWidth();
        float _h_rate = 1.0f * radius / bmp.getHeight();
        float _rate = _w_rate < _h_rate ? _h_rate : _w_rate;
        sbmp = Bitmap.createScaledBitmap(bmp, (int)(bmp.getWidth() * _rate), (int)(bmp.getHeight() * _rate), false);
    }
    else
        sbmp = bmp;

    Bitmap output = Bitmap.createBitmap(sbmp.getWidth(), sbmp.getHeight(),
            Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xffa19774;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight());

    paint.setAntiAlias(true);
    paint.setFilterBitmap(true);
    paint.setDither(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(Color.parseColor("#BAB399"));
    canvas.drawCircle(w / 2, h / 2, (w < h ? w : h) / 2, paint);
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(sbmp, rect, rect, paint);

    return output;
}

答案 1 :(得分:2)

另一种方法是为边框创建一个透明的PNG(正方形中的镂空圆圈),并将其作为ImageView的正上方视图的背景,并具有相同的尺寸。< / p>

这样的事情:

Round Image Border

修改

白色图像上的白色似乎是多变的:)(相信我,那里有一个图像...) 所以我再增加了2个:

enter image description here enter image description here