之前專案中有需求要做一個組圖和視訊的欄目,視訊暫時先使用html5實現了,但是組圖效果就得自己用程式碼實現了,瀏覽了很多優秀的新聞app比如網易新聞,騰訊新聞,等等,發現這個功能很多,但是在網上找demo卻怎麼也找不到,最終決定自己寫一個,看了兩天各類demo失敗n次之後,最終選擇了使用viewpager+photoview來實現這個效果.

之前專案中有需求要做一個組圖和視訊的欄目,視訊暫時先使用html5實現了,但是組圖效果就得自己用程式碼實現了,瀏覽了很多優秀的新聞app比如網易新聞,騰訊新聞,等等,發現這個功能很多,但是在網上找demo卻怎麼也找不到,最終決定自己寫一個,看了兩天各類demo失敗n次之後,最終選擇了使用viewpager+photoview來實現這個效果.

下面是專案結構:

上面是activity_main的程式碼,就是一個簡單的viewpager,接下來是viewpager裡面item的程式碼:

<RelativeLayout 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"
    tools:context="com.example.zututestdemo.MainActivity" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        />
    

</RelativeLayout>
 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   >
    <uk.co.senab.photoview.PhotoView
        android:id="@+id/imageview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_gravity="center"
        />
    <LinearLayout 
        android:id="@+id/ll_desc"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:orientation="vertical"
        android:background="#55000000"
        android:layout_alignBottom="@id/imageview"
        >
        <TextView 
            android:id="@+id/tv_desc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            />
        
        
    </LinearLayout>

</RelativeLayout>
 

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initData();
    }

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

private ViewPager viewpager;

然後就是初始化資料了:

private void initData() {
		List<String> imgList = new ArrayList<String>();
		imgList.add("http://www.jwb.com.cn/wjnew/st/zutu/201604/P020160408001855126082.jpg");
		imgList.add("http://www.jwb.com.cn/wjnew/st/zutu/201604/P020160408001856374644.jpg");
		imgList.add("http://www.jwb.com.cn/wjnew/st/zutu/201604/P020160408001857151815.jpg");
		imgList.add("http://www.jwb.com.cn/wjnew/st/zutu/201604/P020160408001857930270.jpg");
		imgList.add("http://www.jwb.com.cn/wjnew/st/zutu/201604/P020160408001858710167.jpg");
		imgList.add("http://www.jwb.com.cn/wjnew/st/zutu/201604/W020160408001848234961.jpg");
		List<String> desList = new ArrayList<String>();
		desList.add("夜空");
		desList.add("美麗的夜空，郎朗星空黑色的宇宙。美麗的夜空，郎朗星空黑色的宇宙。美麗的夜空，郎朗星空黑色的宇宙。美麗的夜空，郎朗星空黑色的宇宙。");
		desList.add("漂亮的桌布");
		desList.add("圖片描述一");
		desList.add("圖片描述二");
		desList.add("25");
		MyAdapter adpter = new MyAdapter(imgList, desList, MainActivity.this);

		viewpager.setAdapter(adpter);
	}

adapter中的內容是這個樣子的:

private class MyAdapter extends PagerAdapter{
		
		List<String> imgs;
		List<String> descs;
		LayoutInflater inflater;
		Context context;
		boolean first = true;
		public MyAdapter(List<String> imgs,List<String> descs,Context context){
			this.imgs = imgs;
			this.descs = descs;
			inflater = LayoutInflater.from(context);
			this.context = context;
		}
		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return imgs.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			// TODO Auto-generated method stub
			return arg0 == arg1;
		}
		//TODO 這裡返回一個檢視實現基本功能
		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			
			View root = inflater.inflate(R.layout.itempager, null);
			PhotoView img = (PhotoView) root.findViewById(R.id.imageview);
			final LinearLayout ll_desc = (LinearLayout) root.findViewById(R.id.ll_desc);
			final TextView desc = (TextView) root.findViewById(R.id.tv_desc);
			if (!(imgs.isEmpty() && descs.isEmpty())) {
				UniversalImageLoadTool.disPlay(imgs.get(position), img, context, 0);
				desc.setText(descs.get(position));
				container.addView(root);
				img.setOnPhotoTapListener(new OnPhotoTapListener() {
					
					@Override
					public void onPhotoTap(View view, float x, float y) {
						// TODO Auto-generated method stub
						if (first) {
							first =false;
							ll_desc.setVisibility(View.GONE);
						}else{
							first = true;
							ll_desc.setVisibility(View.VISIBLE);
						}
						
					}
				});
				return root;
				
			}
			
			return null;
		}
		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView((View)object);
		}
	}