2

我想在从远程服务器加载图像时在gridview中使用预加载器图像。当它从服务器加载时,我想显示这样的预加载器图像(与进度条或进度条相同)。

我想在 gridview 图像项或预加载器图像中显示小的进度条我不知道我可以使用什么,这对我来说很容易实现这一点。

任何人都可以帮助我如何在android中做这件事。

我想让它像IOS一样。此图像来自 IOS。

在此处输入图像描述

这是我的 android 布局 xml 文件:

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>

此 xml 文件用于 Gridview 中每个网格的项目。

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

2 回答 2

1

通用图像加载器

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

行图像.xml

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

在您的适配器构造函数中

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

在自定义适配器的 getview 中

  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。

首先,存根图像与进度条一起显示。在这种情况下,ai 使用了启动器图标,因此它看起来被拉伸了

下载图像后,进度条会消失,存根图像会被下载的图像替换。甚至缓存图像。

在此处输入图像描述

于 2013-05-04T10:19:44.547 回答
0

尝试使用来自 github.com 的 Android-Universal-Image-Loader api

Android-Universal-Image-Loader

我认为它对你有帮助。

谢谢。

于 2013-05-04T09:10:33.347 回答