안드로이드의 그리드 뷰에서 프리 로더를 사용하는 방법

Question

원격 서버에서 로딩 할 때 이미지의 gridview에 프리 로더 이미지를 사용하고 싶습니다. 그 동안 서버에서로드하는 동안 나는 이와 같은 프리 로더 이미지를 보여주고 싶다. (진행 막대 나 진행 막대와 동일).

그리드 뷰 이미지 항목 또는 프리 로더 이미지에 작은 진행 표시 줄을 표시하고 싶습니다.이 기능을 사용하기 위해 내가 무엇을 사용할 수 있는지 쉽게 알 수 있습니다.

아무도 내게 안드로이드 에서이 일을 할 수있는 도와주세요 수 없습니다.

IOS와 같이 만들고 싶습니다. 이 이미지는 IOS 형식입니다.

activity_image_grid.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" > 

    <include 
     android:id="@+id/title_bar" 
     android:layout_alignParentTop="true" 
     layout="@layout/activity_top_header_bar" /> 

    <GridView 
     android:id="@+id/gridview" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:layout_below="@id/title_bar" 
     android:gravity="center" 
     android:horizontalSpacing="4dip" 
     android:numColumns="4" 
     android:padding="5dip" 
     android:stretchMode="columnWidth" 
     android:verticalSpacing="4dip" /> 

</RelativeLayout> 

GRIDVIEW의 각 그리드 항목에 대한 사용이 xml 파일 :

은 여기 내 안드로이드 레이아웃 XML 파일입니다.

item_grid_image.xml

<?xml version="1.0" encoding="utf-8"?> 
<ImageView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/image" 
    android:layout_width="fill_parent" 
    android:layout_height="75dp" 
    android:adjustViewBounds="true" 
    android:contentDescription="@string/descr_image" 
    android:scaleType="centerCrop" /> 

소스 코드 :

public class ImageGridActivity extends BaseActivity { 
    private static final String TAG = "[ImageGridActivity]"; 

    private DisplayImageOptions options; 

    private PullToRefreshGridView mPullRefreshGridView; 

    private GridView mGridView = null; 
    ArrayList<GallaryImage> mGridViewImagesList; 
    private ImageAdapter mImageAdapter = null; 

    private String mImageUrl = null; 
    private String mGallaryTitle = null; 

    // private ImageLoader imageLoader = ImageLoader.getInstance(); 

    @Override 
    public void onCreate(final Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_image_grid); 
     options = new DisplayImageOptions.Builder() 
       .showStubImage(R.drawable.photo_default) 
       .showImageForEmptyUri(R.drawable.photo_default) 
       .showImageOnFail(R.drawable.ic_error).cacheInMemory() 
       .cacheOnDisc().bitmapConfig(Bitmap.Config.RGB_565).build(); 

     final Bundle bundle = getIntent().getExtras(); 
     if (bundle != null) { 
      mImageUrl = bundle.getString(Constants.GALLARY_FETCH_URL); 

      mGallaryTitle = bundle.getString(Constants.GALLARY_TYPE); 
      if (mGallaryTitle != null) { 

       Locale loc = Locale.getDefault(); 
       TextView tvTitleText = (TextView) findViewById(R.id.tv_title_bar_text); 
       tvTitleText.setText(mGallaryTitle.toUpperCase(loc)); 
      } 

      mPullRefreshGridView = (PullToRefreshGridView) findViewById(R.id.pull_refresh_grid); 
      mPullRefreshGridView.setMode(Mode.PULL_FROM_START); 
      mGridView = mPullRefreshGridView.getRefreshableView(); 

      mGridViewImagesList = Utility.getImagesList(mImageUrl, 
        ImageGridActivity.this); 

      if (mGridViewImagesList != null && !mGridViewImagesList.isEmpty()) { 
       mImageAdapter = new ImageAdapter(mGridViewImagesList); 
       ((GridView) mGridView).setAdapter(mImageAdapter); 
      } else { 
       // did refresh after the previous images are loaded in the 
       // gridview. 
       if (Utility.checkConnection(ImageGridActivity.this)) { 
        Log.i(TAG, 
          "Wifi/Internet Connection found , have to parse the xml"); 

        final FetchImagesAsyncTaskFeed asyncTask = new FetchImagesAsyncTaskFeed(); 
        asyncTask.execute(mImageUrl); 

       } 

      } 

      mGridView.setOnItemClickListener(new OnItemClickListener() { 
       @Override 
       public void onItemClick(final AdapterView<?> parent, 
         final View view, final int position, final long id) { 

        if (mGridViewImagesList != null 
          && !mGridViewImagesList.isEmpty()) { 
         startImagePagerActivity(mGridViewImagesList, position); 
        } else { 
         Log.d(TAG, "There is no image about this grid image"); 
        } 
       } 
      }); 

      // Set a listener to be invoked when the list should be refreshed. 
      mPullRefreshGridView 
        .setOnRefreshListener(new OnRefreshListener2<GridView>() { 

         @Override 
         public void onPullDownToRefresh(
           PullToRefreshBase<GridView> refreshView) { 
          if (mImageUrl != null) { 
           final FetchImagesAsyncTaskFeed asyncTask = new FetchImagesAsyncTaskFeed(); 
           asyncTask.execute(mImageUrl); 
          } 
         } 

         @Override 
         public void onPullUpToRefresh(
           PullToRefreshBase<GridView> refreshView) { 

         } 
        }); 

     } 

    } 

    /** 
    * @param position 
    */ 
    private void startImagePagerActivity(
      final ArrayList<GallaryImage> mImageAttributesList, 
      final int position) { 
     String[] urls = new String[mImageAttributesList.size()]; 
     final Intent intent = new Intent(this, ImagePagerActivity.class); 
     intent.putExtra(Constants.GALLARY_IMAGE_POSITION_BUNDLE_KEY, position); 
     for (int i = 0; i < mImageAttributesList.size(); i++) { 
      urls[i] = mImageAttributesList.get(i).mImageUrl; 
     } 
     intent.putExtra(Constants.GALLARY_IMAGES_IMAGE_BUNDLE_KEY, urls); 
     startActivity(intent); 
    } 

    public class ImageAdapter extends BaseAdapter { 
     ArrayList<GallaryImage> imageList = null; 

     public ImageAdapter(final ArrayList<GallaryImage> imageAttributesList) { 
      this.imageList = imageAttributesList; 

     } 

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

     @Override 
     public Object getItem(final int position) { 
      return imageList.get(position); 
     } 

     @Override 
     public long getItemId(final int position) { 
      return position; 
     } 

     @Override 
     public View getView(final int position, final View convertView, 
       final ViewGroup parent) { 
      final ImageView imageView; 
      if (convertView == null) { 
       imageView = (ImageView) getLayoutInflater().inflate(
         R.layout.item_grid_image, parent, false); 
      } else { 
       imageView = (ImageView) convertView; 
      } 

      imageLoader.displayImage(imageList.get(position).mImageUrl, 
        imageView, options); 

      return imageView; 
     } 

     /** 
     * @param updateData 
     */ 
     public void updatedData(ArrayList<GallaryImage> imgList) { 
      this.imageList = imgList; 
      notifyDataSetChanged(); 
     } 
    } 

    private class FetchImagesAsyncTaskFeed extends 
      AsyncTask<String, Void, String> { 
     @Override 
     protected void onPreExecute() { 

     } 

     @Override 
     protected String doInBackground(final String... urls) { 
      try { 
       Thread.sleep(3000); 
       final String imageUrl = urls[0]; 
       final GridViewImagesXMLHandler mGallaryXMLHandler = new GridViewImagesXMLHandler(); 
       mGridViewImagesList = mGallaryXMLHandler.getImages(imageUrl); 
       if (mGridViewImagesList != null 
         && !mGridViewImagesList.isEmpty()) { 
        Utility.setImagesInfromation(imageUrl, mGridViewImagesList, 
          ImageGridActivity.this); 
       } 
      } catch (final Exception e) { 
       Log.e(TAG, "Exception in fetch images from the url", e); 
      } 
      return null; 
     } 

     @Override 
     protected void onPostExecute(final String result) { 
      if (mGridViewImagesList != null && !mGridViewImagesList.isEmpty()) { 
       if (mImageAdapter != null) { 
        mImageAdapter.updatedData(mGridViewImagesList); 
        mPullRefreshGridView.onRefreshComplete(); 
       } else { 
        mImageAdapter = new ImageAdapter(mGridViewImagesList); 
        ((GridView) mGridView).setAdapter(mImageAdapter); 
       } 
      } 
      mPullRefreshGridView.onRefreshComplete(); 
     } 
    } 
} 

Answer 1

봅니다 github.com

Android-Universal-Image-Loader

에서 안드로이드 범용 - 이미지 - 로더 API를 사용하려면

도움이된다고 생각합니다.

감사합니다.

Answer 2

범용하여 ImageLoader

https://github.com/nostra13/Android-Universal-Image-Loader

rowimage.xml 사용자 정의 어댑터의 당신의 getView에서 어댑터 생성자

 ImageLoader imageLoader; 
     DisplayImageOptions options; 

     File cacheDir = StorageUtils.getOwnCacheDirectory(a, "MyRaghu"); 


// Get singletone instance of ImageLoader 
    imageLoader = ImageLoader.getInstance(); 
// Create configuration for ImageLoader (all options are optional) 
    ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(a) 
       // You can pass your own memory cache implementation 
      .discCacheExtraOptions(1024, 1024, CompressFormat.PNG, 100) 
      .discCache(new UnlimitedDiscCache(cacheDir)) // You can pass your own disc cache implementation 
      .discCacheFileNameGenerator(new HashCodeFileNameGenerator()) 
      .enableLogging() 
      .build(); 
// Initialize ImageLoader with created configuration. Do it once. 
imageLoader.init(config); 
    //imageLoader.init(ImageLoaderConfiguration.createDefault(a)); 
    // imageLoader=new ImageLoader(activity.getApplicationContext()); 
    options = new DisplayImageOptions.Builder() 
    .showStubImage(R.drawable.ic_launcher) 
    .cacheInMemory() 
    .cacheOnDisc() 
    .displayer(new RoundedBitmapDisplayer(20)) 
    .build(); 

에서

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" > 

<ImageView 
    android:id="@+id/ivv" 
    android:layout_gravity="center" 
    android:layout_width="300dp" 
    android:layout_height="300dp" 

    /> 
<ProgressBar 
    android:id="@+id/pb" 
    android:layout_centerInParent="true" 
    android:layout_gravity="center" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"/> 

</RelativeLayout> 

public View getView(int position, View convertView, ViewGroup parent) { 
    View vi=convertView; 
    if(convertView==null) 
    vi = inflater.inflate(R.layout.rowimage, null); 

    ImageView image=(ImageView)vi.findViewById(R.id.ivv); 
    ProgressBar pb= (ProgressBar)vi.findViewById(R.id.pb); 
    display(null, data.get(position).toString(), pb); 
    //imageLoader.displayImage(data.get(position).toString(), image,options); 

    return vi; 
} 

public void display(ImageView img, String url, final ProgressBar spinner) 
{ 
    imageLoader.displayImage(url, img, options, new ImageLoadingListener() { 
     @Override 
     public void onLoadingStarted(String imageUri, View view) { 
     spinner.setVisibility(View.VISIBLE); 
     } 
     @Override 
     public void onLoadingFailed(String imageUri, View view, FailReason failReason) { 
     spinner.setVisibility(View.GONE); 


     } 
     @Override 
     public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage)      { 
     spinner.setVisibility(View.GONE); 
     } 
     @Override 
     public void onLoadingCancelled(String imageUri, View view) { 

     } 

}); 
} 

결과 스냅 샷 결과 listview가 사용되었지만 gridview에도 사용할 수 있습니다.

먼저 스텁 이미지가 진행률 막대와 함께 표시됩니다. 이 경우 런처 아이콘을 사용하여 이미지를 확대했습니다.

이미지가 다운로드되면 진행률 표시 줄이 닫히고 스텁 이미지는 다운로드 된 이미지로 대체됩니다. 심지어 이미지를 캐시합니다.