如何在片段加载图像时制作 Progress Bar Spinner（使用 Glide）？

Question

我在我的应用程序中使用 ViewPager，它包含 7 个片段。每个片段包含许多图像。我想在片段使用 Glide 加载图像时显示加载微调器（图像不是来自互联网！无需下载）。加载图像大约需要半秒钟，而且似乎有延迟。所以我想知道如何显示Spinner Progress Bar。

MainActivity.java :

  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    setupViewPager(viewPager);
    if (isRTL())
        viewPager.setCurrentItem(7);

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
        tabLayout.setLayoutDirection(View.LAYOUT_DIRECTION_LTR);
    }
    tabLayout.setupWithViewPager(viewPager);
}

 public static boolean isRTL() {
    return isRTL(Locale.getDefault());
}

public static boolean isRTL(Locale locale) {
    final int directionality = Character.getDirectionality(locale.getDisplayName().charAt(0));
    return directionality == Character.DIRECTIONALITY_RIGHT_TO_LEFT ||
            directionality == Character.DIRECTIONALITY_RIGHT_TO_LEFT_ARABIC;
}

private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());

    if (isRTL()) {
        // The view has RTL layout
        adapter.addFragment(new S7(), getString(R.string.stage7));
        adapter.addFragment(new S6(), getString(R.string.stage6));
        adapter.addFragment(new S5(), getString(R.string.stage5));
        adapter.addFragment(new S4(), getString(R.string.stage4));
        adapter.addFragment(new S3(), getString(R.string.stage3));
        adapter.addFragment(new S2(), getString(R.string.stage2));
        adapter.addFragment(new S1(), getString(R.string.stage1));
        adapter.addFragment(new Intro(), getString(R.string.Introduction));
    } else {
        // The view has LTR layout
        adapter.addFragment(new Intro(), getString(R.string.Introduction));
        adapter.addFragment(new S1(), getString(R.string.stage1));
        adapter.addFragment(new S2(), getString(R.string.stage2));
        adapter.addFragment(new S3(), getString(R.string.stage3));
        adapter.addFragment(new S4(), getString(R.string.stage4));
        adapter.addFragment(new S5(), getString(R.string.stage5));
        adapter.addFragment(new S6(), getString(R.string.stage6));
        adapter.addFragment(new S7(), getString(R.string.stage7));
    }
    viewPager.setAdapter(adapter);
}

class ViewPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public ViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void addFragment(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }
}

片段：

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.bumptech.glide.Glide;


public class Intro extends Fragment {

public Intro() {
    // Required empty public constructor
}

@Override
public View onCreateView(LayoutInflater inflater, final ViewGroup container,
                         Bundle savedInstanceState) {

     View rootView = inflater.inflate(R.layout.fragment_intro, container, false);

     ImageView image1 = (ImageView)rootView.findViewById(R.id.imageView_S0P1);
     ImageView image2 = (ImageView)rootView.findViewById(R.id.imageView_S0P2);
     ImageView image3 = (ImageView)rootView.findViewById(R.id.imageView_S0P3);
     ImageView image4 = (ImageView)rootView.findViewById(R.id.imageView_S0P4);
     ImageView image5 = (ImageView)rootView.findViewById(R.id.imageView_S0P5);
     ImageView image6 = (ImageView)rootView.findViewById(R.id.imageView_S0P6);
     ImageView image7 = (ImageView)rootView.findViewById(R.id.imageView_S0P7);
     ImageView image8 = (ImageView)rootView.findViewById(R.id.imageView_S0P8);
     ImageView image9 = (ImageView)rootView.findViewById(R.id.imageView_S0P9);
     ImageView image10 = (ImageView)rootView.findViewById(R.id.imageView_S0P10);
     ImageView image11 = (ImageView)rootView.findViewById(R.id.imageView_S0P11);
     ImageView image12 = (ImageView)rootView.findViewById(R.id.imageView_S0P12);
     ImageView image13 = (ImageView)rootView.findViewById(R.id.imageView_S0P13);


    if (image1.getDrawable()==null) {
        Glide.with(rootView.getContext()).load(R.drawable.s0p1).asBitmap().into(image1);
        Glide.with(rootView.getContext()).load(R.drawable.s0p2).asBitmap().into(image2);
        Glide.with(rootView.getContext()).load(R.drawable.s0p3).asBitmap().into(image3);
        Glide.with(rootView.getContext()).load(R.drawable.s0p4).asBitmap().into(image4);
        Glide.with(rootView.getContext()).load(R.drawable.s0p5).asBitmap().into(image5);
        Glide.with(rootView.getContext()).load(R.drawable.s0p6).asBitmap().into(image6);
        Glide.with(rootView.getContext()).load(R.drawable.s0p7).asBitmap().into(image7);
        Glide.with(rootView.getContext()).load(R.drawable.s0p8).asBitmap().into(image8);
        Glide.with(rootView.getContext()).load(R.drawable.s0p9).asBitmap().into(image9);
        Glide.with(rootView.getContext()).load(R.drawable.s0p10).asBitmap().into(image10);
        Glide.with(rootView.getContext()).load(R.drawable.s0p11).asBitmap().into(image11);
        Glide.with(rootView.getContext()).load(R.drawable.s0p12).asBitmap().into(image12);
        Glide.with(rootView.getContext()).load(R.drawable.s0p13).asBitmap().into(image13);
    }

                // Inflate the layout for this fragment
        return rootView;
 }
}

Fragment.xml :

 <?xml version="1.0" encoding="utf-8"?>
<ScrollView
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="appinventor.ai_itiel_maimon.Rubiks_cube.Intro">

 <LinearLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:paddingBottom="@dimen/banner_ad_height"
     android:orientation="vertical">

     <ProgressBar
         android:id="@+id/progress_bar"
         android:layout_width="40dp"
         android:layout_height="40dp"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P1"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P2"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P3"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P4"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P5"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P6"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P7"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P8"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P9"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P10"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P11"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P12"
         android:contentDescription="@string/image_description"/>

     <ImageView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:adjustViewBounds="true"
         android:id="@+id/imageView_S0P13"
         android:contentDescription="@string/image_description"/>

 </LinearLayout>

</ScrollView>

我应该把 ProgressBar 放在哪里，怎么放？

非常感谢！！！

Answer 1

试试这个，

你XML布局。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">


    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_centerInParent="true" />
    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/imageview"
        android:scaleType="centerCrop"
        />
</RelativeLayout>

并使用 Glide。

Glide.with(mActivity).load("Your Image Path").asBitmap().listener(new RequestListener<String, GlideDrawable>() {
            @Override
            public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
                return false;
            }

            @Override
            public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
                progress_bar.setVisibility(View.GONE);

                return false;
            }
        }).into(imageView);

Answer 2

这只是简单的解决方案。您可以像这样将您的图像与进度条相关联（由 RelativeLayot 包装）。

    <?xml version="1.0" encoding="utf-8"?>
    <ScrollView
        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="appinventor.ai_itiel_maimon.Rubiks_cube.Intro">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="@dimen/banner_ad_height"
            android:orientation="vertical">
            <!-- IMAGE 1 -->
            <RelativeLayout
                android:layout_width="match_parent"                                  
                android:layout_height="wrap_content">
                <ProgressBar
                     android:id="@+id/pb1"
                     android:layout_width="40dp"
                     android:layout_height="40dp"
                     android:layout_centerInParent="true" />
                <ImageView
                     android:id="@+id/imageView_S0P1"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:adjustViewBounds="true" 
                     android:layout_centerInParent="true"  
                     android:scaleType="centerCrop" />
             </RelativeLayout>

            <!-- IMAGE 2 -->
            <RelativeLayout
                android:layout_width="match_parent"                                  
                android:layout_height="wrap_content">
                <ProgressBar
                     android:id="@+id/pb2"
                     android:layout_width="40dp"
                     android:layout_height="40dp"
                     android:layout_centerInParent="true" />
                <ImageView
                     android:id="@+id/imageView_S0P2"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:adjustViewBounds="true" 
                     android:layout_centerInParent="true"   
                     android:scaleType="centerCrop" />
             </RelativeLayout>

             ......... and so on .....

        </LinearLayout>
    </ScrollView>

用静态方法创建助手 class 会很有帮助，如下所示。当您对 Glide 配置进行更改时，这对您有帮助。

public class ImageLoader{

   public static showImage(ImageView imageView, ProgressBar progressBar){
         Glide.with(mActivity).load(imagePath).asBitmap().listener(new RequestListener<String, GlideDrawable>() {

             @Override
             public boolean onException(Exception e, String model, Target<GlideDrawable> target, boolean isFirstResource) {
                //handle error
                return false;
             } 

             @Override
             public boolean onResourceReady(GlideDrawable resource, String model, Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) {
                 progressBar.setVisibility(View.GONE);
               return false;
             }
         }).into(imageView);
     }
}

然后在 activity 上调用该方法来显示每张图片。

ImageView image1 = (ImageView)rootView.findViewById(R.id.imageView_S0P1);
ProgressBar pb1 = (ProgressBar)rootView.findViewById(R.id.pb1);

ImageLoader.showImage(image1, pb1);
ImageLoader.showImage(image2, pb2);
... and so on....

如何在片段加载图像时制作 Progress Bar Spinner（使用 Glide）？

How to make Progress Bar Spinner while fragment load its images (with Glide)?

android

android-fragments

android-viewpager

android-progressbar

android-glide