كيف تصنع صورة مع زوايا مستديرة؟

Question

في Android ، يعد ImageView مستطيلًا افتراضيًا. كيف يمكنني أن أجعله مستطيلًا مستديرًا (مقطعًا من جميع الزوايا الأربعة من Bitmap ليكون مستطيلات مستديرة) في ImageView؟

Answer 1

هذا متأخر جدًا في الرد ، ولكن بالنسبة لأي شخص آخر يبحث عن هذا ، يمكنك القيام بالرمز التالي لتدوير زوايا صورك يدويًا.

http://www.ruibm.com/؟p=184

هذا ليس الكود الخاص بي ، لكنني استخدمته وهو يعمل بشكل رائع. لقد استخدمته كمساعد داخل فئة ImageHelper وتوسيعه قليلاً فقط لتمرير كمية الريش التي أحتاجها للحصول على صورة معينة.

الرمز النهائي يشبه هذا:

package com.company.app.utils;

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Bitmap.Config;
import android.graphics.PorterDuff.Mode;

public class ImageHelper {
    public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap
                .getHeight(), Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xff424242;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(rect);
        final float roundPx = pixels;

        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);

        return output;
    }
}

أمل أن هذا يساعد شخصاما!

Answer 2

بينما تعمل الإجابة أعلاه ، يظهر Romain Guy (مطور Android الأساسي) طريقة أفضل في مدونته التي تستخدم ذاكرة أقل باستخدام تظليل لا يقوم بإنشاء نسخة من صورة نقطية. الجهاز العام للوظيفة هنا:

BitmapShader shader;
shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(shader);

RectF rect = new RectF(0.0f, 0.0f, width, height);

// rect contains the bounds of the shape
// radius is the radius in pixels of the rounded corners
// paint contains the shader that will texture the shape
canvas.drawRoundRect(rect, radius, radius, paint);

مزايا هذا على أساليب أخرى هي أنه:

• لا ينشئ نسخة منفصلة من صورة نقطية ، الذي يستخدم الكثير من الذاكرة مع صور كبيرة [مقابل معظم الإجابات الأخرى هنا
• يدعم مضادة VS Clippath Method
• يدعم ألفا VS XferMode+PorterDuff Method
• يدعم تسريع الأجهزة VS Clippath Method
• فقط يسحب مرة واحدة إلى القماش VS Xfermode و Clippath Methods

لقد أنشأت أ RoundEdImageView استنادًا إلى هذا الرمز الذي يلف هذا المنطق في صورة ImageView ويضيف بشكل صحيح ScaleType الدعم والحدود المدورة الاختيارية.

Answer 3

طريقة أخرى سهلة هي استخدام بطاقة CardView مع نصف قطر الزاوية و ImageView في الداخل:

  <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:cardCornerRadius="8dp"
            android:layout_margin="5dp"
            android:elevation="10dp">

            <ImageView
                android:id="@+id/roundedImageView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/image"
                android:background="@color/white"
                android:scaleType="centerCrop"
                />
        </android.support.v7.widget.CardView>

Answer 4

في V21 من مكتبة الدعم ، يوجد الآن حل لهذا: يطلق عليه RoundedBitMapdrawable.

إنه في الأساس مثل السحب العادي باستثناء أنك تعطيه نصف قطر الزاوية للقطعة مع:

setCornerRadius(float cornerRadius)

لذلك ، بدءا من Bitmap src وهدف ImageView, ، سيبدو شيء هكذا:

RoundedBitmapDrawable dr = RoundedBitmapDrawableFactory.create(res, src);
dr.setCornerRadius(cornerRadius);
imageView.setImageDrawable(dr);

Answer 5

تمت إضافة القطع إلى الأشكال المستديرة إلى View الفصل في API 21.

فقط افعل هذا:

• قم بإنشاء شكل مستدير قابل للسحب ، شيء من هذا القبيل:

الدقة/Drawable/Round_outline.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="10dp" />
    ...
</shape>

• اضبط السحب كخلفية ImageView الخاصة بك:android:background="@drawable/round_outline"
• حسب هذا توثيق, ، ثم كل ما عليك فعله هو إضافة android:clipToOutline="true"

لسوء الحظ ، هناك حشرة ولم يتم التعرف على سمة XML. لحسن الحظ ، لا يزال بإمكاننا إعداد القطع في جافا:

• في نشاطك أو جزءك: ImageView.setClipToOutline(true)

هذا ما سيبدو عليه:

ملحوظة:

هذه الطريقة تعمل لصالح أي شكل قابل للرسم (وليس فقط مدورة). سيقصّل ImageView إلى أي مخطط تفصيلي قمت بتعريفه في XML القابل للرسمية.

ملاحظة خاصة حول ImageViews

setClipToOutline() يعمل فقط عندما يتم ضبط خلفية العرض على شكل قابلة للرسم. في حالة وجود شكل الخلفية هذا ، يعامل View الخطوط العريضة للشكل كحدود لأغراض القطع والتظليل.

هذا يعني ، إذا كنت تريد استخدامها setClipToOutline() لتجول الزوايا على ImageView ، يجب تعيين صورتك باستخدام android:src بدلاً من android:background (بما يجب ضبط الخلفية على شكلك المستدير). إذا كان يجب عليك استخدام الخلفية لتعيين صورتك بدلاً من SRC ، فيمكنك استخدام هذا الحل:

• قم بإنشاء تخطيط وضبط خلفيته على شكلك القابل للرسم
• لف هذا التصميم حول ImageView الخاص بك (بدون حشوة)
• سيتم الآن عرض ImageView (بما في ذلك أي شيء آخر في التصميم) مع شكل تخطيط مستدير.

Answer 6

لقد فعلت بواسطة Custom ImageView:

public class RoundRectCornerImageView extends ImageView {

    private float radius = 18.0f;
    private Path path;
    private RectF rect;

    public RoundRectCornerImageView(Context context) {
        super(context);
        init();
    }

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

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

    private void init() {
        path = new Path();

    }

    @Override
    protected void onDraw(Canvas canvas) {
        rect = new RectF(0, 0, this.getWidth(), this.getHeight());
        path.addRoundRect(rect, radius, radius, Path.Direction.CW);
        canvas.clipPath(path);
        super.onDraw(canvas);
    }
}

كيف تستعمل:

<com.mypackage.RoundRectCornerImageView
     android:id="@+id/imageView"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="@drawable/image"
     android:scaleType="fitXY" />

انتاج:

أتمنى أن يساعدك هذا.

Answer 7

لقد وجدت أن كلتا الطريقتين كانتا مفيدة للغاية في التوصل إلى حل عمل. فيما يلي نسختي المركبة ، وهي Pixel Independent وتتيح لك الحصول على بعض الزوايا المربعة مع بقية الزوايا التي لها نفس نصف القطر (وهي حالة الاستخدام المعتادة). بفضل كل من الحلول أعلاه:

public static Bitmap getRoundedCornerBitmap(Context context, Bitmap input, int pixels , int w , int h , boolean squareTL, boolean squareTR, boolean squareBL, boolean squareBR  ) {

    Bitmap output = Bitmap.createBitmap(w, h, Config.ARGB_8888);
    Canvas canvas = new Canvas(output);
    final float densityMultiplier = context.getResources().getDisplayMetrics().density;

    final int color = 0xff424242;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, w, h);
    final RectF rectF = new RectF(rect);

    //make sure that our rounded corner is scaled appropriately
    final float roundPx = pixels*densityMultiplier;

    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawRoundRect(rectF, roundPx, roundPx, paint);


    //draw rectangles over the corners we want to be square
    if (squareTL ){
        canvas.drawRect(0, h/2, w/2, h, paint);
    }
    if (squareTR ){
        canvas.drawRect(w/2, h/2, w, h, paint);
    }
    if (squareBL ){
        canvas.drawRect(0, 0, w/2, h/2, paint);
    }
    if (squareBR ){
        canvas.drawRect(w/2, 0, w, h/2, paint);
    }


    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(input, 0,0, paint);

    return output;
}

أيضًا ، لقد تجاوزت ImageView لوضع هذا حتى أتمكن من تحديده في XML. قد ترغب في إضافة بعض المنطق الذي تقوم به المكالمة الفائقة هنا ، لكنني علقت ذلك لأنه ليس مفيدًا في حالتي.

    @Override
protected void onDraw(Canvas canvas) {
    //super.onDraw(canvas);
        Drawable drawable = getDrawable();

        Bitmap b =  ((BitmapDrawable)drawable).getBitmap() ;
        Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

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


        Bitmap roundBitmap =  CropImageView.getRoundedCornerBitmap( getContext(), bitmap,10 , w, h , true, false,true, false);
        canvas.drawBitmap(roundBitmap, 0,0 , null);
}

أتمنى أن يساعدك هذا!

Answer 8

صورة مستديرة باستخدام ImageLoader هنا

خلق DisplayImageOptions:

DisplayImageOptions options = new DisplayImageOptions.Builder()
    // this will make circle, pass the width of image 
    .displayer(new RoundedBitmapDisplayer(getResources().getDimensionPixelSize(R.dimen.image_dimen_menu))) 
    .cacheOnDisc(true)
    .build();

imageLoader.displayImage(url_for_image,ImageView,options);

أو يمكنك المستخدم Picasso مكتبة من المربع.

Picasso.with(mContext)
    .load(com.app.utility.Constants.BASE_URL+b.image)
    .placeholder(R.drawable.profile)
    .error(R.drawable.profile)
    .transform(new RoundedTransformation(50, 4))
    .resizeDimen(R.dimen.list_detail_image_size, R.dimen.list_detail_image_size)
    .centerCrop()
    .into(v.im_user);

يمكنك تنزيل ملف RoundEdTransformation هناهنا

Answer 9

حل XML سريع -

<android.support.v7.widget.CardView
            android:layout_width="40dp"
            android:layout_height="40dp"
            app:cardElevation="0dp"
            app:cardCornerRadius="4dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/rounded_user_image"
        android:scaleType="fitXY"/>

</android.support.v7.widget.CardView>

يمكنك ضبط العرض المرغوب فيه والطول والنصف القطر على CardView و Scaletype على ImageView.

Answer 10

نظرًا لأن جميع الإجابات بدت معقدة للغاية بالنسبة لي فقط للزوايا المستديرة التي فكرت بها وتوصلت إلى حل آخر أعتقد أنه يستحق المشاركة ، فقط مع XML في حال كان لديك مساحة حول الصورة:

قم بإنشاء شكل محدود بمحتوى شفاف مثل هذا:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners 
        android:radius="30dp" />
    <stroke 
        android:color="#ffffffff"
        android:width="10dp" />
</shape> 

ثم في relativelayout ، يمكنك أولاً وضع صورتك ثم في نفس الموقع فوق الشكل باستخدام صورة أخرى. يجب أن يكون حجم الغلاف أكبر من حيث حجم عرض الحدود. احرص على أخذ دائرة نصف قطرها الزاوية الأكبر حيث يتم تعريف نصف القطر الخارجي ولكن نصف القطر الداخلي هو الذي يغطي صورتك.

آمل أن يساعد شخص ما أيضًا.

يحرر وفقًا لـ CQM ، اطلب مثال التخطيط النسبي:

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

    <ImageView
        android:id="@+id/imageToShow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imgCorners"
        android:layout_alignLeft="@+id/imgCorners"
        android:layout_alignRight="@+id/imgCorners"
        android:layout_alignTop="@+id/imgCorners"
        android:background="#ffffff"
        android:contentDescription="@string/desc"
        android:padding="5dp"
        android:scaleType="centerCrop" />

    <ImageView
        android:id="@+id/imgCorners"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:contentDescription="@string/desc"
        android:src="@drawable/corners_white" />

</RelativeLayout>

Answer 11

تنفيذي لـ ImageView مع أداة الزوايا المستديرة ، والتي (لأسفل || UP) تصحيح الصورة إلى الأبعاد المطلوبة. يستخدم نموذج الكود caspnz.

public class ImageViewRounded extends ImageView {

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

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

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

    @Override
    protected void onDraw(Canvas canvas) {
        BitmapDrawable drawable = (BitmapDrawable) getDrawable();

        if (drawable == null) {
            return;
        }

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

        Bitmap fullSizeBitmap = drawable.getBitmap();

        int scaledWidth = getMeasuredWidth();
        int scaledHeight = getMeasuredHeight();

        Bitmap mScaledBitmap;
        if (scaledWidth == fullSizeBitmap.getWidth() && scaledHeight == fullSizeBitmap.getHeight()) {
            mScaledBitmap = fullSizeBitmap;
        } else {
            mScaledBitmap = Bitmap.createScaledBitmap(fullSizeBitmap, scaledWidth, scaledHeight, true /* filter */);
        }

        Bitmap roundBitmap = ImageUtilities.getRoundedCornerBitmap(getContext(), mScaledBitmap, 5, scaledWidth, scaledHeight,
                false, false, false, false);
        canvas.drawBitmap(roundBitmap, 0, 0, null);

    }

}

Answer 12

اعتبارًا من مؤخرًا ، هناك طريقة أخرى - استخدام API المولدة من Glide. يتطلب الأمر بعض العمل الأولي ، ولكن بعد ذلك يمنحك كل قوة الانزلاق مع المرونة لفعل أي شيء لأنك تتجول في الكود الفعلي لذلك أعتقد أنه حل جيد على المدى الطويل. بالإضافة إلى ذلك ، الاستخدام بسيط للغاية وأنيق.

أولا ، الإعداد انسل من الإصدار 4+:

implementation 'com.github.bumptech.glide:glide:4.6.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.6.1'

ثم قم بإنشاء فئة وحدة تطبيق Glid لتشغيل معالجة التعليقات التوضيحية:

@GlideModule
public final class MyAppGlideModule extends AppGlideModule {}

ثم قم بإنشاء امتداد الانزلاق الذي يقوم بالفعل بالعمل. يمكنك تخصيصه للقيام بما تريد:

@GlideExtension
public class MyGlideExtension {

    private MyGlideExtension() {}

    @NonNull
    @GlideOption
    public static RequestOptions roundedCorners(RequestOptions options, @NonNull Context context, int cornerRadius) {
        int px = Math.round(cornerRadius * (context.getResources().getDisplayMetrics().xdpi / DisplayMetrics.DENSITY_DEFAULT));
        return options.transforms(new RoundedCorners(px));
    }
}

بعد إضافة هذه الملفات ، قم بإنشاء مشروعك.

ثم استخدمه في الكود الخاص بك مثل هذا:

GlideApp.with(this)
        .load(imageUrl)
        .roundedCorners(getApplicationContext(), 5)
        .into(imageView);

Answer 13

هناك مكتبة رائعة يتيح لك تشكيل ImageViews.

هنا مثال:

<com.github.siyamed.shapeimageview.mask.PorterShapeImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:siShape="@drawable/shape_rounded_rectangle"
    android:src="@drawable/neo"
    app:siSquare="true"/>

تعريف الشكل:

<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:topLeftRadius="18dp"
        android:topRightRadius="18dp"
        android:bottomLeftRadius="18dp"
        android:bottomRightRadius="18dp" />
    <solid android:color="@color/black" />
</shape>

نتيجة:

Answer 14

يجب أن تمتد ImageView ورسم مستطيلك المدورة.

إذا كنت تريد إطارًا حول الصورة ، فيمكنك أيضًا إنشاء الإطار المستدير أعلى عرض الصورة في التصميم.

تحرير] قم بترحيل الإطار على الصورة الأصلية ، باستخدام أ FrameLayout فمثلا. العنصر الأول من FrameLayout ستكون الصورة التي تريد diplay تقريبا. ثم أضف آخر ImageView مع الإطار. الثاني ImageView سيتم عرضه أعلى الأصل ImageView وبالتالي فإن Android سوف يرسم محتوياته فوق orignal ImageView.

Answer 15

الدعائم لجورج والترز الثاني أعلاه ، أخذت إجابته وتوسيعها قليلاً لدعم تقريب الزوايا الفردية بشكل مختلف. يمكن تحسين ذلك قليلاً (تتداخل بعض المستقيم المستهدف) ، ولكن ليس كثيرًا.

أعلم أن هذا الخيط قديم بعض الشيء ، ولكنه أحد أفضل النتائج للاستعلامات على Google حول كيفية تقريب زوايا ImageViews على Android.

/**
 * Use this method to scale a bitmap and give it specific rounded corners.
 * @param context Context object used to ascertain display density.
 * @param bitmap The original bitmap that will be scaled and have rounded corners applied to it.
 * @param upperLeft Corner radius for upper left.
 * @param upperRight Corner radius for upper right.
 * @param lowerRight Corner radius for lower right.
 * @param lowerLeft Corner radius for lower left.
 * @param endWidth Width to which to scale original bitmap.
 * @param endHeight Height to which to scale original bitmap.
 * @return Scaled bitmap with rounded corners.
 */
public static Bitmap getRoundedCornerBitmap(Context context, Bitmap bitmap, float upperLeft,
        float upperRight, float lowerRight, float lowerLeft, int endWidth,
        int endHeight) {
    float densityMultiplier = context.getResources().getDisplayMetrics().density;

    // scale incoming bitmap to appropriate px size given arguments and display dpi
    bitmap = Bitmap.createScaledBitmap(bitmap, 
            Math.round(endWidth * densityMultiplier),
            Math.round(endHeight * densityMultiplier), true);

    // create empty bitmap for drawing
    Bitmap output = Bitmap.createBitmap(
            Math.round(endWidth * densityMultiplier),
            Math.round(endHeight * densityMultiplier), Config.ARGB_8888);

    // get canvas for empty bitmap
    Canvas canvas = new Canvas(output);
    int width = canvas.getWidth();
    int height = canvas.getHeight();

    // scale the rounded corners appropriately given dpi
    upperLeft *= densityMultiplier;
    upperRight *= densityMultiplier;
    lowerRight *= densityMultiplier;
    lowerLeft *= densityMultiplier;

    Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setColor(Color.WHITE);

    // fill the canvas with transparency
    canvas.drawARGB(0, 0, 0, 0);

    // draw the rounded corners around the image rect. clockwise, starting in upper left.
    canvas.drawCircle(upperLeft, upperLeft, upperLeft, paint);
    canvas.drawCircle(width - upperRight, upperRight, upperRight, paint);
    canvas.drawCircle(width - lowerRight, height - lowerRight, lowerRight, paint);
    canvas.drawCircle(lowerLeft, height - lowerLeft, lowerLeft, paint);

    // fill in all the gaps between circles. clockwise, starting at top.
    RectF rectT = new RectF(upperLeft, 0, width - upperRight, height / 2);
    RectF rectR = new RectF(width / 2, upperRight, width, height - lowerRight);
    RectF rectB = new RectF(lowerLeft, height / 2, width - lowerRight, height);
    RectF rectL = new RectF(0, upperLeft, width / 2, height - lowerLeft);

    canvas.drawRect(rectT, paint);
    canvas.drawRect(rectR, paint);
    canvas.drawRect(rectB, paint);
    canvas.drawRect(rectL, paint);

    // set up the rect for the image
    Rect imageRect = new Rect(0, 0, width, height);

    // set up paint object such that it only paints on Color.WHITE
    paint.setXfermode(new AvoidXfermode(Color.WHITE, 255, AvoidXfermode.Mode.TARGET));

    // draw resized bitmap onto imageRect in canvas, using paint as configured above
    canvas.drawBitmap(bitmap, imageRect, imageRect, paint);

    return output;
}

Answer 16

لماذا لا تقطع في السحب ()؟

هذا هو الحل:

• تمديد relativelayout مع القطع
• ضع ImageView (أو طرق عرض أخرى) في التصميم:

الشفرة:

public class RoundRelativeLayout extends RelativeLayout {

private final float radius;

public RoundRelativeLayout(Context context, AttributeSet attrs) {
    super(context, attrs);

    TypedArray attrArray = context.obtainStyledAttributes(attrs,
            R.styleable.RoundRelativeLayout);
    radius = attrArray.getDimension(
            R.styleable.RoundRelativeLayout_radius, 0);
}

private boolean isPathValid;
private final Path path = new Path();

private Path getRoundRectPath() {
    if (isPathValid) {
        return path;
    }

    path.reset();

    int width = getWidth();
    int height = getHeight();
    RectF bounds = new RectF(0, 0, width, height);

    path.addRoundRect(bounds, radius, radius, Direction.CCW);
    isPathValid = true;
    return path;
}

@Override
protected void dispatchDraw(Canvas canvas) {
    canvas.clipPath(getRoundRectPath());
    super.dispatchDraw(canvas);
}

@Override
public void draw(Canvas canvas) {
    canvas.clipPath(getRoundRectPath());
    super.draw(canvas);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    int oldWidth = getMeasuredWidth();
    int oldHeight = getMeasuredHeight();
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    int newWidth = getMeasuredWidth();
    int newHeight = getMeasuredHeight();
    if (newWidth != oldWidth || newHeight != oldHeight) {
        isPathValid = false;
    }
}
}

Answer 17

رومان جاي هو المكان الذي يوجد فيه.

نسخة مصغرة على النحو التالي.

Bitmap bitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.image)).getBitmap();

Bitmap bitmapRounded = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), bitmap.getConfig());
Canvas canvas = new Canvas(bitmapRounded);
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
canvas.drawRoundRect((new RectF(0.0f, 0.0f, bitmap.getWidth(), bitmap.getHeight())), 10, 10, paint);

imageView.setImageBitmap(bitmapRounded);

Answer 18

كان حل XML النقي جيدًا بما فيه الكفاية في حالتي. http://www.techrepublic.com/article/pro-tip-round-corners-on-an-an-and-imageview-with-this-hack/

تعديل

ها هي الجواب باختصار:

في المجلد /الدقة /Drawable ، قم بإنشاء ملف frame.xml. في ذلك ، نحدد مستطيلًا بسيطًا مع زوايا مستديرة و شفاف المركز.

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
         <solid android:color="#00ffffff" />
         <padding android:left="6dp"
            android:top="6dp"
            android:right="6dp"
            android:bottom="6dp" />
         <corners android:radius="12dp" />
         <stroke android:width="6dp" android:color="#ffffffff" />
    </shape>

في ملف التخطيط الخاص بك ، يمكنك إضافة linearlayout يحتوي على صورة قياسية ، بالإضافة إلى framelayout المتداخلة. يستخدم FrameLayout الحشو وقابل للرسوم المخصصة لإعطاء وهم الزوايا المستديرة.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_gravity="center"
    android:gravity="center" 
    android:background="#ffffffff">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="6dp"
        android:src="@drawable/tr"/>

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="6dp"
            android:src="@drawable/tr"/>

        <ImageView 
             android:src="@drawable/frame"
             android:layout_width="match_parent"
             android:layout_height="match_parent" />

    </FrameLayout>

</LinearLayout>

Answer 19

فيما يلي مثال بسيط للغاية ، يمكنك أيضًا استخدامه في مصمم التخطيط للمعاينة.

public class RoundedImageView extends ImageView {

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

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public RoundedImageView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    public void setImageDrawable(Drawable drawable) {
        float radius = 0.1f;
        Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();
        RoundedBitmapDrawable rid = RoundedBitmapDrawableFactory.create(getResources(), bitmap);
        rid.setCornerRadius(bitmap.getWidth() * radius);
        super.setImageDrawable(rid);
    }
}

هذا هو الحل السريع. يستخدم نصف القطر في جميع الزوايا ويستند من نسبة عرض صورة نقطية.

لقد تجاوزت للتو setImageDrawable واستخدمت الدعم V4 طريقة لرسم صورة نقطية مدورة.

الاستخدام:

<com.example.widgets.RoundedImageView
        android:layout_width="39dp"
        android:layout_height="39dp"
        android:src="@drawable/your_drawable" />

معاينة مع ImageView و Custom ImageView:

Answer 20

ما يلي ينشئ كائن تخطيط مستطيل مستدير يرسم مستطيلًا مستديرًا حول أي كائنات طفل يتم وضعها فيه. يوضح أيضًا كيفية إنشاء طرق العرض والتخطيطات برمجيًا دون استخدام ملفات XML تخطيط.

package android.example;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.ViewGroup.LayoutParams;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MessageScreen extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  int mainBackgroundColor = Color.parseColor("#2E8B57");
  int labelTextColor = Color.parseColor("#FF4500");
  int messageBackgroundColor = Color.parseColor("#3300FF");
  int messageTextColor = Color.parseColor("#FFFF00");

  DisplayMetrics metrics = new DisplayMetrics();
  getWindowManager().getDefaultDisplay().getMetrics(metrics);
  float density = metrics.density;
  int minMarginSize = Math.round(density * 8);
  int paddingSize = minMarginSize * 2;
  int maxMarginSize = minMarginSize * 4;

  TextView label = new TextView(this);
  /*
   * The LayoutParams are instructions to the Layout that will contain the
   * View for laying out the View, so you need to use the LayoutParams of
   * the Layout that will contain the View.
   */
  LinearLayout.LayoutParams labelLayoutParams = new LinearLayout.LayoutParams(
    LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
  label.setLayoutParams(labelLayoutParams);
  label.setTextSize(TypedValue.COMPLEX_UNIT_SP, 18);
  label.setPadding(paddingSize, paddingSize, paddingSize, paddingSize);
  label.setText(R.string.title);
  label.setTextColor(labelTextColor);

  TextView message = new TextView(this);
  RoundedRectangle.LayoutParams messageLayoutParams = new RoundedRectangle.LayoutParams(
 LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
  /*
   * This is one of the calls must made to force a ViewGroup to call its
   * draw method instead of just calling the draw method of its children.
   * This tells the RoundedRectangle to put some extra space around the
   * View.
   */
  messageLayoutParams.setMargins(minMarginSize, paddingSize,
    minMarginSize, maxMarginSize);
  message.setLayoutParams(messageLayoutParams);
  message.setTextSize(TypedValue.COMPLEX_UNIT_SP, paddingSize);
  message.setText(R.string.message);
  message.setTextColor(messageTextColor);
  message.setBackgroundColor(messageBackgroundColor);

  RoundedRectangle messageContainer = new RoundedRectangle(this);
  LinearLayout.LayoutParams messageContainerLayoutParams = new LinearLayout.LayoutParams(
    LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
  messageContainerLayoutParams.setMargins(paddingSize, 0, paddingSize, 0);
  messageContainer.setLayoutParams(messageContainerLayoutParams);
  messageContainer.setOrientation(LinearLayout.VERTICAL);
  /*
   * This is one of the calls must made to force a ViewGroup to call its
   * draw method instead of just calling the draw method of its children.
   * This tells the RoundedRectangle to color the the exta space that was
   * put around the View as well as the View. This is exterior color of
   * the RoundedRectangle.
   */
  messageContainer.setBackgroundColor(mainBackgroundColor);
  /*
   * This is one of the calls must made to force a ViewGroup to call its
   * draw method instead of just calling the draw method of its children.
   * This is the interior color of the RoundedRectangle. It must be
   * different than the exterior color of the RoundedRectangle or the
   * RoundedRectangle will not call its draw method.
   */
  messageContainer.setInteriorColor(messageBackgroundColor);
  // Add the message to the RoundedRectangle.
  messageContainer.addView(message);

  //
  LinearLayout main = new LinearLayout(this);
  LinearLayout.LayoutParams mainLayoutParams = new LinearLayout.LayoutParams(
    LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
  main.setLayoutParams(mainLayoutParams);
  main.setOrientation(LinearLayout.VERTICAL);
  main.setBackgroundColor(mainBackgroundColor);
  main.addView(label);
  main.addView(messageContainer);

  setContentView(main);
 }
}

فئة كائن تخطيط roundedRectangle محدد هنا:

/**
 *  A LinearLayout that draws a rounded rectangle around the child View that was added to it.
 */
package android.example;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.widget.LinearLayout;

/**
 * A LinearLayout that has rounded corners instead of square corners.
 * 
 * @author Danny Remington
 * 
 * @see LinearLayout
 * 
 */
public class RoundedRectangle extends LinearLayout {
 private int mInteriorColor;

 public RoundedRectangle(Context p_context) {
  super(p_context);
 }

 public RoundedRectangle(Context p_context, AttributeSet attributeSet) {
  super(p_context, attributeSet);
 }

 // Listener for the onDraw event that occurs when the Layout is drawn.
 protected void onDraw(Canvas canvas) {
  Rect rect = new Rect(0, 0, getWidth(), getHeight());
  RectF rectF = new RectF(rect);
  DisplayMetrics metrics = new DisplayMetrics();
  Activity activity = (Activity) getContext();
  activity.getWindowManager().getDefaultDisplay().getMetrics(metrics);
  float density = metrics.density;
  int arcSize = Math.round(density * 10);

  Paint paint = new Paint();
  paint.setColor(mInteriorColor);

  canvas.drawRoundRect(rectF, arcSize, arcSize, paint);
 }

 /**
  * Set the background color to use inside the RoundedRectangle.
  * 
  * @param Primitive int - The color inside the rounded rectangle.
  */
 public void setInteriorColor(int interiorColor) {
  mInteriorColor = interiorColor;
 }

 /**
  * Get the background color used inside the RoundedRectangle.
  * 
  * @return Primitive int - The color inside the rounded rectangle.
  */
 public int getInteriorColor() {
  return mInteriorColor;
 }

}

Answer 21

تطبيق شكل على الخاص بك imageView على النحو التالي:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid android:color="#faf5e6" />
    <stroke
        android:width="1dp"
        android:color="#808080" />
    <corners android:radius="15dp" />
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />
</shape>

قد يكون من المفيد لك يا صديقي.

Answer 22

شكرا جزيلا للإجابة الأولى. فيما يلي إصدار معدّل لتحويل صورة مستطيلة إلى مربع واحد (ومدورة) ويتم تمرير لون التعبئة كمعلمة.

public static Bitmap getRoundedBitmap(Bitmap bitmap, int pixels, int color) {

    Bitmap inpBitmap = bitmap;
    int width = 0;
    int height = 0;
    width = inpBitmap.getWidth();
    height = inpBitmap.getHeight();

    if (width <= height) {
        height = width;
    } else {
        width = height;
    }

    Bitmap output = Bitmap.createBitmap(width, height, Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, width, height);
    final RectF rectF = new RectF(rect);
    final float roundPx = pixels;

    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(inpBitmap, rect, rect, paint);

    return output;
}

Answer 23

كوتلين

import android.graphics.BitmapFactory
import android.os.Bundle
import android.support.v4.graphics.drawable.RoundedBitmapDrawableFactory
import kotlinx.android.synthetic.main.activity_main.*

val bitmap = BitmapFactory.decodeResource(resources, R.drawable.myImage)
val rounded = RoundedBitmapDrawableFactory.create(resources, bitmap)
rounded.cornerRadius = 20f
profileImageView.setImageDrawable(rounded)

ليصنع ImageView دائري يمكننا تغييره cornerRadius مع:

rounded.isCircular = true

Answer 24

يمكنك استخدام فقط ImageView في تخطيطك واستخدام glide, ، يمكنك تطبيق زوايا مستديرة باستخدام هذه الطريقة.

أولا في كتابك ، اكتب ،

compile 'com.github.bumptech.glide:glide:3.7.0'

للصورة مع زوايا مستديرة ،

public void loadImageWithCorners(String url, ImageView view) {
    Glide.with(context)
            .load(url)
            .asBitmap()
            .centerCrop()
            .placeholder(R.color.gray)
            .error(R.color.gray)
            .diskCacheStrategy(DiskCacheStrategy.SOURCE)
            .into(new BitmapImageViewTarget(view) {
                @Override
                protected void setResource(Bitmap resource) {
                    RoundedBitmapDrawable circularBitmapDrawable =
                            RoundedBitmapDrawableFactory.create(context.getResources(), resource);
                    circularBitmapDrawable.setCornerRadius(32.0f); // radius for corners
                    view.setImageDrawable(circularBitmapDrawable);
                }
            });
}

طريقة الاتصال:

loadImageWithCorners("your url","your imageview");

Answer 25

الإجابة على السؤال الذي تم إعادة توجيهه هنا: "كيفية إنشاء صورة دائرية في Android؟"

public static Bitmap getRoundBitmap(Bitmap bitmap) {

    int min = Math.min(bitmap.getWidth(), bitmap.getHeight());

    Bitmap bitmapRounded = Bitmap.createBitmap(min, min, bitmap.getConfig());

    Canvas canvas = new Canvas(bitmapRounded);
    Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setShader(new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
    canvas.drawRoundRect((new RectF(0.0f, 0.0f, min, min)), min/2, min/2, paint);

    return bitmapRounded;
}

Answer 26

بمساعدة انسل من مكتبة و RoundedBitMapdRawableFactory الفصل من السهل تحقيقه. قد تحتاج إلى إنشاء صورة نائبة دائرية.

    Glide.with(context)
        .load(imgUrl)
        .asBitmap()
        .placeholder(R.drawable.placeholder)
        .error(R.drawable.placeholder)
        .into(new BitmapImageViewTarget(imgProfilePicture) {
            @Override
            protected void setResource(Bitmap resource) {
                RoundedBitmapDrawable drawable = RoundedBitmapDrawableFactory.create(context.getResources(),
                        Bitmap.createScaledBitmap(resource, 50, 50, false));
                drawable.setCornerRadius(10); //drawable.setCircular(true);
                imgProfilePicture.setImageDrawable(drawable);
            }
        });

Answer 27

إذا كانت صورتك على الإنترنت ، فإن أفضل طريقة هي استخدام الانزلاق و RoundedBitmapDrawableFactory (من API 21 - ولكن متوفر في مكتبة الدعم) مثل ذلك:

 Glide.with(ctx).load(url).asBitmap().centerCrop().into(new BitmapImageViewTarget(imageView) {
    @Override
    protected void setResource(Bitmap res) {
        RoundedBitmapDrawable bitmapDrawable =
             RoundedBitmapDrawableFactory.create(ctx.getResources(), res);
        bitmapDrawable.setCircular(true);//comment this line and uncomment the next line if you dont want it fully cricular
        //circularBitmapDrawable.setCornerRadius(cornerRadius);
        imageView.setImageDrawable(bitmapDrawable);
    }
});

Answer 28

إذا كنت تستخدم مكتبة Glide ، فسيكون ذلك مفيدًا:

Glide.with(getApplicationContext())
     .load(image_url)
     .asBitmap()
     .centerCrop()
     .into(new BitmapImageViewTarget(imageView) {
        @Override
        protected void setResource(Bitmap resource) {
          RoundedBitmapDrawable circularBitmapDrawable =
                       RoundedBitmapDrawableFactory.create(getApplicationContext().getResources(), resource);
          circularBitmapDrawable.setCornerRadius(dpToPx(10));
          circularBitmapDrawable.setAntiAlias(true);
          imageView.setImageDrawable(circularBitmapDrawable);
        }
     });


public int dpToPx(int dp) {
  DisplayMetrics displayMetrics = getApplicationContext().getResources().getDisplayMetrics();
  return Math.round(dp * (displayMetrics.xdpi / DisplayMetrics.DENSITY_DEFAULT));
}

Answer 29

بالنسبة لأولئك الذين يستخدمون Glide و Kotlin ، يمكنك تحقيق ذلك عن طريق التمديد RequestBuilder

fun <T> GlideRequest<T>.roundCorners(cornerRadius: Int) =
    apply(RequestOptions().transform(RoundedCorners(cornerRadius)))

والاستخدام كما ؛

 GlideApp.with(context)
            .load(url)
            .roundCorners(context.resources.getDimension(R.dimen.radius_in_dp).toInt())
            .into(imgView)

Answer 30

الكثير من الإجابات!

تابعت هذا المثال الذي اقترحه عدد قليل من الناس أيضًا: http://www.techrepublic.com/article/pro-tip-round-corners-on-an-an-and-imageview-with-this-hack/

ومع ذلك ، فإن ما احتاجه هو دائرة ملونة ، خلف صورة شفافة. لأي شخص مهتم بفعل الشيء نفسه ...

1) اضبط FrameLayout على العرض والارتفاع - في حالتي حجم الصورة (50 د).
2) ضع ImageView الذي يحتوي على src = "drawable/..." ، فوق ImageView الذي يحتوي على الصورة. امنحه معرفًا ، في حالتي ، أسماها Iconshape
3) يجب أن يكون للقناع القابل للرسوم.

ImageView iv2 = (ImageView) v.findViewById(R.id.iconShape);
Drawable shape = getResources().getDrawable(R.drawable.mask);
shape.setColorFilter(Color.BLUE, Mode.MULTIPLY);
iv2.setImageDrawable(shape);