조각이 이미지를로드하는 동안 진행률 표시 줄을 만드는 방법 (활공으로)?

Question

내 앱에서 ViewPager를 사용하고 있습니다. 7 조각으로 구성되어 있습니다. 각 조각에는 많은 이미지가 포함되어 있습니다. 조각이 글라이드로 이미지를로드하는 동안 로딩 스피너를 표시하고 싶습니다 (이미지는 인터넷에서 가져온 것이 아니므로 다운로드 할 필요가 없습니다). 이미지를로드하는 데 약 0.5 초가 걸리고 지연이있는 것 같습니다. 그래서 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; 
} 
} 

Fragment.xml : 나는 방법의 ProgressBar 및 배치해야합니까

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

?

대단히 감사합니다!

Answer 1

이것은 단지 간단한 해결책입니다. 이미지를 이와 같이 진행률 표시 줄과 연결할 수 있습니다 (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> 

그리고 이렇게 정적 메서드로 헬퍼 클래스를 만드는 것이 도움이 될 것입니다. 글라이드 구성을 변경하면 도움이됩니다.

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

Answer 2

시도해보십시오.

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