天天看点

UniversaLimageloader加RollPagerView实现网络加载圆角图片轮播

需求:从网络加载图片,并轮播显示,显示区域为圆角矩形。就这么个简单的需求,这里要快速开发。我们可以选择轮播框架RollPagerView与图片加载框架UniversalImageloader来实现。

1.环境配置,主要是加载依赖。开发工具啥的,全凭你们自己的爱好。

1.1 lib文件中添加UniversaLimageloader的jar包universal-image-loader-1.9.5.jar

1.2 gradle文件中添加RollpagerView的依赖com.jude:rollviewpager:1.4.5

2.环境配置好了,那么我们来使用吧。

2.1布局文件,引入RollviewPager控件

<com.jude.rollviewpager.RollPagerView
            android:layout_below="@id/rp_mainac_baseinfo"
            android:id="@+id/rp_mainac_mainad"
           android:layout_gravity="center"
            android:layout_width="350dp"
            android:layout_height="160dp"
            app:rollviewpager_hint_gravity="center"
            app:rollviewpager_hint_paddingBottom="110dp"
            app:rollviewpager_play_delay="3000"
            >
        </com.jude.rollviewpager.RollPagerView>
           
<!--为圆角图片控件,经网络加载的图片通过圆角图片控件显示-->
<?xml version="1.0" encoding="utf-8"?>
<com.hlhjni.hmscale.widget.CircleRactImagView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/im_mainacad_viewpage"
    android:layout_width="370dp"
    android:layout_height="200dp"/>
           

2.2自定义圆角UI

public class CircleRactImagView extends ImageView {

    private Paint paint;

    public CircleRactImagView(Context context) {
        this(context,null);
    }

    public CircleRactImagView(Context context, AttributeSet attrs) {
        this(context, attrs,);
    }

    public CircleRactImagView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        paint = new Paint();
    }

    /**
     * 绘制圆角图片
     * @author caizhiming
     */
    @Override
    protected void onDraw(Canvas canvas) {

        Drawable drawable = getDrawable();
        if (null != drawable) {
            Bitmap bitmap = ((BitmapDrawable) drawable).getBitmap();
            Bitmap b = getCircleBitmap(bitmap, );
            final Rect rectSrc = new Rect(, , b.getWidth(), b.getHeight());
            final Rect rectDest = new Rect(,,getWidth(),getHeight());
            paint.reset();
            canvas.drawBitmap(b, rectSrc, rectDest, paint);
        } else {
            super.onDraw(canvas);
        }
    }

    /**
     * 获取圆形图片方法
     * @param bitmap
     * @param roundPx //圆角半径
     * @return Bitmap
     * @author caizhiming
     */
    private Bitmap getCircleBitmap(Bitmap bitmap, int roundPx) {
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
                bitmap.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);
        final int color = ;

        final Rect rect = new Rect(, , bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(rect);
        paint.setAntiAlias(true);
        canvas.drawARGB(, , , );
        paint.setColor(color);



        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);
        return output;


    }
           

2.3.Activity中逻辑代码

2.3.1使用ImagLoader之前配置ImagLoader

private void ownloadImFromUrl() {
        //设置加载图片的缓存目录
        File imcacheDir = StorageUtils.getOwnCacheDirectory(mcont, "imageloader/Cache");
        //配置Imageload
        ImageLoaderConfiguration imlconfig = new ImageLoaderConfiguration
                .Builder(mcont)
                .memoryCacheExtraOptions(, )
                //线程池内加载的数量
                .threadPoolSize()
                .threadPriority(Thread.NORM_PRIORITY - )
                .denyCacheImageMultipleSizesInMemory()
                // You can pass your own memory cache implementation/你可以通过自己的内存缓存实现
                .memoryCache(new UsingFreqLimitedMemoryCache( *  * ))
                .memoryCacheSize( *  * )
                .discCacheSize( *  * )
                //将保存的时候的URI名称用MD5 加密
                .discCacheFileNameGenerator(new Md5FileNameGenerator())
                .tasksProcessingOrder(QueueProcessingType.LIFO)
                //缓存的文件数量
                .discCacheFileCount()
                .diskCache(new UnlimitedDiskCache(imcacheDir))
                .defaultDisplayImageOptions(DisplayImageOptions.createSimple())
                // connectTimeout ( s), readTimeout ( s)超时时间
                .imageDownloader(new BaseImageDownloader(mcont,  * ,  * ))
                .writeDebugLogs() // Remove for release app
                .build();//开始构建
        ImageLoader.getInstance().init(imlconfig);
    }

    private DisplayImageOptions getDisplayOptions() {
        DisplayImageOptions options;
        options = new DisplayImageOptions.Builder()
                // 设置图片在下载期间显示的图片
                .showImageOnLoading(R.drawable.ic_launcher)
                // 设置图片Uri为空或是错误的时候显示的图片
                .showImageForEmptyUri(R.drawable.ic_launcher)
                // 设置图片加载/解码过程中错误时候显示的图片
                .showImageOnFail(R.drawable.ic_launcher)
                // 设置下载的图片是否缓存在内存中
                .cacheInMemory(true)
                // 设置下载的图片是否缓存在SD卡中
                .cacheOnDisc(true)
                // 是否考虑JPEG图像EXIF参数(旋转,翻转)
                .considerExifParams(true)
                // 设置图片以如何的编码方式显示
                .imageScaleType(ImageScaleType.EXACTLY)
                // 设置图片的解码类型//
                .bitmapConfig(Bitmap.Config.RGB_565)
                // 设置图片在下载前是否重置,复位
                .resetViewBeforeLoading(true)
                // 是否设置为圆角,弧度为多少
                .displayer(new RoundedBitmapDisplayer())
                // 是否图片加载好后渐入的动画时间
                .displayer(new FadeInBitmapDisplayer())
                .build();// 构建完成
        return options;
    }
           

2.3.2配置RollpagerView的显示适配器

/**
     * 通过Imagloader加载网络图片
     */
    class RpmainacMainadapter extends StaticPagerAdapter {
        private final DisplayImageOptions options;
        private List<ImageView> mviewlist;
        private ImageLoader mimageloader;

        public RpmainacMainadapter(List<ImageView> viewlist, ImageLoader imageloader) {
            options = getDisplayOptions();
            this.mviewlist = viewlist;
            this.mimageloader = imageloader;
        }

        @Override
        public View getView(ViewGroup container, int position) {
            ImageView mainadim = mviewlist.get(position);
            String imurl = imloadurl[position];
            mimageloader.displayImage(imurl, mainadim, options, new ImageLoadingListener() {
                @Override
                public void onLoadingStarted(String s, View view) {

                }

                @Override
                public void onLoadingFailed(String s, View view, FailReason failReason) {
                    Toast.makeText(mcont, "加载错误:" + s, Toast.LENGTH_SHORT).show();
                }

                @Override
                public void onLoadingComplete(String s, View view, Bitmap bitmap) {

                }

                @Override
                public void onLoadingCancelled(String s, View view) {

                }
            });
            return mviewlist.get(position);
        }

        @Override
        public int getCount() {
            return mviewlist.size() >  ? mviewlist.size() : ;
        }
    }
           

2.3.3在Activity初始化的时候,初始化RollPagerView的显示

private void initRpMainacMainad() {
        ArrayList<ImageView> imlist = new ArrayList<>();
        ImageLoader imageloader = ImageLoader.getInstance();
        //填充布局
        View adpage = LayoutInflater.from(mcont).inflate(R.layout.rp_mainac_mainad_ly, rpMainacMainad, false);
        View adpageone = LayoutInflater.from(mcont).inflate(R.layout.rp_mainac_mainad_one_ly, rpMainacMainad, false);
        View adpagetwo = LayoutInflater.from(mcont).inflate(R.layout.rp_mainac_mainad_two_ly, rpMainacMainad, false);
        ImageView adpageim = (ImageView) adpage.findViewById(R.id.im_mainacad_viewpage);
        ImageView adpageonim = (ImageView) adpageone.findViewById(R.id.im_mainacad_one_viewpage);
        ImageView adpagetwoim = (ImageView) adpagetwo.findViewById(R.id.im_mainacad_two_viewpage);
        imlist.add(, adpageim);
        imlist.add(, adpageonim);
        imlist.add(, adpagetwoim);
        //网络图片的地址
        imloadurl = new String[]{
                NetRequestURLConst.BASE_MAIN_IMG + NetRequestURLConst.IMG_MAIN_01, NetRequestURLConst.BASE_MAIN_IMG + NetRequestURLConst.IMG_MAIN_02, NetRequestURLConst.BASE_MAIN_IMG + NetRequestURLConst.IMG_MAIN_03
        };
        RpmainacMainadapter rpmainacMainadapter = new RpmainacMainadapter(imlist, imageloader);
        rpMainacMainad.setAdapter(rpmainacMainadapter);
    }
           

3.完成就这些,圆角轮播器已经可以加载显示网络图片了。你们自己试试吧!