universalimageloader+viewpager+fragment加载网络图片轮显

来源：互联网发布：知乎爬虫下拉加载编辑：程序博客网时间：2024/06/06 01:31

在微信朋友圈功能中，其中有这么一个模块，点击朋友发的图，就弹出全屏查看并在图的下面有红点导航，像这样的图片轮显功能还是比较常用的，下面我们使用android中带的控件viewpager来实现，并做成个方便调用的，在app中的任何地方需要显示多图，就直接启用它（当然需要把图片路径要做为参数传递过来），我们使用fragment来加载viewpager，好处嘛，你肯定也清楚了：）

本例主要加载网络图片，图片的加载优化直接使用的universalimageloader，效果还是不错地。

布局文件fragment_image_pager.xml：

<FrameLayout 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"    android:orientation="vertical"    android:background="@color/balack_thin"    android:paddingBottom="10dp">    <android.support.v4.view.ViewPager        android:id="@+id/imagePager"        android:layout_width="wrap_content"        android:layout_height="wrap_content" />

    <!-- 下面显示的圆点 -->       <LinearLayout        android:orientation="horizontal"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:id="@+id/dotsImg"        android:gravity="center_horizontal"        android:layout_gravity="bottom|center_horizontal">    </LinearLayout></FrameLayout>

主体ImagePagerActivityFragment.java文件：

package com.test.ui;import android.content.Context;import android.graphics.Bitmap;import android.os.Parcelable;import android.provider.SyncStateContract;import android.support.v4.app.Fragment;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.view.ViewTreeObserver;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.ProgressBar;import android.widget.Toast;import com.nostra13.universalimageloader.cache.disc.impl.UnlimitedDiscCache;import com.nostra13.universalimageloader.cache.disc.naming.HashCodeFileNameGenerator;import com.nostra13.universalimageloader.cache.memory.impl.LruMemoryCache;import com.nostra13.universalimageloader.core.DisplayImageOptions;import com.nostra13.universalimageloader.core.ImageLoader;import com.nostra13.universalimageloader.core.ImageLoaderConfiguration;import com.nostra13.universalimageloader.core.assist.FailReason;import com.nostra13.universalimageloader.core.assist.ImageScaleType;import com.nostra13.universalimageloader.core.assist.QueueProcessingType;import com.nostra13.universalimageloader.core.decode.BaseImageDecoder;import com.nostra13.universalimageloader.core.display.FadeInBitmapDisplayer;import com.nostra13.universalimageloader.core.download.BaseImageDownloader;import com.nostra13.universalimageloader.core.listener.SimpleImageLoadingListener;import com.nostra13.universalimageloader.utils.StorageUtils;import com.yikuaide.erp.R;/** * A placeholder fragment containing a simple view. */public class ImagePagerActivityFragment extends Fragment {    ViewPager pager;    LinearLayout dotimgs;    private ImageView dotView;    private ImageView[] dotsViews;    private   String[] IMAGE_URLS = null;    private  int pos=0;    ImageAdapter imageAdapter;    public ImagePagerActivityFragment() {    }    public  void setPhotos(String[] photos){        IMAGE_URLS=photos;    }    public  void setPosition(int i){        pos=i;    }    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {        View rootView = inflater.inflate(R.layout.fragment_image_pager, container, false);        pager = (ViewPager) rootView.findViewById(R.id.imagePager);        dotimgs=(LinearLayout)rootView.findViewById(R.id.dotsImg);        imageAdapter=new ImageAdapter(getActivity(), IMAGE_URLS);        pager.setAdapter(imageAdapter);        pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                // TODO Auto-generated method stub                for (int i = 0; i < dotsViews.length; i++) {                    dotsViews[position].setBackgroundResource(R.mipmap.dot_focus);                    if (position != i) {                        dotsViews[i].setBackgroundResource(R.mipmap.dot);                    }                }            }            @Override            public void onPageScrollStateChanged(int state) {            }        });        //pager.setCurrentItem(pos);        pager.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {            @Override            public boolean onPreDraw() {                pager.getViewTreeObserver().removeOnPreDrawListener(this);                if (pos==0) {                                    } else {                    pager.setCurrentItem(pos);                }                return true;            }        });        dotsViews = new ImageView[IMAGE_URLS.length];        for(int i =0;i<IMAGE_URLS.length;i++){            dotView = new ImageView(getActivity());            dotView.setLayoutParams(new LinearLayout.LayoutParams(20,20));            dotView.setPadding(20, 0, 20, 0);            dotsViews[i] = dotView;            //默认第一张图显示为选中状态            if (i == 0) {                dotsViews[i].setBackgroundResource(R.mipmap.dot_focus);            } else {                dotsViews[i].setBackgroundResource(R.mipmap.dot);            }            dotimgs.addView(dotsViews[i]);        }        return rootView;    }    private static class ImageAdapter extends PagerAdapter {        private LayoutInflater inflater;        private DisplayImageOptions options;        private String[] photours;        ImageAdapter(Context context,String[] pts) {            inflater = LayoutInflater.from(context);            photours=pts;            options = new DisplayImageOptions.Builder()                    .showImageForEmptyUri(R.mipmap.image_for_empty_url)                    .showImageOnFail(R.mipmap.image_for_empty_url)                    .resetViewBeforeLoading(true)                    .cacheOnDisk(true)                    .imageScaleType(ImageScaleType.EXACTLY)                    .bitmapConfig(Bitmap.Config.RGB_565)                    .considerExifParams(true)                    .displayer(new FadeInBitmapDisplayer(300))                    .build();        }        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView((View) object);        }        @Override        public int getCount() {            return photours.length;        }        @Override        public Object instantiateItem(ViewGroup view, int position) {            View imageLayout = inflater.inflate(R.layout.item_image_viewpager, view, false);            assert imageLayout != null;            ImageView imageView = (ImageView) imageLayout.findViewById(R.id.image);            final ProgressBar spinner = (ProgressBar) imageLayout.findViewById(R.id.loading);            ImageLoader.getInstance().displayImage(photours[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) {                    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);                }            });            //view.addView(imageLayout, 0);            view.addView(imageLayout);            return imageLayout;        }        @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;        }    }}

如上面代码,其中：setPhotos（）函数为获取要显示的网络图片路径，setPosition（）函数设置默认显示第几张图，这点有一点要注意，很多时候我们使用pager.setCurrentItem是没有问题的（本地的布局或资源一般是没问题的），但是本例是加载的网络图片，所以要实现这个功能，我使用的预加载监听的方法，也就是pager.getViewTreeObserver().addOnPreDrawListener(newViewTreeObserver.OnPreDrawListener()....这里。不然会出现null pointer exception的错误！

，使用ViewPager加载多图，每个元素采用的布局文件item_image_viewpager.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">    <ImageView        android:id="@+id/image"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="center"        android:adjustViewBounds="true"        android:contentDescription="@string/ykd_biji" />    <ProgressBar        android:id="@+id/loading"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:visibility="gone" /></FrameLayout>

该布局中加了一个ProgressBar，为了是图片没有加载前显示一个进度提示，这样更友好一点了。

以上工作就制作好了一个图片轮显的模块了，要在任何地方调用，方法如下

ImagePagerActivityFragment fragment=new ImagePagerActivityFragment();

Intent intent = getIntent();

String pturls = http://***/1.jpg,http://***/2.jpg,http://***/3.jpg;

int pos=1;

if(pturls!=null) { pturls=pturls.replaceAll("_small","");

String[] ptarrs=pturls.split(",");

fragment.setPhotos(ptarrs);

fragment.setPosition(pos); }

getSupportFragmentManager().beginTransaction().add(R.id.iContainer, fragment).commit();

是不是很方便？：）上面R.id.iContainer就是你要调用显示framenent的容器了，可以是FrameLayout,也可以是RelativeLayout...：）

1 0