需求:从网络加载图片,并轮播显示,显示区域为圆角矩形。就这么个简单的需求,这里要快速开发。我们可以选择轮播框架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.完成就这些,圆角轮播器已经可以加载显示网络图片了。你们自己试试吧!