您的位置:首页 > 移动开发

Android客户端之“微服私访”App的系统学习(五)使用Picasso实现轮播图以及使用自定义View实现个人中心页面

2017-07-30 18:07 1196 查看
今天给大家介绍的是使用Picasso图片加载框架实现首页轮播图的加载功能以及采用自定义View实现个人中心页面的布局展示。

一、主界面轮播图

1.动态轮播

由于ViewPager,本身在处理页面左右滚动上已经很好了,因此只需要在ViewPager的基础上加上Handler让他可以自动滚动,这里采用一个定时器定时发送一个handleMessage,在Handler实现类中来更新ViewPager的显示,其中ViewPager展示的图片通过Okhttp框架从后台获取公告图片url列表进行展示。

先看一下轮播图逻辑



实现代码:

/首页轮播图获取
OkHttpManager.getInstance().getNet(Constant.Announcement, new OkHttpManager.ResultCallback() {
@Override
public void onFailed(Request request, IOException e) {
getAnnFailure();
}
@Override
public void onSuccess(String response) {
getAnnSuccess(response);
}
});
/**
* 从服务端获取公告信息失败
* 此时展示数据库缓存数据
*/
private void getAnnFailure() {
//从数据库中获取数据
List<AnnImgs> imgs_dblist = DataSupport.findAll(AnnImgs.class);
if (imgs_dblist != null) {
updateAnnShow(imgs_dblist);
}
}
/**
* 从服务端获取公告信息成功
*/
private void getAnnSuccess(String resultImgs) {
//服务端返回有效数据则展示,没有不做处理
if (resultImgs != null && !"".equals(resultImgs)) {
Gson gson = new Gson();
AnnImageResult air = gson.fromJson(resultImgs, AnnImageResult.class);
List<AnnImgs> imgs_list = air.getBody();
if (imgs_list == null) {
imgs_list = new ArrayList<AnnImgs>();
}
updateAnnShow(imgs_list);
//更新缓存
if (imgs_list.size() > 0) {
//从数据库清除数据保存
DataSupport.deleteAll(AnnImgs.class);
//添加新数据到数据库
DataSupport.saveAll(imgs_list);
}
}
}
// 创建记时器发送图片轮播消息
TimerTask task = new TimerTask() {
@Override
public void run() {
if (count == views.size()) {
count = 0;
} else {
count = count + 1;
}
mHandler.sendEmptyMessage(Constant.Scroll);
}
};
Handler mHandler = new Handler() {
@Override
public void handleMessage(android.os.Message msg) {
switch (msg.what) {
case Constant.Scroll://接收滚动消息,并执行
vp.setCurrentItem(count);
break;
default:
break;
}
}
};


2.无限循环轮播

无限循环轮播,目前有两种常见的实现思路:

1.使adapter的getCount()返回Integer.MAX_VALUE,再在初始化时设置当前页面为第几百几千页(如ViewPager.setCurrentItem(100*data.size));

2.通过监听viewpager的滑动来设置页面。如当前有数据123,则设置页面为31231,当页面滑动到第一个3时,设置当前页面为第二个3,那么左右都可以滑动,当其滑动到第二个1时同理。

注释:第一种实现方式实际上不是真正的无线循环,只是一般情况下很难达到滑动边界的情况。在这里和大家推荐一款有关于Banner的封装库,Android广告图片轮播控件,支持无限循环和多种主题

二、Picasso加载网络图片

1.Picasso使用介绍

还没有了解Picasso的小伙伴可以通过该链接查看详细介绍 Picasso 使用详解及简单解析

实现代码:

ImageView img = new ImageView(mActivity);
img.setScaleType(ImageView.ScaleType.CENTER_CROP);
//通过网络地址显示图片
Picasso.with(mActivity)
.load(Constant.BaseUrl + imgs_dblist.get(i).getImgUrl())
.into(img);
views.add(img);


2.Picasso缓存介绍

Picasso 内部访问网络,下载图片使用 createDefaultDownloader()方法来创建下载器,默认使用okhttp,如果当前项目没有找到okhttp包,则使用HttpURlConnection.

源代码:

static Downloader createDefaultDownloader(Context context) {
try {
Class.forName("com.squareup.okhttp.OkHttpClient");
return Utils.OkHttpLoaderCreator.create(context);
} catch (ClassNotFoundException var2) {
return new UrlConnectionDownloader(context);
}
}


Picasso没有指定缓存文件地址的接口,所以下载到本地的缓存文件地址默认是okhttp等的配置

源代码:

static File createDefaultCacheDir(Context context) {
File cache = new File(context.getApplicationContext().getCacheDir(), "picasso-cache");
if(!cache.exists()) {
cache.mkdirs();
}
return cache;
}


可以看到是默认保存在内部缓存中,去相应目录下查找可以看到两个文件,分别以.0和.1结尾。其中以.0结尾的文件是网络通信信息,可以改后缀名为.txt查看,以.1结尾的文件就是下载缓存的图片信息,可以更改后缀名为.jpg或.png查看。

那么如果想要更改下载文件的缓存地址呢?需要自己定义一个下载器:

Picasso picasso = new Picasso.Builder(this)
.downloader(new OkHttp3Downloader(this.getExternalCacheDir()))
.build();


这个下载器可以直接使用大神JakeWharton写的:picasso2-okhttp3-downloader

三、自定义组合View,实现个人中心界面的Items



通过自定义View实现上图中的Items,通过在代码中设置相关属性来设置Items的显示内容

<com.bdqn.settingitemlibrary.SetItemView
android:id="@+id/rl_me"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:isShowUnderLine="false"
app:leftIcon="@drawable/medata"
app:leftText="@string/fragment_me_tv_me"
app:rightIcon="@drawable/task_arrow"
app:textColor="@color/text_color_6"
app:textSize="16"/>
<com.bdqn.settingitemlibrary.SetItemView
android:id="@+id/rl_clear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
app:leftIcon="@drawable/clearcache"
app:leftText="@string/fragment_me_tv_clear"
app:rightIcon="@drawable/task_arrow"
app:textColor="@color/text_color_6"
app:textSize="16"/>


注释:在布局文件中添加自定义布局时,必须在根部局中添加命名空间
xmlns:app="http://schemas.android.com/apk/res-auto"


下面看一下实现效果:



参考文章:Picasso 使用详解及简单解析

代码及相关资料,请点击此处~
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐