Как заставить Progress Bar Spinner в то время как фрагмент загружает свои изображения (с помощью Glide)?

Я использую ViewPager в своем приложении, он содержит 7 фрагментов. Каждый фрагмент содержит множество изображений. Я хочу отображать счетчик загрузки, пока фрагмент загружает изображения с помощью Glide (изображения не из Интернета! Нет необходимости в загрузке). Загрузка изображений занимает около полсекунды, и кажется, что есть задержка. Поэтому я хочу знать, как отображать индикатор выполнения Spinner.

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

Фрагмент.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 и как?

Спасибо большое!!!


android android-fragments android-viewpager android-glide android-progressbar
person Itiel Maimon    schedule 10.06.2016    source источник
comment
stackoverflow.com/a/32883051/5148289 проверьте мой ответ здесь.. я использовал picasso, но это все еще можно сделать с помощью Glide   -  person V-rund Puro-hit    schedule 10.06.2016

Ответы (2)


arrow_upward
1
arrow_downward

Это просто тривиальное решение. Вы можете связать свое изображение с индикатором выполнения следующим образом (обернутым 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>

И было бы полезно создать вспомогательный класс со статическим методом, похожим на этот. Это поможет вам, когда у вас есть изменения в конфигурации 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);
     }
}

И вызовите этот метод в своей деятельности, чтобы показать каждое изображение.

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....
person ikhsanudinhakim    schedule 16.06.2016
comment
Спасибо!! но я хочу отображать только один индикатор выполнения не для каждого изображения, так как я могу это сделать? - person Itiel Maimon; 17.06.2016

arrow_upward
1
arrow_downward

попробуй это,

Вы 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.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);
person Pradeep Gupta    schedule 10.06.2016
comment
Но у меня есть более одного изображения, так куда мне его поместить? - person Itiel Maimon; 10.06.2016
comment
И я не могу инициализировать ProgressBar - person Itiel Maimon; 10.06.2016
comment
Можете ли вы поделиться своим XML-макетом, чтобы я мог получить некоторое представление - person Pradeep Gupta; 10.06.2016
comment
Хорошо, я только что сделал @Pradeep Gupta - person Itiel Maimon; 10.06.2016
comment
вместо того, чтобы использовать количество изображений в XML, почему бы вам не попробовать список в XML? - person Pradeep Gupta; 13.06.2016
comment
Потому что это очень просто. Почему я должен использовать список? - person Itiel Maimon; 13.06.2016
comment
у вас есть несколько одинаковых представлений, в которых вы должны показывать только изображения. Вместо использования нескольких ImageView и получения идентификаторов каждого ImgaView лучше использовать Listview . И вы можете правильно отображать индикатор выполнения для изображения перед загрузкой. - person Pradeep Gupta; 13.06.2016
comment
взгляните на это, вы получите представление theopentutorials.com/tutorials/android/listview/ - person Pradeep Gupta; 13.06.2016
comment
Я предпочитаю использовать несколько изображений вместо listView. Как я могу сделать счетчик с моим кодом? - person Itiel Maimon; 13.06.2016
comment
используйте приведенный выше макет для пользовательского адаптера. - person Pradeep Gupta; 13.06.2016
comment
@ItielMaimon На самом деле правильным решением является использование gridview или listview и использование вашего собственного адаптера. Но если вы хотите сделать по-своему, вы должны использовать несколько индикаторов выполнения, связанных с каждым изображением, чтобы указать, было ли загружено все изображение или нет. - person ikhsanudinhakim; 15.06.2016
comment
@ikhsan Но как связать индикатор выполнения с изображениями? Можете ли вы написать код, пожалуйста? - person Itiel Maimon; 15.06.2016
comment
@ItielMaimon, я просто показываю код. Не очень хорошее решение, но оно может соответствовать вашей проблеме. - person ikhsanudinhakim; 16.06.2016