需求:從網絡加載圖檔,并輪播顯示,顯示區域為圓角矩形。就這麼個簡單的需求,這裡要快速開發。我們可以選擇輪播架構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.完成就這些,圓角輪播器已經可以加載顯示網絡圖檔了。你們自己試試吧!