Android:ViewPager详解（异步网络加载图片，带图片缓存，并带导航小圆点）

android 应用中，如欢迎指引页面，和图片轮播功能，或者更多的内容在一页显示不了，要分成多个页面，这时候viewpager是很好用的。

首先看下效果：

下面是一个例子，带异步网络加载图片，并带导航小圆点

packagecom.example.viewpagertest;importjava.io.IOException;
importjava.lang.ref.SoftReference;
importjava.util.ArrayList;
importjava.util.HashMap;
importjava.util.List;importorg.apache.http.HttpEntity;
importorg.apache.http.HttpResponse;
importorg.apache.http.HttpStatus;
importorg.apache.http.client.ClientProtocolException;
importorg.apache.http.client.HttpClient;
importorg.apache.http.client.methods.HttpGet;
importorg.apache.http.impl.client.DefaultHttpClient;
importorg.apache.http.params.CoreConnectionPNames;importandroid.annotation.SuppressLint;
importandroid.app.Activity;
importandroid.graphics.drawable.Drawable;
importandroid.os.Bundle;
importandroid.os.Handler;
importandroid.os.Message;
importandroid.support.v4.view.PagerAdapter;
importandroid.support.v4.view.ViewPager;
importandroid.support.v4.view.ViewPager.OnPageChangeListener;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.widget.ImageView;
importandroid.widget.LinearLayout;
importandroid.widget.TextView;importcom.example.viewpagertest.MainActivity.AsyncImageLoader.ImageCallback;/***** 说明：ViewPager ，带小圆点导航，适配器采用PagerAdapter，基本可以满足需求* 也可以采用FragmentPagerAdapter，有人说，Fragment可以更好的适应平板和手机，* 并且可以更好的代码重用，具体这些好处大家试一下就知道了。** @author andylaw** 更多内容请查看博客：http://blog.csdn.net/lyc66666666666**/@SuppressLint("NewApi")
publicclass MainActivity extendsActivity {privateViewPager view_pager;privateLayoutInflater inflater;// 图片的地址，这里可以从服务器获取String[] urls = newString[]{"http://a.hiphotos.baidu.com/image/pic/item/3bf33a87e950352ad6465dad5143fbf2b2118b6b.jpg","http://a.hiphotos.baidu.com/image/pic/item/c8177f3e6709c93d002077529d3df8dcd0005440.jpg","http://f.hiphotos.baidu.com/image/pic/item/7aec54e736d12f2ecc3d90f84dc2d56285356869.jpg","http://e.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de308a87fc96eef01f3a297969.jpg","http://d.hiphotos.baidu.com/image/pic/item/f31fbe096b63f624b88f7e8e8544ebf81b4ca369.jpg","http://h.hiphotos.baidu.com/image/pic/item/11385343fbf2b2117c2dc3c3c88065380cd78e38.jpg","http://c.hiphotos.baidu.com/image/pic/item/3801213fb80e7bec5ed8456c2d2eb9389b506b38.jpg"};privateImageView image;privateView item ;privateMyAdapter adapter ;privateImageView[] indicator_imgs = newImageView[7];//存放引到图片数组@Overrideprotectedvoid onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);view_pager = (ViewPager) findViewById(R.id.view_pager);List<view> list = newArrayList<view>();inflater = LayoutInflater.from(this);/*** 创建多个item （每一条viewPager都是一个item）* 从服务器获取完数据（如文章标题、url地址） 后，再设置适配器*/for(inti = 0; i < 7; i++) {item = inflater.inflate(R.layout.item, null);((TextView) item.findViewById(R.id.text_view)).setText("第 " + i+ " 个 viewPager");list.add(item);}//创建适配器， 把组装完的组件传递进去adapter = newMyAdapter(list);view_pager.setAdapter(adapter);//绑定动作监听器：如翻页的动画view_pager.setOnPageChangeListener(newMyListener());initIndicator();}/*** 初始化引导图标* 动态创建多个小圆点，然后组装到线性布局里*/privatevoid initIndicator(){ImageView imgView;View v = findViewById(R.id.indicator);// 线性水平布局，负责动态调整导航图标for(inti = 0; i < 7; i++) {imgView = newImageView(this);LinearLayout.LayoutParams params_linear = newLinearLayout.LayoutParams(10,10);params_linear.setMargins(7,10,7,10);imgView.setLayoutParams(params_linear);indicator_imgs[i] = imgView;if(i == 0) { // 初始化第一个为选中状态indicator_imgs[i].setBackgroundResource(R.drawable.indicator_focused);}else{indicator_imgs[i].setBackgroundResource(R.drawable.indicator);}((ViewGroup)v).addView(indicator_imgs[i]);}}/*** 适配器，负责装配 、销毁  数据  和  组件 。*/privateclass MyAdapter extendsPagerAdapter {privateList<view> mList;privateAsyncImageLoader asyncImageLoader;publicMyAdapter(List<view> list) {mList = list;asyncImageLoader = newAsyncImageLoader();  }/*** Return the number of views available.*/@Overridepublicint getCount() {// TODO Auto-generated method stubreturnmList.size();}/*** Remove a page for the given position.* 滑动过后就销毁 ，销毁当前页的前一个的前一个的页！* instantiateItem(View container, int position)* This method was deprecated in API level . Use instantiateItem(ViewGroup, int)*/@Overridepublicvoid destroyItem(ViewGroup container, intposition, Object object) {// TODO Auto-generated method stubcontainer.removeView(mList.get(position));}@Overridepublicboolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturnarg0==arg1;}/*** Create the page for the given position.*/@OverridepublicObject instantiateItem(finalViewGroup container, finalint position) {Drawable cachedImage = asyncImageLoader.loadDrawable(urls[position],newImageCallback() {publicvoid imageLoaded(Drawable imageDrawable,String imageUrl) {View view = mList.get(position);image = ((ImageView) view.findViewById(R.id.image));image.setBackground(imageDrawable);container.removeView(mList.get(position));container.addView(mList.get(position));// adapter.notifyDataSetChanged();}});View view = mList.get(position);image = ((ImageView) view.findViewById(R.id.image));image.setBackground(cachedImage);container.removeView(mList.get(position));container.addView(mList.get(position));// adapter.notifyDataSetChanged();returnmList.get(position);}}/*** 动作监听器，可异步加载图片**/privateclass MyListener implementsOnPageChangeListener{@Overridepublicvoid onPageScrollStateChanged(intstate) {// TODO Auto-generated method stubif(state == 0) {//new MyAdapter(null).notifyDataSetChanged();}}@Overridepublicvoid onPageScrolled(intarg0, floatarg1, intarg2) {// TODO Auto-generated method stub}@Overridepublicvoid onPageSelected(intposition) {// 改变所有导航的背景图片为：未选中for(inti = 0; i < indicator_imgs.length; i++) {indicator_imgs[i].setBackgroundResource(R.drawable.indicator);}// 改变当前背景图片为：选中indicator_imgs[position].setBackgroundResource(R.drawable.indicator_focused);}}/*** 异步加载图片*/staticclass AsyncImageLoader {// 软引用，使用内存做临时缓存 （程序退出，或内存不够则清除软引用）privateHashMap<string, softreference<drawable="">> imageCache;publicAsyncImageLoader() {imageCache = newHashMap<string, softreference<drawable="">>();}/*** 定义回调接口*/publicinterface ImageCallback {publicvoid imageLoaded(Drawable imageDrawable, String imageUrl);}/*** 创建子线程加载图片* 子线程加载完图片交给handler处理（子线程不能更新ui，而handler处在主线程，可以更新ui）* handler又交给imageCallback，imageCallback须要自己来实现，在这里可以对回调参数进行处理** @param imageUrl ：须要加载的图片url* @param imageCallback：* @return*/publicDrawable loadDrawable(finalString imageUrl,finalImageCallback imageCallback) {//如果缓存中存在图片  ，则首先使用缓存if(imageCache.containsKey(imageUrl)) {SoftReference<drawable> softReference = imageCache.get(imageUrl);Drawable drawable = softReference.get();if(drawable != null) {imageCallback.imageLoaded(drawable, imageUrl);//执行回调returndrawable;}}/*** 在主线程里执行回调，更新视图*/finalHandler handler = newHandler() {publicvoid handleMessage(Message message) {imageCallback.imageLoaded((Drawable) message.obj, imageUrl);}};/*** 创建子线程访问网络并加载图片 ，把结果交给handler处理*/newThread() {@Overridepublicvoid run() {Drawable drawable = loadImageFromUrl(imageUrl);// 下载完的图片放到缓存里imageCache.put(imageUrl,newSoftReference<drawable>(drawable));Message message = handler.obtainMessage(0, drawable);handler.sendMessage(message);}}.start();returnnull;}/*** 下载图片  （注意HttpClient 和httpUrlConnection的区别）*/publicDrawable loadImageFromUrl(String url) {try{HttpClient client = newDefaultHttpClient();client.getParams().setParameter(CoreConnectionPNames.CONNECTION_TIMEOUT,1000*15);HttpGet get = newHttpGet(url);HttpResponse response;response = client.execute(get);if(response.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {HttpEntity entity = response.getEntity();Drawable d = Drawable.createFromStream(entity.getContent(),"src");returnd;}else{returnnull;}}catch(ClientProtocolException e) {e.printStackTrace();}catch(IOException e) {e.printStackTrace();}returnnull;}//清除缓存publicvoid clearCache() {if(this.imageCache.size() > 0) {this.imageCache.clear();}}}}

下面是layout主文件：

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"

<span style="white-space:pre">  </span>xmlns:tools="http://schemas.android.com/tools"

<span style="white-space:pre">  </span>android:layout_width="match_parent"

<span style="white-space:pre">  </span>android:layout_height="match_parent"

<span style="white-space:pre">  </span>android:paddingbottom="@dimen/activity_vertical_margin"

<span style="white-space:pre">  </span>android:paddingleft="@dimen/activity_horizontal_margin"

<span style="white-space:pre">  </span>android:paddingright="@dimen/activity_horizontal_margin"

<span style="white-space:pre">  </span>android:paddingtop="@dimen/activity_vertical_margin"><relativelayout

<span style="white-space:pre">  </span>android:layout_width="fill_parent"

<span style="white-space:pre">  </span>android:layout_height="fill_parent"></android.support.v4.view.viewpager><linearlayout

<span style="white-space:pre">  </span>android:id="@+id/indicator"

<span style="white-space:pre">  </span>android:layout_width="fill_parent"

<span style="white-space:pre">  </span>android:layout_height="100px"

<span style="white-space:pre">  </span>android:layout_margintop="500px"

<span style="white-space:pre">  </span>android:gravity="center_horizontal"

<span style="white-space:pre">  </span>android:orientation="horizontal"></linearlayout>       </relativelayout>
</linearlayout>

下面是每一条item文件：

<span style="font-size:14px;"><linearlayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingbottom="@dimen/activity_vertical_margin"android:paddingleft="@dimen/activity_horizontal_margin"android:paddingright="@dimen/activity_horizontal_margin"android:paddingtop="@dimen/activity_vertical_margin"android:orientation="vertical">

<textview android:id="@+id/text_view"android:layout_width="fill_parent"android:layout_height="wrap_content">

<imageview android:id="@+id/image"android:layout_width="fill_parent"android:layout_height="wrap_content">

</imageview></textview></linearlayout></span>

Android:ViewPager详解（异步网络加载图片，带图片缓存，并带导航小圆点）相关推荐

render注册一个链接组件_详解vue 动态加载并注册组件且通过 render动态创建该组件...
基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
android快捷开发之Retrofit网络加载框架的简单使用
大家都知道,安卓最大的特点就是开源化,这自然会产生很多十分好用的第三方API,而基本每一个APP都会与网络操作和缓存处理机制打交道,当然,你可以自己通过HttpUrlConnection再通过返回数据 ...
Android动态listview,Android列表组件ListView使用详解之动态加载或修改列表数据
在使用ListView组件来显示列表数据时,有的时候我们需要改变列表中的数据,有以下方法: 1.重新给ListView组件设置适配器这种方法重新创建了ListView,效率不好. 2.使用适配器中的 ...
【OpenCV 4开发详解】视频加载与摄像头调用
本文首发于"小白学视觉"微信公众号,欢迎关注公众号本文作者为小白,版权归人民邮电出版社发行所有,禁止转载,侵权必究! 经过几个月的努力,小白终于完成了市面上第一本OpenCV 4 ...
render vue 添加类_详解vue 动态加载并注册组件且通过 render动态创建该组件
基于 iview Tabs 组件实现功能:为每个 tab 动态创建不同的.特定的组件内容,而不需要大量的 import 组件并进行 component 注册 Index.vue import loa ...
android viewpager 详解,详解Android App中ViewPager使用PagerAdapter的方法
PageAdapter是一个抽象类,直接继承于Object,导入包android.support.v4.view.PagerAdapter即可使用. 要使用PagerAdapter, 首先要继承Pag ...
Android定位详解兼容网络定位、GPS定位
Android6.0 高通上面跑 D:\AndroidStudioProjects\MyGPSTest https://www.iteye.com/blog/gundumw100-2160728 基于 ...
Android 二次封装网络加载框架
Android 二次封装网络加载框架写在最前面开发当中,在请求网络的时候,大家或多或少都会使用一些第三方框架,Android-Async-Http. Volley.XUtils.Okhttp.Re ...
android listview动态加载网络图片不显示,Android Listview异步动态加载网络图片
Android Listview异步动态加载网络图片详见: http://blog.sina.com.cn/s/blog_62186b460100zsvb.html 标签: Android SDK ...

Android:ViewPager详解（异步网络加载图片，带图片缓存，并带导航小圆点）

Android:ViewPager详解（异步网络加载图片，带图片缓存，并带导航小圆点）相关推荐

最新文章

热门文章