Android 使用ViewPager结合PhotoView开源组件实现网络图片在线浏览功能
在实际的开发中,我们市场会遇到这样的情况:点击某图片,浏览某列表(某列表详情)中的所有图片数据,当然,这些图片是可以放大和缩小的,比如我们看下百度贴吧的浏览大图的效果:
链接
这种功能,在一些app中是必不可少的!那如何实现呢?接下来,我将介绍通过ViewPager结合PhotoView开源组件,实现这么样的经典效果!
关于ViewPager如何使用,此文不多介绍,网络上太多相关的知识了;而PhotoView,因为它是一个开源的组件,所以如果你不深入研究它的话,只需要掌握它基本的用法即可!
何为PhotoView?
PhotoView的github地址: https://github.com/chrisbanes/PhotoView
PhotoView特性:
支持单点/多点触摸,即时缩放图片;
支持平滑滚动;
在滑动父控件下能够运行良好;(例如:ViewPager)
当用户的触点改变时可以触发通知。
关于如何PhotoView的详解,且参考如下文章:PhotoView开源项目剖析
当你了解了基本的知识后,下面直接带你进入实例:
1. 先定义网络请求,实现图片列表:
1.1 列表样式
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> <ImageView
android:id="@+id/picBig"
android:layout_width="fill_parent"
android:layout_height="180dp"
android:scaleType="fitXY"
android:src="@mipmap/ic_launcher"
/>
<TextView
android:id="@+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="CSS动画实用技巧"
android:singleLine="true"
android:padding="10dp"
android:textSize="15sp"
/> <TextView
android:id="@+id/description"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="教你使用CSS实现惊艳的动画效果!"
android:textSize="12sp"
android:lines="2"
android:padding="10dp"
/> </LinearLayout>
1.2 适配器
public class KechengAdapter extends BaseAdapter { private Context mContext; private LayoutInflater mInflater; private List<KeCheng> mDatas; private OnImgClickListener onImgClickListener; public void setOnImgClickListener(OnImgClickListener onImgClickListener){
this.onImgClickListener = onImgClickListener;
} public KechengAdapter(Context context, List<KeCheng> datas) {
mContext = context;
mInflater = LayoutInflater.from(mContext);
mDatas = datas;
} @Override
public int getCount() {
return (mDatas != null ? mDatas.size() : 0);
} @Override
public Object getItem(int position) {
return (mDatas != null ? mDatas.get(position) : null);
} @Override
public long getItemId(int position) {
return position;
} @Override
public View getView(final int position, View convertView, ViewGroup parent) {
ViewHolder holder = null;
if (convertView == null) { convertView = mInflater.inflate(R.layout.list_item_kecheng, null); holder = new ViewHolder();
holder.picBig = (ImageView) convertView.findViewById(R.id.picBig);
holder.name = (TextView) convertView.findViewById(R.id.name);
holder.description = (TextView) convertView.findViewById(R.id.description); convertView.setTag(holder); } else {
holder = (ViewHolder) convertView.getTag();
} final KeCheng keCheng = mDatas.get(position); if (keCheng != null) { ImageLoaderUtil.getInstance().displayListItemImage(keCheng.picBig, holder.picBig); holder.name.setText(keCheng.name);
holder.description.setText(keCheng.description); holder.picBig.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
onImgClickListener.handleBrowse(position);
}
}); }
return convertView;
} public interface OnImgClickListener{ void handleBrowse(int position);
} static class ViewHolder { ImageView picBig; TextView name; TextView description;
}
}
注; Adapter中主要添加了一个回调接口,当你单机图片的时候,进入下一级图片浏览页面!
2. 列表逻辑实现,及点击某一个图片,进入下一级页面,该页面即为图片浏览页面:
public class MainActivity extends Activity implements KechengAdapter.OnImgClickListener { private String BASE_URL = "http://www.imooc.com/api/teacher?type=4&num=10"; @ViewInject(R.id.main_layout)
private RelativeLayout main_layout; @ViewInject(R.id.list_kecheng)
private ListView listKecheng; private List<KeCheng> cks; private KechengAdapter mAdapter; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); ViewUtils.inject(this); getDataFromServer();
} /**
* 获取网络数据
*/
private void getDataFromServer() { HttpUtils http = new HttpUtils(); http.configCurrentHttpCacheExpiry(1000 * 5);
// 设置超时时间
http.configTimeout(5 * 1000);
http.configSoTimeout(5 * 1000); http.send(HttpRequest.HttpMethod.GET, BASE_URL, null, new RequestCallBack<String>() { @Override
public void onSuccess(ResponseInfo<String> responseInfo) { Gson gson = new Gson();
RspData rspData = gson.fromJson(responseInfo.result, RspData.class);
cks = rspData.data; if (mAdapter == null) { mAdapter = new KechengAdapter(MainActivity.this, cks);
listKecheng.setAdapter(mAdapter); mAdapter.setOnImgClickListener(MainActivity.this); } else {
mAdapter.notifyDataSetChanged();
}
} @Override
public void onFailure(HttpException e, String s) { }
});
} @Override
public void handleBrowse(int position) { ArrayList<String> imgs = new ArrayList<>(); for (KeCheng data : cks) { imgs.add(data.picBig);
} Intent intent = new Intent(this, ImageBrowseActivity.class);
intent.putExtra("position", position);
intent.putStringArrayListExtra("imgs", imgs);
startActivity(intent); }
}
3. 图片浏览页面,使用ViewPager实现突破浏览:
3.1 ViewPager定义
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical"> <android.support.v4.view.ViewPager
android:id="@+id/imgs_viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" /> <ImageView
android:id="@+id/img_browse_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="25dp"
android:padding="5dp"
android:onClick="onBack"
android:src="@mipmap/img_browse_back" /> </FrameLayout>
注: ViewPager为图片滑动浏览容器,ImageView为返回按钮(返回到上一级页面)
3.2 ViewPager逻辑实现:
public class ImageBrowseActivity extends Activity { private ViewPager search_viewpager; private List<String> imgs; private int position; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); setContentView(R.layout.activity_image_browse); this.position = getIntent().getIntExtra("position", 0); this.imgs = getIntent().getStringArrayListExtra("imgs"); search_viewpager = (ViewPager) this.findViewById(R.id.imgs_viewpager);
search_viewpager.setOffscreenPageLimit(2); System.out.println("position:" + position);
System.out.println("imgs :" + imgs.size()); PagerAdapter adapter = new MyViewPagerAdapter(this, imgs);
search_viewpager.setAdapter(adapter);
search_viewpager.setCurrentItem(position);
} public void onBack(View view) {
finish();
}
}
注: 设置ViewPager基本信息,并通过viewPager.setCurrentItem来定义当前显示哪一个图片,(位置的信息由上一级页面传递过来);
3.3 在ViewPager适配器PagerAdapter中实现网络图片的加载浏览:
public class MyViewPagerAdapter extends PagerAdapter { List<String> imgs; Context mContext; public MyViewPagerAdapter(Context context, List<String> imgs) { this.mContext = context;
this.imgs = imgs; } @Override
public int getCount() { // 获得size
return imgs.size();
} @Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
} @Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((View) object);
} @Override
public Object instantiateItem(ViewGroup container, int position) { String imgUrl = imgs.get(position);
LinearLayout view = (LinearLayout) LayoutInflater.from(mContext).inflate(R.layout.img_browse, null);
PhotoView img = (PhotoView) view.findViewById(R.id.img_plan);
img.setTag(imgUrl);
ImageLoaderUtil.getInstance().displayListItemImage(imgs.get(position), img); ((ViewPager) container).addView(view); return view; }
注: 此处重点是两个方法,instantiateItem主要是加载View,在此处,通过ImageLoader加载网络图片;destroyItem中需要移除该View,避免View重复加载。
关于ImageLoader工具类,可以参考我之前的一篇博客:Android ListView性能优化实例讲解
基本上,通过以上方法,就可以实现网络图片在线浏览功能了,让我们看下效果吧:
后续: 本文主要介绍了通过PhotoView实现图片的缩放,放大缩小查看,其实还有一个开源项目GestureImageView,其github地址是:https://github.com/jasonpolites/gesture-imageview ,我也通过该开源项目实现了图片浏览,不过发现其效果并不如PhotoView那么好(主要表现在图片加载显示速度慢,不方面控制),代码会一起提供给大家参考。
源代码下载地址:https://github.com/zuiwuyuan/ImgsBrowse
Android 使用ViewPager结合PhotoView开源组件实现网络图片在线浏览功能的更多相关文章
- Android经常使用开源组件汇总
http://www.cnblogs.com/scige/p/3456790.html UI相关 图片 Android-Universal-Image-Loader:com.nostra13.univ ...
- Android 开源组件 ----- Android LoopView无限自动轮转控件
Android 开源组件 ----- Android LoopView无限自动轮转控件 2015-12-28 15:26 by 杰瑞教育, 32 阅读, 0 评论, 收藏, 编辑 一.组件介绍 App ...
- Android自定义控件 开源组件SlidingMenu的项目集成
在实际项目开发中,定制一个菜单,能让用户得到更好的用户体验,诚然菜单的样式各种各样,但是有一种菜单——滑动菜单,是被众多应用广泛使用的.关于这种滑动菜单的实现,我在前面的博文中也介绍了如何自定义去实现 ...
- 支付宝 Android 版使用的开源组件
支付宝 Android 版使用的开源组件 前言: 花了点时间整理了 支付宝 Android 客户端使用的开源组件,给需要的同学.在你不知道用什么开源框架的时候可以作下参考,毕竟支付宝是阿里的重量级产品 ...
- Android酷炫有用的开源框架
一.代码库 1.from 代码家 整理比較好的源代码连接 一.兼容类库 ActionBarSherlock : Action Bar是Android 3.0后才開始支持的,ActionBarSher ...
- Android开发之经常使用开源库直接拿来用
1.from 代码家 整理比較好的源代码连接 **************************************************************************** ...
- Android至ViewPager添加切换动画——使用属性动画
转载请注明出处:http://blog.csdn.net/allen315410/article/details/44200623 ViewPager作为Android最经常使用的的组件之中的一个.相 ...
- 011 Android TabLayout+ViewPager实现顶部滑动效果(多个页面)
1.TabLayout介绍 TabLayout提供了一个水平的布局用来展示Tabs,很多应用都有这样的设计,典型的有网易新闻,简书,知乎等.TabLayout就可以很好的完成这一职责,首先TabLay ...
- Android酷炫实用的开源框架(UI框架)
Android酷炫实用的开源框架(UI框架) 前言 忙碌的工作终于可以停息一段时间了,最近突然有一个想法,就是自己写一个app,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望能对大家有帮 ...
随机推荐
- 洛谷P2381 圆圆舞蹈
P2381 圆圆舞蹈 题目描述 熊大妈的乃修在时针的带领下,围成了一个圆圈舞蹈,由于没有严格的教育,奶牛们之间的间隔不一致. 奶牛想知道两只最远的奶牛到底隔了多远.奶牛A到B的距离为A顺时针走和逆时针 ...
- C# dataGridView_CellValueChanged事件
C# 输入完以后立即更新缓冲区(DataGridView CheckBox列checked变化后就触发CellValueChanged事件) 在DataGridView添加如下的事件( Current ...
- iPhone使用CoreTelephony获得SIM卡网络运营商资讯和通话资料
注意要加头文件目录 /System/Library/Frameworks/CoreTelephony.framework/Headers 到 build 设置 Header Search Paths, ...
- C 语言中 #pragma 的使用
在所有的预处理指令中,#Pragma指令可能是最复杂的了,它的作用是设定编译器的状态或者是指示编译器完成一些特定的动作.#pragma指令对每个编译器给出了一个方法,在保持与C和C++语言完全兼容的情 ...
- 【水滴石穿】rnTest
其实就是一个小的demo,不过代码分的挺精巧的 先放地址:https://github.com/linchengzzz/rnTest 来看看效果 确实没有什么可以说的,不过代码部分还行 先入口文件 / ...
- SQL注入绕过的技巧总结
sql注入在很早很早以前是很常见的一个漏洞.后来随着安全水平的提高,sql注入已经很少能够看到了.但是就在今天,还有很多网站带着sql注入漏洞在运行.稍微有点安全意识的朋友就应该懂得要做一下sql注入 ...
- JQuery-- 链式编程、静态函数,自己制作jQuery插件
一.链式编程 为什么jQuery运行链式编程 ,让我们的代码(方法)连续不间断书写(连续调用)其实主要还是jQuery很多的函数执行完毕之后,都会返回一个jQuery对象 因为获取操作的时候,会返回获 ...
- (转) Hibernate持久化类与主键生成策略
http://blog.csdn.net/yerenyuan_pku/article/details/65462930 Hibernate持久化类 什么是持久化类呢?在Hibernate中持久化类的英 ...
- elastic search book [ ElasticSearch book es book]
谁在使用ELK 维基百科, github都使用 ELK (ElasticSearch es book) ElasticSearch入门 Elasticsearch入门,这一篇就够了==>http ...
- VOIP开源项目源码地址
http://blog.csdn.net/hwz119/article/details/1781482 VoIP bookmarks from Klaus Darilion Below you ...