转载：android使用viewpager+photoview实现新闻组图功能

之前项目中有需求要做一个组图和视频的栏目,视频暂时先使用html5实现了,但是组图效果就得自己用代码实现了,浏览了很多优秀的新闻app比如网易新闻,腾讯新闻,等等,发现这个功能很多,但是在网上找demo却怎么也找不到,最终决定自己写一个,看了两天各类demo失败n次之后,最终选择了使用viewpager+photoview来实现这个效果. 下面是项目结构:

上面是activity_main的代码,就是一个简单的viewpager,接下来是viewpager里面item的代码:

  1. <RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”
  2.     xmlns:tools=“http://schemas.android.com/tools”
  3.     android:layout_width=“match_parent”
  4.     android:layout_height=“match_parent”
  5.     android:paddingBottom=“@dimen/activity_vertical_margin”
  6.     android:paddingLeft=“@dimen/activity_horizontal_margin”
  7.     android:paddingRight=“@dimen/activity_horizontal_margin”
  8.     android:paddingTop=“@dimen/activity_vertical_margin”
  9.     tools:context=“com.example.zututestdemo.MainActivity” >
  11.     <android.support.v4.view.ViewPager
  12.         android:id=“@+id/viewpager”
  13.         android:layout_width=“fill_parent”
  14.         android:layout_height=“match_parent”
  15.         android:layout_centerInParent=“true”
  16.         />
  19. </RelativeLayout>

上面是activity_main的代码,就是一个简单的viewpager,接下来是viewpager里面item的代码:

  1. <?xml version=“1.0” encoding=“utf-8”?>
  2. <RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”
  3.     android:layout_width=“match_parent”
  4.     android:layout_height=“match_parent”
  5.    >
  6.     <uk.co.senab.photoview.PhotoView
  7.         android:id=“@+id/imageview”
  8.         android:layout_width=“fill_parent”
  9.         android:layout_height=“fill_parent”
  10.         android:layout_gravity=“center”
  11.         />
  12.     <LinearLayout
  13.         android:id=“@+id/ll_desc”
  14.         android:layout_width=“match_parent”
  15.         android:layout_height=“200dp”
  16.         android:orientation=“vertical”
  17.         android:background=“#55000000”
  18.         android:layout_alignBottom=“@id/imageview”
  19.         >
  20.         <TextView
  21.             android:id=“@+id/tv_desc”
  22.             android:layout_width=“wrap_content”
  23.             android:layout_height=“wrap_content”
  24.             android:textColor=“@android:color/white”
  25.             />
  28.     </LinearLayout>
  30. </RelativeLayout>

是不是很简单,主要就是用了photoview替换了imageview,增加了双击放大以及手势放大的功能.接下来是MainActivity中的代码,习惯性的在oncreate中调这两个方法(PS:一般情况下都是写到基类中的抽象方法,留给子类去实现,这样写比较简单易懂):

  1. @Override
  2.     protected void onCreate(Bundle savedInstanceState) {
  3.         super.onCreate(savedInstanceState);
  4.         setContentView(R.layout.activity_main);
  5.         initView();
  6.         initData();
  7.     }

然后就是这两个方法中的代码实现了,先看初始化控件的: 然后就是这两个方法中的代码实现了,先看初始化控件的:

  1. private void initView() {
  2.     viewpager = (ViewPager) findViewById(R.id.viewpager);
  4. }

对,你没有看错,只有一个简单的viewpager,我写成了成员变量

  1. private ViewPager viewpager;

 

然后就是初始化数据了:

  1. private void initData() {
  2.         List<String> imgList = new ArrayList<String>();
  3.         imgList.add(“http://www.jwb.com.cn/wjnew/st/zutu/201604/P020160408001855126082.jpg”);
  4.         imgList.add(“http://www.jwb.com.cn/wjnew/st/zutu/201604/P020160408001856374644.jpg”);
  5.         imgList.add(“http://www.jwb.com.cn/wjnew/st/zutu/201604/P020160408001857151815.jpg”);
  6.         imgList.add(“http://www.jwb.com.cn/wjnew/st/zutu/201604/P020160408001857930270.jpg”);
  7.         imgList.add(“http://www.jwb.com.cn/wjnew/st/zutu/201604/P020160408001858710167.jpg”);
  8.         imgList.add(“http://www.jwb.com.cn/wjnew/st/zutu/201604/W020160408001848234961.jpg”);
  9.         List<String> desList = new ArrayList<String>();
  10.         desList.add(“夜空”);
  11.         desList.add(“美丽的夜空，郎朗星空黑色的宇宙。美丽的夜空，郎朗星空黑色的宇宙。美丽的夜空，郎朗星空黑色的宇宙。美丽的夜空，郎朗星空黑色的宇宙。”);
  12.         desList.add(“漂亮的壁纸”);
  13.         desList.add(“图片描述一”);
  14.         desList.add(“图片描述二”);
  15.         desList.add(“25”);
  16.         MyAdapter adpter = new MyAdapter(imgList, desList, MainActivity.this);
  18.         viewpager.setAdapter(adpter);
  19.     }

这里就是添加了两个字符串的集合传到了viewpager的adapter中了,就这么简单粗暴.

adapter中的内容是这个样子的:

  1. private class MyAdapter extends PagerAdapter{
  3.         List<String> imgs;
  4.         List<String> descs;
  5.         LayoutInflater inflater;
  6.         Context context;
  7.         boolean first = true;
  8.         public MyAdapter(List<String> imgs,List<String> descs,Context context){
  9.             this.imgs = imgs;
  10.             this.descs = descs;
  11.             inflater = LayoutInflater.from(context);
  12.             this.context = context;
  13.         }
  14.         @Override
  15.         public int getCount() {
  16.             // TODO Auto-generated method stub
  17.             return imgs.size();
  18.         }
  20.         @Override
  21.         public boolean isViewFromObject(View arg0, Object arg1) {
  22.             // TODO Auto-generated method stub
  23.             return arg0 == arg1;
  24.         }
  25.         //TODO 这里返回一个视图实现基本功能
  26.         @Override
  27.         public Object instantiateItem(ViewGroup container, int position) {
  29.             View root = inflater.inflate(R.layout.itempager, null);
  30.             PhotoView img = (PhotoView) root.findViewById(R.id.imageview);
  31.             final LinearLayout ll_desc = (LinearLayout) root.findViewById(R.id.ll_desc);
  32.             final TextView desc = (TextView) root.findViewById(R.id.tv_desc);
  33.             if (!(imgs.isEmpty() && descs.isEmpty())) {
  34.                 UniversalImageLoadTool.disPlay(imgs.get(position), img, context, 0);
  35.                 desc.setText(descs.get(position));
  36.                 container.addView(root);
  37.                 img.setOnPhotoTapListener(new OnPhotoTapListener() {
  39.                     @Override
  40.                     public void onPhotoTap(View view, float x, float y) {
  41.                         // TODO Auto-generated method stub
  42.                         if (first) {
  43.                             first =false;
  44.                             ll_desc.setVisibility(View.GONE);
  45.                         }else{
  46.                             first = true;
  47.                             ll_desc.setVisibility(View.VISIBLE);
  48.                         }
  50.                     }
  51.                 });
  52.                 return root;
  54.             }
  56.             return null;
  57.         }
  58.         @Override
  59.         public void destroyItem(ViewGroup container, int position, Object object) {
  60.             container.removeView((View)object);
  61.         }
  62.     }

这样这个最基本的demo就算完成了,需要注意的一点是,这个photoview的内容一定要通过src或者使用imageloader加载(其实本质一样),一定不能通过background的方式来定义,否则双击放大等功能就都失效了,下面是项目的地址:新闻组图轮播效果

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注