গ্লাইড ব্যবহার করে চিত্র লোড করার সময় অগ্রগতি বার


102

গ্লাইড ব্যবহার করে চিত্রটি লোড না হওয়া পর্যন্ত আমি কি কোনও স্পিনারকে আবর্তিত অ্যানিমেশন সহ প্লেসোল্ডারে লোড করতে পারি?

আমি। پلیসোল্ডার (আর। ড্রাওয়েবল.স্পিনার) ব্যবহার করে এটি করার চেষ্টা করছি যে কোনও অ্যানিমেশন আসছে না?

কেউ যদি আমাকে সাহায্য করতে পারে তবে তা দুর্দান্ত হবে?

ধন্যবাদ!


stackoverflow.com/questions/39263403/… দয়া করে এই সমস্যাটি সমাধান করুন
ডেনিশ বাট

উত্তর:


231

সম্পাদনা করুন: সার্কুলারপ্রোগ্রেড ড্রয়েবলের সাথে এটি এখন বেশ সহজ

build.gradle

implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.1.0"

MyGlideModule.kt

@GlideModule
class MyGlideModule : AppGlideModule()

মেইনএকটিভিটি.কিটি

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  setContentView(R.layout.activity_main)

  val circularProgressDrawable = CircularProgressDrawable(this)
  circularProgressDrawable.strokeWidth = 5f
  circularProgressDrawable.centerRadius = 30f
  circularProgressDrawable.start()

  GlideApp.with(applicationContext)
      .load("https://raw.githubusercontent.com/bumptech/glide/master/static/glide_logo.png")
      .placeholder(circularProgressDrawable)
      .into(a_main_image)
}

এগুলি হ'ল কিছু গ্লাইড স্নিপেট


পুরানো উত্তর: আপনি একটি সাধারণ প্রগতিবারও তৈরি করতে পারেন এবং তারপরে এটিকে গ্লাইডে লুকিয়ে রাখতে পারেন onResourceReady()

রিসোর্স লোড শেষ হয়ে গেলে যে পদ্ধতিটি কল করা হবে।


উদাহরণ :

মেইনএ্যাকটিভিটি.জভা

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    final ImageView imageView = (ImageView) findViewById(R.id.img_glide);
    final ProgressBar progressBar = (ProgressBar) findViewById(R.id.progress);

    Glide.with(this)
            .load("https://raw.githubusercontent.com/bumptech/glide/master/static/glide_logo.png")
            .listener(new RequestListener<Drawable>() {
                @Override
                public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
                    progressBar.setVisibility(View.GONE);
                    return false;
                }

                @Override
                public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                    progressBar.setVisibility(View.GONE);
                    return false;
                }
            })
            .into(imageView);
}

কার্যকলাপ_মাইন.এক্সএমএল (বিন্যাস):

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".MainActivity">

    <ProgressBar
        android:id="@+id/progress"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:visibility="visible" />

    <ImageView
        android:id="@+id/img_glide"
        android:layout_width="match_parent"
        android:layout_height="100dp" />

</RelativeLayout>

ফলাফল:

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


6
অন্যাক্সেশনটির অগ্রগতি বার.সেটভিজিবিলিটি (View.GONE) করা উচিত; খুব। :)
অ্যান্ড্রয়েডআরটাইমেক্সেপশন

4
এটি ভাল তবে এটি অগ্রগতির মূল্য দেখায় না। এটি কীভাবে যুক্ত করবেন?
হান হোয়াইটিং

4
আমি গ্লাইড গ্রন্থাগারটি আমদানি করে থাকলেও গ্লাইডড্র্যাবেবল ক্লাসটি সমাধান করা যায় না। গ্লাইডড্রেবল ব্যবহার করার জন্য আমাকে কি কোনও অতিরিক্ত লাইব্রেরি যুক্ত করতে হবে?
জেরেক্সেস

আপনি সম্ভবত গ্লাইডের আরসি 1 সংস্করণটি আমদানি করছেন যেখানে তারা অঙ্কনযোগ্যের জন্য গ্লাইডড্রেবেবলকে প্রতিস্থাপন করেছেন। compile 'com.github.bumptech.glide:glide:3.8.0আপাতত আমদানি করে দেখুন Try
ইভিনি 1_

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

42

আপনি আমার গ্লাইডইমেজলয়েডার দিয়ে যা চান অগ্রগতির মান সেট করতে পারেন।

আমি আশা করি এটি আপনার প্রশ্নের সমাধান করবে।

অ্যাপ্লিকেশন ডেমো

আমি গ্লাইডেমেজলয়েডার.জভা এবং প্রগ্রেস অ্যাপ্লাইডস গ্লাইডমোডুল। জাভাতে অগ্রগতি সহ চিত্র লোডারকে ক্যাপসুলেট করি ava

3 টি পদক্ষেপ সহ কীভাবে প্রয়োগ করবেন:

1. build.gradle

//Glide
implementation 'com.github.bumptech.glide:glide:4.4.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.4.0'
implementation 'com.github.bumptech.glide:okhttp3-integration:4.4.0'

২. আপনার প্রকল্পে গ্লাইড গ্লাইডইমেজলডার.জাভা এবং প্রগ্রেস অ্যাপ্লাইড গ্লাইডমডুল।জভা ক্লোন করুন

3. সহজ ব্যবহার কোথাও

RequestOptions options = new RequestOptions()
                    .centerCrop()
                    .placeholder(R.drawable.placeholder)
                    .error(R.drawable.ic_pic_error)
                    .priority(Priority.HIGH);

new GlideImageLoader(YOUR.imageView,  
                     YOUR.progressBar).load(url,options);

ক্লোনটির জন্য জাভা কোডটি সম্পূর্ণ করুন:

গ্লাইডেমেজলোডার.জভা

public class GlideImageLoader {

    private ImageView mImageView;
    private ProgressBar mProgressBar;

    public GlideImageLoader(ImageView imageView, ProgressBar progressBar) {
        mImageView = imageView;
        mProgressBar = progressBar;
    }

    public void load(final String url, RequestOptions options) {
        if (url == null || options == null) return;

        onConnecting();

        //set Listener & start
        ProgressAppGlideModule.expect(url, new ProgressAppGlideModule.UIonProgressListener() {
            @Override
            public void onProgress(long bytesRead, long expectedLength) {
                if (mProgressBar != null) {
                    mProgressBar.setProgress((int) (100 * bytesRead / expectedLength));
                }
            }

            @Override
            public float getGranualityPercentage() {
                return 1.0f;
            }
        });
        //Get Image
        Glide.with(mImageView.getContext())
                .load(url)
                .transition(withCrossFade())
                .apply(options.skipMemoryCache(true))
                .listener(new RequestListener<Drawable>() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
                        ProgressAppGlideModule.forget(url);
                        onFinished();
                        return false;
                    }

                    @Override
                    public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                        ProgressAppGlideModule.forget(url);
                        onFinished();
                        return false;
                    }
                })
                .into(mImageView);
    }


    private void onConnecting() {
        if (mProgressBar != null) mProgressBar.setVisibility(View.VISIBLE);
    }

    private void onFinished() {
        if (mProgressBar != null && mImageView != null) {
            mProgressBar.setVisibility(View.GONE);
            mImageView.setVisibility(View.VISIBLE);
        }
    }
}

প্রগ্রেসঅ্যাপগ্লাইডমডিউল.জভা

@GlideModule
public class ProgressAppGlideModule extends AppGlideModule {

    @Override
    public void registerComponents(Context context, Glide glide, Registry registry) {
        super.registerComponents(context, glide, registry);
        OkHttpClient client = new OkHttpClient.Builder()
                .addNetworkInterceptor(new Interceptor() {
                    @Override
                    public Response intercept(Chain chain) throws IOException {
                        Request request = chain.request();
                        Response response = chain.proceed(request);
                        ResponseProgressListener listener = new DispatchingProgressListener();
                        return response.newBuilder()
                                .body(new OkHttpProgressResponseBody(request.url(), response.body(), listener))
                                .build();
                    }
                })
                .build();
        registry.replace(GlideUrl.class, InputStream.class, new OkHttpUrlLoader.Factory(client));
    }

    public static void forget(String url) {
        ProgressAppGlideModule.DispatchingProgressListener.forget(url);
    }
    public static void expect(String url, ProgressAppGlideModule.UIonProgressListener listener) {
        ProgressAppGlideModule.DispatchingProgressListener.expect(url, listener);
    }

    private interface ResponseProgressListener {
        void update(HttpUrl url, long bytesRead, long contentLength);
    }

    public interface UIonProgressListener {
        void onProgress(long bytesRead, long expectedLength);
        /**
         * Control how often the listener needs an update. 0% and 100% will always be dispatched.
         * @return in percentage (0.2 = call {@link #onProgress} around every 0.2 percent of progress)
         */
        float getGranualityPercentage();
    }

    private static class DispatchingProgressListener implements ProgressAppGlideModule.ResponseProgressListener {
        private static final Map<String, UIonProgressListener> LISTENERS = new HashMap<>();
        private static final Map<String, Long> PROGRESSES = new HashMap<>();

        private final Handler handler;

        DispatchingProgressListener() {
            this.handler = new Handler(Looper.getMainLooper());
        }

        static void forget(String url) {
            LISTENERS.remove(url);
            PROGRESSES.remove(url);
        }

        static void expect(String url, UIonProgressListener listener) {
            LISTENERS.put(url, listener);
        }

        @Override
        public void update(HttpUrl url, final long bytesRead, final long contentLength) {
            //System.out.printf("%s: %d/%d = %.2f%%%n", url, bytesRead, contentLength, (100f * bytesRead) / contentLength);
            String key = url.toString();
            final UIonProgressListener listener = LISTENERS.get(key);
            if (listener == null) {
                return;
            }
            if (contentLength <= bytesRead) {
                forget(key);
            }
            if (needsDispatch(key, bytesRead, contentLength, listener.getGranualityPercentage())) {
                handler.post(new Runnable() {
                    @Override
                    public void run() {
                        listener.onProgress(bytesRead, contentLength);
                    }
                });
            }
        }

        private boolean needsDispatch(String key, long current, long total, float granularity) {
            if (granularity == 0 || current == 0 || total == current) {
                return true;
            }
            float percent = 100f * current / total;
            long currentProgress = (long) (percent / granularity);
            Long lastProgress = PROGRESSES.get(key);
            if (lastProgress == null || currentProgress != lastProgress) {
                PROGRESSES.put(key, currentProgress);
                return true;
            } else {
                return false;
            }
        }
    }

    private static class OkHttpProgressResponseBody extends ResponseBody {
        private final HttpUrl url;
        private final ResponseBody responseBody;
        private final ResponseProgressListener progressListener;
        private BufferedSource bufferedSource;

        OkHttpProgressResponseBody(HttpUrl url, ResponseBody responseBody,
                                   ResponseProgressListener progressListener) {
            this.url = url;
            this.responseBody = responseBody;
            this.progressListener = progressListener;
        }

        @Override
        public MediaType contentType() {
            return responseBody.contentType();
        }

        @Override
        public long contentLength() {
            return responseBody.contentLength();
        }

        @Override
        public BufferedSource source() {
            if (bufferedSource == null) {
                bufferedSource = Okio.buffer(source(responseBody.source()));
            }
            return bufferedSource;
        }

        private Source source(Source source) {
            return new ForwardingSource(source) {
                long totalBytesRead = 0L;

                @Override
                public long read(Buffer sink, long byteCount) throws IOException {
                    long bytesRead = super.read(sink, byteCount);
                    long fullLength = responseBody.contentLength();
                    if (bytesRead == -1) { // this source is exhausted
                        totalBytesRead = fullLength;
                    } else {
                        totalBytesRead += bytesRead;
                    }
                    progressListener.update(url, totalBytesRead, fullLength);
                    return bytesRead;
                }
            };
        }
    }
}

4
আপনি ঠিক বলেছেন, আমি উত্তর পোস্ট করার পরিবর্তে মন্তব্যগুলি ছেড়ে দিতে চাই। তবে মনে হয় মন্তব্য করার মতো যথেষ্ট খ্যাতি আমার নেই। লিঙ্কটি অবৈধ প্রতিরোধ করতে আমি এখানে প্রয়োজনীয় কোডটি যুক্ত করছি।
মার্ক চেং

অগ্রগতি শতাংশ অগ্রগতি বার ব্যবহার করে দেখায় না, কেবল লোডিং বারটি দেখায় এটি
দ্রুত হয়

অবশেষে এটি কাজ করেছে, কাস্টম অগ্রগতি এবং পটভূমি সহ প্রগতি বারের জন্য আমাকে পরিবর্তন করতে হয়েছিল, ধন্যবাদ
দ্রুত শিক্ষানবিশ

@ কিউক্লিয়ারার আপনি কী আমাকে প্রগতি বারের স্টাইলটি পরিবর্তন করতে পারেন? সুতরাং এটি উপরের ডেমো ইমেজের মতো দেখাচ্ছে?
দারারি নূর অমালি

@ দারারীনুরআমালি আপনি কি উপরের চিত্রগুলিতে কোডটি একই প্রয়োগ করতে চান?
দ্রুত শিক্ষার্থী

12

আমি কোটলিনে একটি অ্যাপ লিখছিলাম এবং এই সঠিক সমস্যাটি ছিল, তবে দুর্ভাগ্যক্রমে, গৃহীত উত্তরটি ছিল জাভাতে। সুতরাং, আমি কোটলিনে এটি আবার লিখেছি।

Glide.with(context)
                .load("<Insert Your URL>")
                .listener(object : RequestListener<Drawable> {
                    override fun onResourceReady(resource: Drawable?, model: Any?, target: Target<Drawable>?, dataSource: DataSource?, isFirstResource: Boolean): Boolean {
                        progressBar.visibility = View.GONE
                        return false
                    }

                    override fun onLoadFailed(e: GlideException?, model: Any?, target: Target<Drawable>?, isFirstResource: Boolean): Boolean {
                        progressBar.visibility = View.GONE
                        return false
                    }
                })
                .into(holder.imageView)

5

আরেকটি কৌশল: এটির পিছনে ImageViewএকটি RelativeLayoutদিয়ে নিজের ভিতরে রাখুন ProgressBar। তারপরে গ্লাইড বা পিকাসোর মাধ্যমে চিত্রটি লোড করুন। এটি কোনও গভীর খনন ছাড়াই আপনার পক্ষে কাজ করবে। আপনাকে আর প্রগতি বারটি লুকানোর বা দেখানোর দরকার নেই। এটি চিত্র দ্বারা সম্পূর্ণরূপে ওভারল্যাপ করা হবে।

<RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/_180sdp">
            <ProgressBar
                android:layout_centerInParent="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
            <ImageView
                android:id="@+id/iv_image"
                android:layout_width="match_parent"
                android:layout_height="@dimen/_180sdp"
                android:scaleType="centerCrop"/>
</RelativeLayout>

4

একটি বৃত্ত লোডিং অগ্রগতি সহ আমার সম্পূর্ণ সমাধান এখানে। আমি মনে করি এটি requestOptionsঅর্জনের জন্য গুণাবলী ব্যবহার করা ভাল ।

CircularProgressDrawable circularProgressDrawable = new CircularProgressDrawable(context);
circularProgressDrawable.setStrokeWidth(5f);
circularProgressDrawable.setCenterRadius(30f);
circularProgressDrawable.start();

RequestOptions requestOptions = new RequestOptions();
requestOptions.placeholder(circularProgressDrawable);
requestOptions.error(R.drawable.ic_image_not_found);
requestOptions.skipMemoryCache(true);
requestOptions.fitCenter();


glide.load(imagePath) //passing your url to load image.
        .load(imagePath)
        .apply(requestOptions) // here you have all options you need
        .transition(DrawableTransitionOptions.withCrossFade()) // 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.
        .listener(requestListener)
        .into(view); //pass imageView reference to appear the image.

এবং আপনি এটি পেয়েছেন।


3

রিকোয়েস্টপশন ব্যবহার করার চেষ্টা করুন

RequestOptions requestOptions = new RequestOptions();
requestOptions.placeholder(R.drawable.ic_placeholder);
requestOptions.error(R.drawable.ic_error);


Glide.with(MainActivity.this)
            .load(url)
            .apply(requestOptions)
            .into(imageview);

গ্লাইড ব্যবহার করে আপনি লোডিং চিত্রটি কার্যকর করতে পারেন এই এক উপায় ।


4
তবে এটি কোনও অগ্রগতি বার যুক্ত করবে না কারণ তিনি যে প্রশ্নে চান এটি কেবল চিত্রটি লোড করবে
সাত্তার

3

হ্যাঁ আমরা গ্লাইড রিকোয়েস্টপশনগুলি ব্যবহার করে ইমেজভিউতে লোডারটি প্রদর্শন করতে পারি।
1) অ্যাপ স্তরের গ্রেডল ফাইলটিতে কমপাইল লাইনের নীচে ব্যবহার করুন।

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

2) অঙ্কনযোগ্যটিতে অগ্রগতি_নিমেশন.এক্সএমএল ফাইল যুক্ত করুন

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/loader_test"
    android:pivotX="50%"
    android:pivotY="50%"/>

3) অঙ্কনযোগ্য মধ্যে লোডার_স্টে.পিএনজি চিত্র নীচে যুক্ত করুন
এখানে চিত্র বর্ণনা লিখুন

4) নিচে অনুরোধ অনুরোধ তৈরি করুন

public  RequestOptions options = new RequestOptions()
            .centerCrop()
            .placeholder(R.drawable.progress_animation)
            .error(R.drawable.user_image)
            .diskCacheStrategy(DiskCacheStrategy.ALL)
            .priority(Priority.HIGH)
            .dontAnimate()
            .dontTransform();

5) অবশেষে নীচের মত চিত্র লোড করতে এটি ব্যবহার করুন

Glide.with(this).load(//*Your image url*//).apply(options).into(image_view);

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