গ্লাইড লাইব্রেরি সহ কোনও চিত্র কীভাবে গোল করবেন?


197

সুতরাং, কেউ কীভাবে গ্লাইডের সাথে বৃত্তাকার কোণগুলির সাথে একটি চিত্র প্রদর্শিত করতে চান? আমি গ্লাইড সহ একটি চিত্র লোড করছি, তবে কীভাবে এই লাইব্রেরিতে গোলাকার প্যারামগুলি পাস করতে হয় তা আমি জানি না।

আমার নীচের উদাহরণের মতো চিত্রের প্রয়োজন:

এখানে চিত্র বর্ণনা লিখুন


2
রেন্ডেড চিত্র দেখার জন্য আমার কাছে github.com/hdodenhof/CircleI छवि ভিউ আছে
মিলাপট্যাঙ্ক

1
আমি জানি কীভাবে চেনাশোনা আইমেজভিউয়ের সাথে গ্লাইড লিব ব্যবহার করতে হয় তবে আমি কেবল গ্লাইড লাইব দিয়ে এটি করার সম্ভাব্য উপায় অনুসন্ধান করি। এটি করার জন্য গ্লাইড লাইবে কোনও পদ্ধতি আছে বা এটি সমর্থিত নয়?
মিঃবয়ফক্স

উত্তর:


486

গ্লাইড ভি 4:

    Glide.with(context)
        .load(url)
        .circleCrop()
        .into(imageView);

গ্লাইড ভি 3:

আপনি RoundedBitmapDrawableগ্লাইড সহ বিজ্ঞপ্তি চিত্রগুলির জন্য ব্যবহার করতে পারেন । কোনও কাস্টম চিত্র দেখার প্রয়োজন নেই।

 Glide.with(context).load(url).asBitmap().centerCrop().into(new BitmapImageViewTarget(imageView) {
        @Override
        protected void setResource(Bitmap resource) {
            RoundedBitmapDrawable circularBitmapDrawable =
                    RoundedBitmapDrawableFactory.create(context.getResources(), resource);
            circularBitmapDrawable.setCircular(true);
            imageView.setImageDrawable(circularBitmapDrawable);
        }
    });

6
যদিও এটি কোনও সীমানা তৈরি করে না।
জাকট্যাকার্ডি

1
@ jimmy0251 না, আপনি পারবেন না। গ্লাইড ড্রইবলগুলি বিটম্যাপড্রেইবলগুলি নয়। তারা হ'ল স্থানান্তরযোগ্য এবং গ্লাইডারডেবলগুলি যা স্থানধারক থেকে আসল চিত্রে ক্রসফেইড। গোলটেডবিটম্যাপড্রেএবল হ্যান্ডেল করতে পারে না।
গ্রেগ এনিস

7
অঙ্কনযোগ্য আকারের ডিম্বাকৃতি সহ পটভূমি সেট করুন। এবং সীমানা তৈরি করার জন্য চিত্রদর্শনকে প্যাডিং দিন।
ললিত যাদব

2
যদি আপনার কিছু সমস্যা দেখা দেয় তবে দয়া করে রোমান সাময়েলেঙ্কোর পরবর্তী সমাধানটি পরীক্ষা করে দেখুন।
পাবেল

1
আপনার পরিবর্তে .centerCrop()সম্ভবত এর অর্থ.circleCrop()
থানাসিস কাপেলোনিস

66

এই পোস্টটি পরীক্ষা করুন , গ্লাইড বনাম পিকাসো ...
সম্পাদনা করুন : লিঙ্কযুক্ত পোস্টটি লাইব্রেরিতে কোনও গুরুত্বপূর্ণ পার্থক্য ডাকে না। গ্লাইড রিসাইক্লিং স্বয়ংক্রিয়ভাবে করে। আরও জন্য TWiStErRob এর মন্তব্য দেখুন।

Glide.with(this).load(URL).transform(new CircleTransform(context)).into(imageView);

public static class CircleTransform extends BitmapTransformation {
    public CircleTransform(Context context) {
        super(context);
    }

    @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        return circleCrop(pool, toTransform);
    }

    private static Bitmap circleCrop(BitmapPool pool, Bitmap source) {
        if (source == null) return null;

        int size = Math.min(source.getWidth(), source.getHeight());
        int x = (source.getWidth() - size) / 2;
        int y = (source.getHeight() - size) / 2;

        // TODO this could be acquired from the pool too
        Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);

        Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888);
        if (result == null) {
            result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
        }

        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
        paint.setAntiAlias(true);
        float r = size / 2f;
        canvas.drawCircle(r, r, r, paint);
        return result;
    }

    @Override public String getId() {
        return getClass().getName();
    }
} 

আকর্ষণীয় শোনাচ্ছে। এটি এপিআই 21 এর আউটলাইনটি দিয়ে কী ভাল কাজ করে?
তেভালোড

হুম, আমি তখন এটি ব্যবহার করতে পারি। আমি কেবল একটি কাস্টম ভিউ ব্যবহার করার চেষ্টা করব যদিও, আমি দ্বিতীয় বিটম্যাপটি তৈরি করতে চাই না :)। এছাড়াও, সেখান থেকে একটি বিটম্যাপ
আনার

public String getId()কোডে এটি যেভাবে দেখানো হয়েছে সেভাবে ব্যবহার করার বিষয়ে সাবধান থাকুন যেহেতু এটি সমস্ত চিত্রের জন্য একই আইডি ফেরত দেয় এবং এভাবে ঘটতে পারে যে গ্লাইড পুরানো বৃত্তাকার চিত্রগুলি সেট করবে যখন কোনও রূপান্তর ছাড়াই এটি সঠিক চিত্র সেট করবে! গ্লাইড কীভাবে কাজ করে তা আমি জানি না তবে মনে হয় এটি চিত্রের রূপান্তরকে ক্যাশে করে (আমি মনে করি হার্ড ক্যালক এড়ানোর জন্য)। এবং আইডিটি রূপান্তরিত চিত্রের আইডি হিসাবে ব্যবহৃত হয়। আমি কনস্ট্রাক্টরের সাথে ইমেজের একটি ইউআরএল যুক্ত করেছি এবং উল্লিখিত পদ্ধতিটি পুনরায় ফলাফলের আইডি হিসাবে তৈরি করেছি:this.id = String.format("%s:%s",this.getClass().getSimpleName(),id);
স্ট্যান

2
ট্রান্সফর্মেশন আইডির জন্য স্ট্যানের প্রয়োজনীয়তা হ'ল এটি সমস্ত রূপান্তরগুলির মধ্যে স্বতন্ত্র, সুতরাং এখানে ব্যবহার সঠিক is ক্যাশে কীগুলিতে সোর্স আইডি এবং ট্রান্সফর্মেশন আইডি উভয়ই অন্তর্ভুক্ত থাকবে, সুতরাং ট্রান্সফর্মেশন আইডি একটি প্রতিস্থাপনের পরিবর্তে মিক্সিন। Github.com/bumptech/glide/wiki/…
স্যাম জুড

4
স্থানধারকটিতে রূপান্তরটি প্রয়োগ করার কোনও উপায় আছে কি?
সিনিগামি

45

সবচেয়ে সহজ উপায় (গ্লাইড 4.xx প্রয়োজন)

Glide.with(context).load(uri).apply(RequestOptions().circleCrop()).into(imageView)

এটি এমনকি সংকলন করে না ... অনুরোধগুলি ()?
রাফায়েল লিমা

3
@ রাফায়েললিমা এটি কোটলিনে লেখা হয়েছে।
রোমান সামোলেঙ্কো

1
লক্ষ্য করুন, .apply()তার পরে যায় .load()
জনি পাঁচ

রিকোয়েস্টঅপশনস। সার্কেলক্রপ ট্রান্সফর্ম (), রিকোয়েস্টঅপশনস () নয়।
হাসি

আপনাকে গ্লাইড.উইথ (কনটেক্সট) লিখতে হবে .লোড (ইউরি) .প্লাই (সার্কেলক্রপ ()) এ (ইমেজভিউ) এপ্লিকেশন ফাংশনটি দেখুন।
জাসপাল

25

এইভাবে চেষ্টা করুন

কোড

Glide.with(this)
    .load(R.drawable.thumbnail)
    .bitmapTransform(new CropCircleTransformation(this))
    .into(mProfile);

এক্সএমএল

<ImageView
  android:id="@+id/img_profile"
  android:layout_width="76dp"
  android:layout_height="76dp"
  android:background="@drawable/all_circle_white_bg"
  android:padding="1dp"/>

all_circle_white_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape android:shape="oval">
      <solid android:color="@android:color/white"/>
  </shape>
  </item>
</selector>
  • আমি এই রূপান্তর গ্রন্থাগারটি ব্যবহার করি। -> https://github.com/wasabeef/glide-transformations
  • চেনাশোনা স্ট্রোক প্রস্থ ইমেজভিউ এর প্যাডিং হয়

9

এটির খুব সহজ আমি গ্লাইড গ্রন্থাগারটি ভলির গুগলের লাইব্রেরিতে তার খুব ভাল গ্রন্থাগার এবং প্রবন্ধ বেস দেখেছি

বৃত্তাকার চিত্র দেখার জন্য এই গ্রন্থাগারটি

https://github.com/hdodenhof/CircleImageView

এখন

// সাধারণ দর্শনের জন্য:

 @Override
 public void onCreate(Bundle savedInstanceState) {
  ...

  CircleImageView civProfilePic = (CircleImageView)findViewById(R.id.ivProfile);
  Glide.load("http://goo.gl/h8qOq7").into(civProfilePic);
}

// একটি তালিকার জন্য:

@Override
public View getView(int position, View recycled, ViewGroup container) {
final ImageView myImageView;
 if (recycled == null) {
    myImageView = (CircleImageView) inflater.inflate(R.layout.my_image_view,
            container, false);
} else {
    myImageView = (CircleImageView) recycled;
}

String url = myUrls.get(position);

Glide.load(url)
    .centerCrop()
    .placeholder(R.drawable.loading_spinner)
    .animate(R.anim.fade_in)
    .into(myImageView);

  return myImageView;
}

এবং এক্সএমএলে

<de.hdodenhof.circleimageview.CircleImageView
   android:id="@+id/ivProfile
   android:layout_width="160dp"
   android:layout_height="160dp"
   android:layout_centerInParent="true"
   android:src="@drawable/hugh"
   app:border_width="2dp"
   app:border_color="@color/dark" />

2
আগের উত্তরের মন্তব্যে উল্লিখিত লাইকটি এইভাবে ভাল কাজ করে না। কমপক্ষে 'ডি.হোডেনহোফ: সার্কেলমাজেউভিউ: ১.২.২' + com.github.bumptech.glide: গ্লাইড: ৩.৩.২ 'এর জন্য। চেক করা এবং ডাবল চেক করা। গ্লাইড 3.4। + এবং সার্কিমেজভিউ 1.2.1
স্ট্যান

। সেন্টারক্রপ () এর জন্য +1। আমার জন্য ডায়মন্ডম্যাজভিউ ভিউ প্লাস .asBitmap () দিয়ে কাজ করেছেন।
ফেলিপি

1
গ্লাইডে .dontAnimate () কল করা দরকার যা গ্রহণযোগ্য নয়
গ্রেগ এন্নিস

+1 তবে আরও মনে রাখবেন যে গ্লাইড
হেজহোগের

9

অন্যান্য সমাধানগুলি আমার পক্ষে কার্যকর হয়নি। আমি তাদের সবার উল্লেখযোগ্য ত্রুটিগুলি পেয়েছি:

  • গ্লাইড ট্রান্সফর্মেশনগুলি ব্যবহার করে সমাধানগুলি স্থানধারকদের সাথে কাজ করে না
  • বৃত্তাকার চিত্রের দর্শনগুলি ব্যবহার করে সমাধান অ্যানিমেশনগুলির সাথে কাজ করে না (অর্থাত্ ক্রসফেইড)
  • একটি পিতা বা মাতা এর একটি জেনেরিক পদ্ধতি ব্যবহার করে সলিউশন যে ক্লিপ তার শিশু (অর্থাত গৃহীত উত্তর এখানে ) পিছলে পড়া সঙ্গে ভাল কাজ করে না

এটি সত্যিই আকর্ষণীয় যে এটির সাথে ঝাঁপিয়ে পড়ার পরে আমি গোলাকার কোণগুলি এবং বৃত্তগুলিতে ফ্রেসকো গ্রন্থাগার পৃষ্ঠাটি পেয়েছি যেখানে তারা মূলত একই সীমাবদ্ধতার তালিকা করে এবং বিবৃতি দিয়ে শেষ করে:

অ্যান্ড্রয়েডে গোলাকার কোণগুলির জন্য সত্যিই ভাল কোনও সমাধান নেই এবং উপরের ট্রেড-অফগুলির মধ্যে একটি বেছে নিতে হবে

অবিশ্বাস্য যে এই সময়ে আমাদের কাছে এখনও একটি বাস্তব সমাধান নেই। উপরে উল্লিখিত লিঙ্কটির উপর ভিত্তি করে আমার একটি বিকল্প সমাধান রয়েছে। এই পদ্ধতির অসুবিধাটি হ'ল এটি অনুমান করে যে আপনার পটভূমিটি একটি দৃ color় রঙের (কোণগুলি সত্যই স্বচ্ছ নয়)। আপনি এটি এর মতো ব্যবহার করবেন:

<RoundedCornerLayout ...>
    <ImageView ...>
</RoundedCornerLayout>

গিস্টটি এখানে এবং সম্পূর্ণ কোড এখানে:

public class RoundedCornerLayout extends RelativeLayout {
    private Bitmap maskBitmap;
    private Paint paint;
    private float cornerRadius;

    public RoundedCornerLayout(Context context) {
        super(context);
        init(context, null, 0);
    }

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

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

    private void init(Context context, AttributeSet attrs, int defStyle) {
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);

        setWillNotDraw(false);
    }

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

        if (maskBitmap == null) {
            // This corner radius assumes the image width == height and you want it to be circular
            // Otherwise, customize the radius as needed
            cornerRadius = canvas.getWidth() / 2;
            maskBitmap = createMask(canvas.getWidth(), canvas.getHeight());
        }

        canvas.drawBitmap(maskBitmap, 0f, 0f, paint);
    }

    private Bitmap createMask(int width, int height) {
        Bitmap mask = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(mask);

        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.WHITE); // TODO set your background color as needed

        canvas.drawRect(0, 0, width, height, paint);

        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        canvas.drawRoundRect(new RectF(0, 0, width, height), cornerRadius, cornerRadius, paint);

        return mask;
    }
}

6

এখন গ্লাইড ভি 4 এ আপনি সরাসরি সার্কেলক্রপ () ব্যবহার করতে পারেন

Glide.with(fragment)
  .load(url)
  .circleCrop()
  .into(imageView);

প্রকারভেদে নির্মিত

  • CenterCrop
  • FitCenter
  • CircleCrop

5

এই রূপান্তরটি ব্যবহার করুন, এটি দুর্দান্ত কাজ করবে।

public class CircleTransform extends BitmapTransformation {
public CircleTransform(Context context) {
    super(context);
}

@Override
protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
    return circleCrop(pool, toTransform);
}

private static Bitmap circleCrop(BitmapPool pool, Bitmap source) {
    if (source == null) return null;

    int borderColor = ColorUtils.setAlphaComponent(Color.WHITE, 0xFF);
    int borderRadius = 3;

    int size = Math.min(source.getWidth(), source.getHeight());
    int x = (source.getWidth() - size) / 2;
    int y = (source.getHeight() - size) / 2;

    // TODO this could be acquired from the pool too
    Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);
    if (squared != source) {
        source.recycle();
    }

    Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888);
    if (result == null) {
        result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
    }

    Canvas canvas = new Canvas(result);
    Paint paint = new Paint();
    paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
    paint.setAntiAlias(true);
    float r = size / 2f;
    canvas.drawCircle(r, r, r, paint);

    // Prepare the background
    Paint paintBg = new Paint();
    paintBg.setColor(borderColor);
    paintBg.setAntiAlias(true);

    // Draw the background circle
    canvas.drawCircle(r, r, r, paintBg);

    // Draw the image smaller than the background so a little border will be seen
    canvas.drawCircle(r, r, r - borderRadius, paint);

    squared.recycle();

    return result;
}

@Override
public String getId() {
    return getClass().getName();
}} 

5

জন্য পিছলান 4.xx

ব্যবহার

Glide
  .with(context)
  .load(uri)
  .apply(
      RequestOptions()
        .circleCrop())
  .into(imageView)

ডক থেকে এটি বিবৃত

গোলাকার ছবি: CircleImageView / CircularImageView / RoundedImageView আছে বলা হয় বিষয় TransitionDrawable (.crossFade () .thumbnail সঙ্গে () বা .placeholder ()) এবং অ্যানিমেটেড GIF গুলি সঙ্গে, একটি ব্যবহার BitmapTransformation (.circleCrop () V4 উপলব্ধ হবে) অথবা সমস্যা সমাধানের জন্য .dontAnimate ()


4

এই উত্তর অনুসারে , উভয় ভাষায় সবচেয়ে সহজ উপায় হ'ল:

Kotlin:

Glide.with(context).load(uri).apply(RequestOptions().circleCrop()).into(imageView)

জাভা:

Glide.with(context).load(uri).apply(new RequestOptions().circleCrop()).into(imageView)

এটি গ্লাইড 4.XX এ কাজ করে


4

ফাংশন পরিবর্তিত না হয়ে রোমান সামোলেঙ্কোর উত্তর সঠিক ছিল। সঠিক উত্তরটি হ'ল

Glide.with(context)
                .load(yourImage)
                .apply(RequestOptions.circleCropTransform())
                .into(imageView);

3

আমি চিত্রের ওপরে সীমানা যুক্ত করার জন্য একটি সহজ এবং সহজ সমাধান পেয়েছি যা রঙের সাথে চিত্রের উপরে গ্রেডিয়েন্ট সেট করতে বা যুক্ত করতে চায়।

ধাপ:

  1. একটি ফ্রেম বিন্যাস নিন এবং দুটি চিত্র যুক্ত করুন You আপনি আপনার প্রয়োজন অনুযায়ী আকার নির্ধারণ করতে পারেন। কারণ imgPlaceHolder, আপনার একটি সাদা চিত্র বা রঙ দরকার যা আপনি সেট করতে চান।

        <ImageView
            android:id="@+id/imgPlaceHolder"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:src="@drawable/white_bg"/>

        <ImageView
            android:id="@+id/imgPic"
            android:layout_width="190dp"
            android:layout_height="190dp"
            android:layout_gravity="center"
            android:src="@drawable/image01"/>
    </FrameLayout>
  1. এই কোডটি এক্সএমএল ফাইলে রাখার পরে জাভা ফাইলে লাইনের নিচে রাখুন।

    Glide.with(this).load(R.drawable.image01).asBitmap().centerCrop().into(new BitmapImageViewTarget(imgPic) {
        @Override
        protected void setResource(Bitmap resource) {
            RoundedBitmapDrawable circularBitmapDrawable =
                    RoundedBitmapDrawableFactory.create(getResources(), resource);
            circularBitmapDrawable.setCircular(true);
            imageView.setImageDrawable(circularBitmapDrawable);
        }
    });
    
    Glide.with(this).load(R.drawable.white_bg).asBitmap().centerCrop().into(new BitmapImageViewTarget(imgPlaceHolder) {
        @Override
        protected void setResource(Bitmap resource) {
            RoundedBitmapDrawable circularBitmapDrawable =
                    RoundedBitmapDrawableFactory.create(getResources(), resource);
            circularBitmapDrawable.setCircular(true);
            imgTemp2.setImageDrawable(circularBitmapDrawable);
        }
    });

এটি কোনও অতিরিক্ত প্যাডিং এবং মার্জিনের সাহায্যে চিত্র দর্শনের সীমানা তৈরি করবে make

বিঃদ্রঃ : সাদা চিত্রটি সীমান্তের জন্য বাধ্যতামূলক, অন্যথায় এটি কাজ করবে না।

শুভ কোডিং :)


3

গ্লাইড লাইব্রেরি সহ আপনি এই কোডটি ব্যবহার করতে পারেন:

Glide.with(context)
    .load(imageUrl)
    .asBitmap()
    .placeholder(R.drawable.user_pic)
    .centerCrop()
    .into(new BitmapImageViewTarget(img_profPic) {
        @Override
        protected void setResource(Bitmap resource) {
            RoundedBitmapDrawable circularBitmapDrawable = RoundedBitmapDrawableFactory.create(context.getResources(), resource);

            circularBitmapDrawable.setCircular(true);
            img_profPic.setImageDrawable(circularBitmapDrawable);
        }
    });

আপনি গ্লাইড লাইব্রেরির মাধ্যমে গোলাকার চিত্রও তৈরি করতে পারেন।
priti

2

আমি এটি আগে খুঁজছিলাম এবং আমি এটি খুব সহজ উপায়ে তৈরি করেছি, আমি আশা করি আপনি এটি পছন্দ করবেন।

 //crete this method into your Utils class and call this method wherever you want to use.
    //you can set these placeHolder() and error() image static as well. I made it as comment inside this method, then no need to use [placeHolderUrl and errorImageUrl] parameters. remove it from this method.
    public static void loadImage(final Activity context, ImageView imageView, String url, int placeHolderUrl, int errorImageUrl) {
        if (context == null || context.isDestroyed()) return;

        //placeHolderUrl=R.drawable.ic_user;
        //errorImageUrl=R.drawable.ic_error;
            Glide.with(context) //passing context
                    .load(getFullUrl(url)) //passing your url to load image.
                    .placeholder(placeHolderUrl) //this would be your default image (like default profile or logo etc). it would be loaded at initial time and it will replace with your loaded image once glide successfully load image using url.
                    .error(errorImageUrl)//in case of any glide exception or not able to download then this image will be appear . if you won't mention this error() then nothing to worry placeHolder image would be remain as it is.
                    .diskCacheStrategy(DiskCacheStrategy.ALL) //using to load into cache then second time it will load fast.
                    .transform(new CircleTransform(context))//this CircleTransform class help to crop an image as circle.
                    .animate(R.anim.fade_in) // when image (url) will be loaded by glide then this face in animation help to replace url image in the place of placeHolder (default) image.
                    .fitCenter()//this method help to fit image into center of your ImageView
                    .into(imageView); //pass imageView reference to appear the image.
    } 

CircleTransform.java

  public class CircleTransform extends BitmapTransformation {
    public CircleTransform(Context context) {
        super(context);

        if(context==null)
            return;
    }

    private static Bitmap circleCrop(BitmapPool pool, Bitmap source) {
        if (source == null) return null;

        int size = Math.min(source.getWidth(), source.getHeight());
        int x = (source.getWidth() - size) / 2;
        int y = (source.getHeight() - size) / 2;


        Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);

        Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888);
        if (result == null) {
            result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
        }

        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
        paint.setAntiAlias(true);
        float r = size / 2f;
        canvas.drawCircle(r, r, r, paint);
        return result;
    }

    @Override
    protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        return circleCrop(pool, toTransform);
    }

    @Override
    public String getId() {
        return getClass().getName();
    }
}

অ্যানিমেশনে বিবর্ণ হওয়ার জন্য fade_in.xML

    <set xmlns:android="http://schemas.android.com/apk/res/android">
<!--THIS ANIMATION IS USING FOR FADE IN -->

<alpha
    android:duration="800"
    android:fromAlpha="0.0"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:toAlpha="1.0" />

অবশেষে এই পদ্ধতি কল।

Utils.loadImage(YourClassName.this,mImageView,url,R.drawable.ic_user,R.drawable.ic_error);

2

আপনি কেবল রাউন্ডডকর্নারস ট্রান্সফর্মেশন কনস্ট্রাক্টরকে কল করতে পারেন, যার কোণার টাইপ এনাম ইনপুট রয়েছে। এটার মত:

Glide.with(context)
            .load(bizList.get(position).getCover())
            .bitmapTransform(new RoundedCornersTransformation(context,20,0, RoundedCornersTransformation.CornerType.TOP))
            .into(holder.bizCellCoverImg);

তবে প্রথমে আপনাকে আপনার প্রকল্পে গ্লাইড ট্রান্সফর্মেশন যুক্ত করতে হবে।


2

গ্লাইডে আপনার বিটম্যাপটি ক্রপ করার আরও মডিউলার এবং ক্লিনার উপায় এখানে রয়েছে:

  1. এ জাতীয় BitmapTransformationওভাররাইড transformপদ্ধতিটি প্রসারিত করে একটি কাস্টম রূপান্তর তৈরি করুন :

গ্লাইড 4.xx এর জন্য

public class CircularTransformation extends BitmapTransformation {

@Override
protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
    RoundedBitmapDrawable circularBitmapDrawable =
            RoundedBitmapDrawableFactory.create(null, toTransform);
    circularBitmapDrawable.setCircular(true);
    Bitmap bitmap = pool.get(outWidth, outHeight, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    circularBitmapDrawable.setBounds(0, 0, outWidth, outHeight);
    circularBitmapDrawable.draw(canvas);
    return bitmap;
    }

@Override
public void updateDiskCacheKey(MessageDigest messageDigest) {}

}

গ্লাইড 3.xx এর জন্য

public class CircularTransformation extends BitmapTransformation {

@Override
protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
    RoundedBitmapDrawable circularBitmapDrawable =
            RoundedBitmapDrawableFactory.create(null, toTransform);
    circularBitmapDrawable.setCircular(true);
    Bitmap bitmap = pool.get(outWidth, outHeight, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    circularBitmapDrawable.setBounds(0, 0, outWidth, outHeight);
    circularBitmapDrawable.draw(canvas);
    return bitmap;
    }

@Override
public String getId() {
    // Return some id that uniquely identifies your transformation.
    return "CircularTransformation";
    }

}
  1. তারপরে এটির গ্লাইড নির্মাত্রে সেট করুন যেখানে আপনার এটি প্রয়োজন:
Glide.with(yourActivity)
   .load(yourUrl)
   .asBitmap()
   .transform(new CircularTransformation())
   .into(yourView);

আশাকরি এটা সাহায্য করবে :)


2
private void setContactImage(@NonNull ViewHolder holder, ClsContactDetails clsContactDetails) {
    Glide.with(context).load(clsContactDetails.getPic())
        .apply(new RequestOptions().centerCrop().circleCrop().placeholder(R.mipmap.ic_launcher)).into(holder.ivPersonImage);
}

2
implementation 'com.github.bumptech.glide:glide:4.8.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'


RequestOptions options=new RequestOptions();
        options.centerCrop().placeholder(getResources().getDrawable(R.drawable.user_placeholder));
        Glide.with(this)
                .load(preferenceSingleTon.getImage())
                .apply(options)
                .into(ProfileImage);

2

চেনাশোনা ক্রপ + প্লেসহোল্ডার + ক্রসফেইড

 Glide.with(context!!)
                    .load(randomImage)
                    .apply(RequestOptions.bitmapTransform(CircleCrop()).error(R.drawable.nyancat_animated))
                    .transition(DrawableTransitionOptions()
                            .crossFade())
                    .into(picture)

এখানে চিত্র বর্ণনা লিখুন


1

গ্লাইড সংস্করণ 4.6.1

Glide.with(context)
.load(url)
.apply(RequestOptions.bitmapTransform(new CircleCrop()))
.into(imageView);

1

এই ক্ষেত্রে আমার ছায়া যুক্ত করতে হবে, এবং চিত্রের দেখুন উন্নত কাজ করছে না

বাস্তবায়ন "com.github.bumptech.glide: গ্লাইড: 4.10.0"

এক্সএমএল

<FrameLayout
    android:id="@+id/fl_image"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_margin="10dp"
    android:background="@drawable/card_circle_background"
    android:elevation="8dp">

    <ImageView
        android:id="@+id/iv_item_employee"
        android:layout_width="60dp"
        android:layout_height="60dp"
        tools:background="@color/colorPrimary" />
</FrameLayout>

আকার আকৃতির

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
     <solid android:color="@color/white"/>
</shape>

গ্লাইড কনফিগারেশন

Glide.with(this)
    .asBitmap()
    .load(item.image)
    .apply(RequestOptions.circleCropTransform())
    .into(iv_item_employee)

0

এই ধরণের চিত্র প্রদর্শনের জন্য আপনাকে সার্কুলার আইমেজভিউ ব্যবহার করতে হবে ...

আপনি গ্লাইড লাইব্রেরি ব্যবহার করছেন যা চিত্রগুলি লোড করতে ব্যবহৃত হয়েছিল ..

আপনার প্রকল্পে একটি ক্লাসফিল তৈরি করুন এবং এটি চিত্র দর্শনে লোড করুন ... এবং আপনি পছন্দসই ফলাফল পাবেন ...

কোড অনুসরণ করার চেষ্টা করুন ...

এক্সএমএল

 <com.yourpackage.CircularImageView
    android:id="@+id/imageview"
    android:layout_width="96dp"
    android:layout_height="96dp"
    app:border="true"
    app:border_width="3dp"
    app:border_color="@color/white"
    android:src="@drawable/image" />

CircularImageView.java

public class CircularImageView extends ImageView {
    private int borderWidth;
    private int canvasSize;
    private Bitmap image;
    private Paint paint;
    private Paint paintBorder;

    public CircularImageView(final Context context) {
        this(context, null);
    }

    public CircularImageView(Context context, AttributeSet attrs) {
        this(context, attrs, R.attr.circularImageViewStyle);
    }

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

        // init paint
        paint = new Paint();
        paint.setAntiAlias(true);

        paintBorder = new Paint();
        paintBorder.setAntiAlias(true);

        // load the styled attributes and set their properties
        TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.CircularImageView, defStyle, 0);

        if(attributes.getBoolean(R.styleable.CircularImageView_border, true)) {
            int defaultBorderSize = (int) (4 * getContext().getResources().getDisplayMetrics().density + 0.5f);
            setBorderWidth(attributes.getDimensionPixelOffset(R.styleable.CircularImageView_border_width, defaultBorderSize));
            setBorderColor(attributes.getColor(R.styleable.CircularImageView_border_color, Color.WHITE));
        }

        if(attributes.getBoolean(R.styleable.CircularImageView_shadow, false))
            addShadow();
    }

    public void setBorderWidth(int borderWidth) {
        this.borderWidth = borderWidth;
        this.requestLayout();
        this.invalidate();
    }

    public void setBorderColor(int borderColor) {
        if (paintBorder != null)
            paintBorder.setColor(borderColor);
        this.invalidate();
    }

    public void addShadow() {
        setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);
        paintBorder.setShadowLayer(4.0f, 0.0f, 2.0f, Color.BLACK);
    }

    @Override
    public void onDraw(Canvas canvas) {
        // load the bitmap
        image = drawableToBitmap(getDrawable());

        // init shader
        if (image != null) {

            canvasSize = canvas.getWidth();
            if(canvas.getHeight()<canvasSize)
                canvasSize = canvas.getHeight();

            BitmapShader shader = new BitmapShader(Bitmap.createScaledBitmap(image, canvasSize, canvasSize, false), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            paint.setShader(shader);

            // circleCenter is the x or y of the view's center
            // radius is the radius in pixels of the cirle to be drawn
            // paint contains the shader that will texture the shape
            int circleCenter = (canvasSize - (borderWidth * 2)) / 2;
            canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, ((canvasSize - (borderWidth * 2)) / 2) + borderWidth - 4.0f, paintBorder);
            canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, ((canvasSize - (borderWidth * 2)) / 2) - 4.0f, paint);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = measureWidth(widthMeasureSpec);
        int height = measureHeight(heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

    private int measureWidth(int measureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        if (specMode == MeasureSpec.EXACTLY) {
            // The parent has determined an exact size for the child.
            result = specSize;
        } else if (specMode == MeasureSpec.AT_MOST) {
            // The child can be as large as it wants up to the specified size.
            result = specSize;
        } else {
            // The parent has not imposed any constraint on the child.
            result = canvasSize;
        }

        return result;
    }

    private int measureHeight(int measureSpecHeight) {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpecHeight);
        int specSize = MeasureSpec.getSize(measureSpecHeight);

        if (specMode == MeasureSpec.EXACTLY) {
            // We were told how big to be
            result = specSize;
        } else if (specMode == MeasureSpec.AT_MOST) {
            // The child can be as large as it wants up to the specified size.
            result = specSize;
        } else {
            // Measure the text (beware: ascent is a negative number)
            result = canvasSize;
        }

        return (result + 2);
    }

    public Bitmap drawableToBitmap(Drawable drawable) {
        if (drawable == null) {
            return null;
        } else if (drawable instanceof BitmapDrawable) {
            return ((BitmapDrawable) drawable).getBitmap();
        }

        Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(),
                drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
        drawable.draw(canvas);

        return bitmap;
    }
}

বিঃদ্রঃ :

তুমি ব্যবহার করতে পার

CircularImageView imgIcon = (CircularImageView)findViewById(R.id.imageview);

অথবা

ImageView imgIcon = (ImageView)findViewById(R.id.imageview);

এটি আপনার অন্যান্য গ্রন্থাগারগুলিকে প্রভাবিত করবে না ... চিত্র বা অন্য কিছু ডাউনলোড করার জন্য আপনার কোড পরিবর্তন করতে হবে না ... এটি এক্সএমএল ব্যবহার করে খুব সহজেই সংজ্ঞায়িত করা যায় ..


3
আমি গ্লাইড + সার্কুলারআইমেজভিউ (এবং রাউন্ডেডআইমেজভিউ) ব্যবহার করে দেখেছি এবং যদি আপনি স্থানধারক (আপনার চিত্র ডাউনলোড হওয়ার সময়) এবং উপস্থিতি অ্যানিমেশনগুলি ব্যবহার শুরু করেন তবে এটি ভাল কাজ করে না। পিকাসোর এই সমস্যা নেই। আপনি এখানে এ সম্পর্কে আরও লাল করতে পারেন: github.com/vinc3m1/RoundedI
छवि

গ্লাইড কলটিতে .asBitmap ব্যবহার করুন এবং এটি কাজ করবে।
গ্রানকো ৮87

গ্লাইডে .dontAnimate () কল করা দরকার যা গ্রহণযোগ্য নয়
গ্রেগ এন্নিস
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.