如何添加ProgressBar然后在ListView中显示远程ImageView?

时间:2014-09-17 04:17:33

标签: android image listview android-listview android-drawable

我有一份收据数据的ListView,其中包括供应商,收据价值和收据上的日期。

我想在我的ListView中添加一张延迟加载的收据图片。我有一个存储在AWS位置的收据的缩略图,但收据图像可能是“处理”而不是立即可用。遗憾的是,远程图像的URL在我当前的ListView数据集中不可用,这意味着我必须调用异步任务来检索适配器中每个显示行的收据图像数据。

为了获取收据图像数据,我创建了一个服务调用(我正在使用Retrofit)来命中我的API以下拉包含收据图像缩略图位置的JsonObject或图像仍在处理的指示/不可用。通过收据ID请求收据图像数据。

以下是我目前的情况:

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View row = convertView;
        ReceiptHolder holder = null;

        if (row == null) {
            LayoutInflater inflater = ((Activity)context).getLayoutInflater();
            row = inflater.inflate(layoutResourceId, parent, false);

            holder = new ReceiptHolder();
            holder.txtVendor = (TextView)row.findViewById(R.id.vendor_field);
            holder.txtAmount = (TextView)row.findViewById(R.id.amount_field);
            holder.txtDate = (TextView)row.findViewById(R.id.date_field);                           

            row.setTag(holder);
        } else {
            holder = (ReceiptHolder)row.getTag();
        }

        Receipts r = data[position];
        String fullValue = r.amount_symbol + r.amount;
        holder.txtVendor.setText(r.vendor);
        holder.txtAmount.setText(fullValue);
        holder.txtDate.setText(r.date);

        return row;
    }

    public class ReceiptHolder {
        public TextView txtVendor;
        public TextView txtAmount;
        public TextView txtDate;
        public ProgressBar receiptFetch;
        public ImageView receiptThumb;
    }

因此,当我的自定义适配器执行getView时,我希望发生以下情况:

  1. ProgressBar receiptFetch在初始绘制时设置为可见,表示图像仍在检索/处理中。我希望收据数据可见,ProgressBar表示仍在检索或处理图像。
  2. 某种非阻塞机制,可以返回并将ProgressBar的可见性设置为GONE,同时将每个 项的异步检索URL设置为ImageView receiptThumb作为任务完成特定的
  3. 现在,这是我的问题:

    如何在不挂断用户体验的情况下让View holder模式更好玩?理想情况下,当适配器正在执行其操作时,我可以启动异步任务以检索每个收据的收据图像数据,同时填充收据数据固有的其他字段...但我不知道如何捕获响应以转向关闭ProgressBar并返回填充ImageView。

    我一直没有成功地涉足这一点,我很难过。我的问题有意义吗?有什么想法吗?

2 个答案:

答案 0 :(得分:0)

您可以使用UniversalImageLoader库加载远程图像。

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

final View imageLayout = inflater.inflate(R.layout.list_item, null);
final ImageView imageView = ...

imageLoader.displayImage(images[position], imageView, options, new SimpleImageLoadingListener() {
    @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);
    }
});

答案 1 :(得分:0)

Picasso。毕加索就是答案。

通用图像加载器也可以工作,但对于我试图解决的问题来说简直太过分了。 Picasso执行内联延迟加载,并且可以选择在检索缩略图时显示临时@Drawable。

我最终做了以下事情 - 毕加索照顾它后,再也不需要ProgresBar了。请注意,Picasso可以以静态方式使用 - 但我必须为我们的网络配置创建一个自定义的OkHttpClient:

@Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View row = convertView;
        ReceiptHolder holder = null;

        if (row == null) {
            LayoutInflater inflater = ((Activity) context)
                    .getLayoutInflater();
            row = inflater.inflate(layoutResourceId, parent, false);

            holder = new ReceiptHolder();
            holder.txtVendor = (TextView) row
                    .findViewById(R.id.vendor_field);
            holder.txtAmount = (TextView) row
                    .findViewById(R.id.amount_field);
            holder.txtDate = (TextView) row.findViewById(R.id.date_field);              
            holder.receiptThumb = (ImageView) row
                    .findViewById(R.id.receipt_image);

            row.setTag(holder);
        } else {
            holder = (ReceiptHolder) row.getTag();
        }

        Receipts r = data[position];
        String fullValue = r.amount_symbol + r.amount;
        holder.txtVendor.setText(r.vendor);
        holder.txtAmount.setText(fullValue);
        holder.txtDate.setText(r.date);     

        picasso.with(getActivity())             
            .load(r.medium_jpg_url)             
            .placeholder(R.drawable.ic_empty)
            .error(R.drawable.ic_error)
            .resize(100, 100)
            .centerCrop()
            .into(holder.receiptThumb);

        return row;
    }