如何使用Universal Image Loader在ViewPager上启用缩放功能？

Question

我在Android上开发了一个画廊应用程序，从服务器获取图片并显示在viewpager上。为此我使用了通用图像加载器。我的viewpager工作正常，但现在我想添加缩放功能，如缩小/放大/捏合缩放。为此，我用TouchImageView替换了view pager的图像，但如果我使用TouchImageView，则在图像加载时如果进度条正在显示，那么当进度条被隐藏后，图像就不会出现。我不知道为什么会这样，如果我使用TouchImageView。请告诉我解决方法？

图片视图页面活动的代码

package info.androidhive.slidingmenu;

import info.androidhive.slidingmenu.R;
import info.androidhive.slidingmenu.adapter.ImageAdapter;
import info.androidhive.slidingmenu.adapter.ImagePagerAdapter;
import info.androidhive.slidingmenu.util.TouchImageView;
import android.annotation.SuppressLint;
import android.app.ActionBar;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.KeyEvent;
import android.view.MenuItem;
import android.widget.Button;
import android.widget.TextView;

public class ImageViewPager extends Activity {
    // Declare Variable
    int position;
    Button delete, gimmy, done;
    ViewPager viewpager;
    ImageAdapter imageAdapter;
    ImagePagerAdapter pageradapter;
    TouchImageView imageView;
    TextView text;
    Runnable r;


    @SuppressLint("NewApi")
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Set title for the ViewPager
        setContentView(R.layout.view_pager);
        ActionBar bar = getActionBar();
        bar.setDisplayHomeAsUpEnabled(true);
        bar.setHomeButtonEnabled(true);
        setTitle("ViewPager");
        Intent p = getIntent();
        position = p.getExtras().getInt("id");
        pageradapter = new ImagePagerAdapter(ImageViewPager.this);
        viewpager = (ViewPager) findViewById(R.id.pager);
        viewpager.setAdapter(pageradapter);
        viewpager.setCurrentItem(position);

    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // TODO Auto-generated method stub

        switch (item.getItemId()) {
        case android.R.id.home:

            finish();
            overridePendingTransition(R.anim.slide_enter, R.anim.slide_exit);
            return true;

        default:
            return super.onOptionsItemSelected(item);

        }

    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            Intent p = new Intent(getApplicationContext(), SlideImages.class);
            // p.putExtra("id", pos+1);
            startActivity(p);
        }

        return super.onKeyDown(keyCode, event);
    }
}

view_pager.xml

    <?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000" />

ViewPager适配器的代码

package info.androidhive.slidingmenu.adapter;

import info.androidhive.slidingmenu.app.AppController;
import info.androidhive.slidingmenu.bean.Wallpaper;
import info.androidhive.slidingmenu.util.TouchImageView;

import java.util.List;

import com.nostra13.universalimageloader.core.DisplayImageOptions;
import com.nostra13.universalimageloader.core.ImageLoader;
import com.nostra13.universalimageloader.core.assist.FailReason;
import com.nostra13.universalimageloader.core.assist.ImageScaleType;
import com.nostra13.universalimageloader.core.display.FadeInBitmapDisplayer;
import com.nostra13.universalimageloader.core.listener.SimpleImageLoadingListener;

import info.androidhive.slidingmenu.R;
import uk.co.senab.photoview.PhotoViewAttacher;
import android.content.Context;
import android.graphics.Bitmap;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ProgressBar;
import android.widget.Toast;

public class ImagePagerAdapter extends PagerAdapter {
    LayoutInflater inflater;
    PhotoViewAttacher attacher;
    private DisplayImageOptions options;
    private  List<Wallpaper>  IMAGES_LIST=AppController.getInstance().getPrefManger().getAllImages();


        public ImagePagerAdapter(Context context) 
        {
                inflater = LayoutInflater.from(context);

                options = new DisplayImageOptions.Builder()
                .showImageForEmptyUri(R.drawable.ic_empty)
                .showImageOnFail(R.drawable.ic_error)
                .resetViewBeforeLoading(true)
                .cacheOnDisk(true)
                .imageScaleType(ImageScaleType.EXACTLY)
                .bitmapConfig(Bitmap.Config.RGB_565)
                .considerExifParams(true)
                .displayer(new FadeInBitmapDisplayer(300))
                .build();
        }

    @Override
    public Object instantiateItem(ViewGroup container, int position)
    {
        View imageLayout = inflater.inflate(R.layout.item_pager_image, container, false);
        assert imageLayout != null;
        TouchImageView imageView = (TouchImageView) imageLayout.findViewById(R.id.image);
        final ProgressBar spinner = (ProgressBar) imageLayout.findViewById(R.id.loading);

        ImageLoader.getInstance().displayImage(IMAGES_LIST.get(position).getUrl(), 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) {
                String message = null;
                switch (failReason.getType()) {
                    case IO_ERROR:
                        message = "Input/Output error";
                        break;
                    case DECODING_ERROR:
                        message = "Image can't be decoded";
                        break;
                    case NETWORK_DENIED:
                        message = "Downloads are denied";
                        break;
                    case OUT_OF_MEMORY:
                        message = "Out Of Memory error";
                        break;
                    case UNKNOWN:
                        message = "Unknown error";
                        break;
                }
                Toast.makeText(view.getContext(), message, Toast.LENGTH_SHORT).show();

                spinner.setVisibility(View.GONE);
            }

            @Override
            public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
                spinner.setVisibility(View.GONE);
                Log.i("RAE", "Loading Completed");


            }
        });

        container.addView(imageLayout, 0);
        return imageLayout;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }

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


    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view.equals(object);
    }

    @Override
    public void restoreState(Parcelable state, ClassLoader loader) {
    }

    @Override
    public Parcelable saveState() {
        return null;
    }
}

item_pager_image.xml

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

    <info.androidhive.slidingmenu.util.TouchImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:adjustViewBounds="true"
        android:contentDescription="@string/app_name" />

    <ProgressBar
        android:id="@+id/loading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:visibility="gone" />

</FrameLayout>

- Dheeraj Kumar

Answer 1

试试这个

• 在onLoadingStarted()中，添加view.setVisibility(View.GONE)
• 在onLoadingComplete()中，添加view.setVisibility(View.VISIBLE)

这是上述解决方案的代码：

imageLoader.displayImage(imageUri.toString(), 
                     mPictureView,
                     options,
                     new SimpleImageLoadingListener()
{
@Override
public void onLoadingStarted(String imageUri, View view) 
{
    spinner.setVisibility(View.VISIBLE);
    view.setVisibility(View.GONE);
}

@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);
    view.setVisibility(View.VISIBLE);
}
});

- TechChain

---

可能这个挽救了某人的一天。 - Dheeraj Kumar

Answer 2

这里有一个很好的解决方案，适用于任何可缩放图片，它在repository中由Chris Banes制作。它可以在包括视图翻页器在内的任何可滚动容器中使用。

- Ercan