天天看點

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.完成就這些,圓角輪播器已經可以加載顯示網絡圖檔了。你們自己試試吧!