Wie mache ich Progress Bar Spinner während das Fragment seine Bilder lädt (mit Glide)?

Ich benutze ViewPager in meiner App, es enthält 7 Fragmente. Jedes Fragment enthält viele Bilder. Ich möchte den Lade-Spinner anzeigen, während das Fragment die Bilder mit Glide lädt (Die Bilder stammen nicht aus dem Internet! Das Herunterladen ist nicht nötig). Es dauert ungefähr eine halbe Sekunde, um die Bilder zu laden, und es scheint, dass es eine Verzögerung gibt. Also ich möchte wissen, wie die Spinner Progress Bar angezeigt wird.Wie mache ich Progress Bar Spinner während das Fragment seine Bilder lädt (mit Glide)?

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

Fragment:

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>

wo ich die ProgressBar setzen Sie und wie?

Vielen Dank !!!

Quelle

2016-06-10 Itiel Maimon

http://stackoverflow.com/a/32883051/5148289 hier meine Antwort überprüfen .. habe ich verwendet 'picasso' aber es kann immer noch von' Glide' –

Dies ist nur triviale Lösung. Sie können Ihr Bild mit einem Fortschrittsbalken wie diesem verknüpfen (umschlossen von 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>

Und es wäre hilfreich, Hilfsklasse mit statischen Methode wie folgt zu erstellen. Dies hilft Ihnen, wenn Sie Änderungen an der Glide-Konfiguration haben.

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

Und rufen Sie diese Methode auf Ihre Aktivität, um jedes Bild anzuzeigen.

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....

Quelle

2016-06-16 02:52:28 ikhsan

Danke !! Ich möchte aber nicht für jedes Bild nur eine Progress Bar anzeigen, also wie kann ich das machen? –

versuchen Sie dies,

Sie XML-Layout.

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

Und mit 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);

Quelle

2016-06-10 12:45:18

getan werden, aber ich habe mehr als ein Bild so Wo soll ich es hinstellen? –

Und ich kann die ProgressBar nicht initialisieren –

können Sie Ihre XML-Layout teilen.so, dass ich eine Idee bekommen kann –

Wie mache ich Progress Bar Spinner während das Fragment seine Bilder lädt (mit Glide)?

Antwort

Verwandte Themen