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

最新推荐文章于 2020-11-25 09:14:39 发布

cctcc

最新推荐文章于 2020-11-25 09:14:39 发布

阅读量3.3k

点赞数 1

分类专栏： java Android

本文链接：https://blog.csdn.net/cctcc/article/details/50127039

版权

java 同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

Android

19 篇文章 0 订阅

订阅专栏

在微信朋友圈功能中，其中有这么一个模块，点击朋友发的图，就弹出全屏查看并在图的下面有红点导航，像这样的图片轮显功能还是比较常用的，下面我们使用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( new ViewTreeObserver.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...：）