android学习之-ViewPager

使用viewpager来做菜单和页面导航等。

第一种效果：带圆点的滚动效果：

源码：

// 3.图片展示转换
	private void initViewPager2() {
		imageViewPager = (ViewPager) this.findViewById(R.id.image_vPager);
		views = new ArrayList<View>();
		inflater = getLayoutInflater();

		view1 = inflater.inflate(R.layout.book_layout3, null);
		view2 = inflater.inflate(R.layout.book_layout3, null);
		view3 = inflater.inflate(R.layout.book_layout3, null);

		views.add(view1);
		views.add(view2);
		views.add(view3);
		
		view1.setOnClickListener(new ViewOnClickListener(BookActivity.this, 0));
		view2.setOnClickListener(new ViewOnClickListener(BookActivity.this, 1));
		view3.setOnClickListener(new ViewOnClickListener(BookActivity.this, 2));

		initData(view1, view2, view3);

		imageViews = new ImageView[views.size()];
		
		imageViews[0] = (ImageView) this.findViewById(R.id.group_image1);
		imageViews[1] = (ImageView) this.findViewById(R.id.group_image2);
		imageViews[2] = (ImageView) this.findViewById(R.id.group_image3);

		imageViewPager.setAdapter(new MyViewPageAdapter(views));
		
		imageViewPager.setCurrentItem(0);
		imageViewPager.setOnPageChangeListener(new GuidePageChangeListener(
				BookActivity.this, imageViews));
	}

// 装换中的图片
	private void initData(View view1, View view2, View view3) {
		ImageView imageView11 = (ImageView) view1
				.findViewById(R.id.book_comic_image);
		ImageView imageView22 = (ImageView) view2
				.findViewById(R.id.book_comic_image);
		ImageView imageView33 = (ImageView) view3
				.findViewById(R.id.book_comic_image);

		if (ComicData.zhanshiComicList.size() > 0) {
			imageView11.setImageBitmap(CacheManager
					.loadCacheBitmapByUrl(ComicData.zhanshiComicList.get(0)
							.getImageUrl()));
			imageView22.setImageBitmap(CacheManager
					.loadCacheBitmapByUrl(ComicData.zhanshiComicList.get(1)
							.getImageUrl()));
			imageView33.setImageBitmap(CacheManager
					.loadCacheBitmapByUrl(ComicData.zhanshiComicList.get(2)
							.getImageUrl()));
		}
	}

对应的layout资源：

 <android.support.v4.view.ViewPager
            android:id="@+id/vPager"
            android:layout_width="wrap_content"
            android:layout_height="800dp" />

<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:background="#FFFFFF" >


    <ImageView
        android:id="@+id/book_comic_image"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/book_comic"
        android:scaleType="fitXY" />


</RelativeLayout>

对应的viewpager的adapter

package com.enterise.comic.manyu.listener;

import java.util.List;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
/**
 * ViewPager的适配器
 * 
 * 主要是用于显示个数和指针
 * @author Always
 *
 */
public class MyViewPageAdapter extends PagerAdapter{
	private List<View> mListViews;
	
	public MyViewPageAdapter(List<View> mListViews) {
		this.mListViews = mListViews;
	}

	@Override
	public void destroyItem(ViewGroup container, int position, Object object) 	{	
		container.removeView(mListViews.get(position));
	}


	@Override
	public Object instantiateItem(ViewGroup container, int position) {			
		 container.addView(mListViews.get(position), 0);
		 return mListViews.get(position);
	}

	@Override
	public int getCount() {			
		return  mListViews.size();
	}
	
	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {			
		return arg0==arg1;
	}
}

页面滑动时的监听器

package com.enterise.comic.manyu.listener;

import android.content.Context;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.widget.ImageView;

import com.enterise.comic.manyu.activity.R;

/**
 * 页面滑动监听器
 * 
 * @author Always
 * 
 */
public class GuidePageChangeListener implements OnPageChangeListener {

	private ImageView[] imageViews;
	private Context context;

	public GuidePageChangeListener(Context context, ImageView[] imageViews) {
		this.context = context;
		this.imageViews = imageViews;
	}
	@Override
	public void onPageScrollStateChanged(int arg0) {
	}

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {
	}

	@Override
	public void onPageSelected(int arg0) {
		
		for (int i = 0; i < imageViews.length; i++) {
			imageViews[arg0].setBackgroundResource(R.drawable.point_white);
			if (arg0 != i) {
				imageViews[i].setBackgroundResource(R.drawable.point_gray);
			}
		}
		/*//跳转
		if (isMainActivity || arg0 == 2) {
			try {
				System.out.println("GuidePageChangeListener.onPageSelected()");
				new Thread().sleep(2000);
				Intent intent = new Intent(context, GroupActivity.class);
				context.startActivity(intent);
			} catch (InterruptedException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}*/

	}

}

2.第二种是头部的图标导航效果:

效果图：

一些代码如下：

layout：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
	
    <com.enterise.comic.manyu.view.ScrollView1
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        >
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="150.0dip" >

            <android.support.v4.view.ViewPager
                android:id="@+id/image_vPager"
                android:layout_width="fill_parent"
                android:layout_height="200.0dip" />

            <LinearLayout
                android:id="@+id/book_viewGroup"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_marginBottom="10dp"
                android:orientation="horizontal" >

                <ImageView
                    android:id="@+id/group_image1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="10dp"
                    android:background="@drawable/point_white" />

                <ImageView
                    android:id="@+id/group_image2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="10dp"
                    android:background="@drawable/point_gray" />

                <ImageView
                    android:id="@+id/group_image3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="10dp"
                    android:background="@drawable/point_gray" />
            </LinearLayout>
        </RelativeLayout>

        <LinearLayout
            android:id="@+id/linearLayout2"
            android:layout_width="fill_parent"
            android:layout_height="40.0dip"
            android:background="#FFFFFF" >

            <TextView
                android:id="@+id/text1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1.0"
                android:gravity="center"
                android:text="推荐"
                android:textColor="#8d8d8d"
                android:textSize="20.0dip" />

            <TextView
                android:id="@+id/text2"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1.0"
                android:gravity="center"
                android:text="排行"
                android:textColor="#8d8d8d"
                android:textSize="20.0dip" />

            <TextView
                android:id="@+id/text3"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1.0"
                android:gravity="center"
                android:text="最新"
                android:textColor="#8d8d8d"
                android:textSize="20.0dip" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:background="#858585" >
            <ImageView
                android:id="@+id/cursor"
                android:layout_width="fill_parent"
                android:layout_height="1dp"
                android:scaleType="matrix"
                android:src="@drawable/guide_line" />
        </LinearLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/vPager"
            android:layout_width="wrap_content"
            android:layout_height="800dp" />
        
    </LinearLayout>
</com.enterise.comic.manyu.view.ScrollView1>
</LinearLayout>

activity：

package com.enterise.comic.manyu.activity;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.Matrix;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

import com.enterise.comic.manyu.adapter.BookCommonAdapter;
import com.enterise.comic.manyu.adapter.BookTuiJianAdapter;
import com.enterise.comic.manyu.data.CacheManager;
import com.enterise.comic.manyu.data.ComicData;
import com.enterise.comic.manyu.data.IContentListener;
import com.enterise.comic.manyu.data.ResponseData;
import com.enterise.comic.manyu.domain.ComicDetail;
import com.enterise.comic.manyu.http.task.Task;
import com.enterise.comic.manyu.listener.GuidePageChangeListener;
import com.enterise.comic.manyu.listener.MyOnPageChangeListener;
import com.enterise.comic.manyu.listener.MyViewPageAdapter;
import com.enterise.comic.manyu.utils.TextUtil;
import com.enterise.comic.manyu.utils.ViewUtil;

/**
 * 书城
 * 
 * @author Always
 * 
 */
@SuppressLint("HandlerLeak")
public class BookActivity extends Activity {
	
	private static final int REFLUSH_IMAGE = 10002;

	private ViewPager imageViewPager;// 图片内容(上面)
	private ViewPager viewPager;// 漫画内容内容(下面)
	
	private ImageView imageView;// 动画图片
	private TextView textView1, textView2, textView3;
	private List<View> views;// Tab页面列表
	private int offset = 0;// 动画图片偏移量
	private int currIndex = 0;// 当前页卡编号
	private int bmpW;// 动画图片宽度
	private View view1, view2, view3;// 各个页卡
	
	private ImageView[] imageViews;
	private List<TextView> textList;

	private LayoutInflater inflater;

	GridView tuijianView;
	ListView paihangView;
	ListView zuixinView;
	
	BookTuiJianAdapter tuijianAdapter;
	BookCommonAdapter paihangAdapter;
	BookCommonAdapter zuixinAdapter;
	

	List<ComicDetail> tuijianComicList = new ArrayList<ComicDetail>();
	List<ComicDetail> paihangComicList = new ArrayList<ComicDetail>();
	List<ComicDetail> zuixinComicList = new ArrayList<ComicDetail>();
	List<ComicDetail> zhanshiComicList = new ArrayList<ComicDetail>();
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_book);
		
		// 1.计算页卡滑动的数据
		initImageData();
		
		// 2.初始化头标
		initTextView();
		
		// 3.加载viewpage
		initViewPager2();
		initViewPager();
	}

	/**
	 * 1.初始化动画，这个就是页卡滑动时，下面的横线也滑动的效果，在这里需要计算一些数据
	 */
	private void initImageData() {
		imageView = (ImageView) findViewById(R.id.cursor);
		bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.a)
				.getWidth();// 获取图片宽度
		DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		int screenW = dm.widthPixels;// 获取分辨率宽度
		offset = (screenW / 3 - bmpW) / 2;// 计算偏移量
		Matrix matrix = new Matrix();
		matrix.postTranslate(offset, 0);
		imageView.setImageMatrix(matrix);// 设置动画初始位置
	}

	/**
	 * 2. 初始化头标
	 */
	private void initTextView() {
		textView1 = (TextView) findViewById(R.id.text1);
		textView2 = (TextView) findViewById(R.id.text2);
		textView3 = (TextView) findViewById(R.id.text3);

		textView1.setTextColor(Color.parseColor("#ff9000"));

		textList = new ArrayList<TextView>();
		textList.add(textView1);
		textList.add(textView2);
		textList.add(textView3);

		textView1.setOnClickListener(new MyOnClickListener(0));
		textView2.setOnClickListener(new MyOnClickListener(1));
		textView3.setOnClickListener(new MyOnClickListener(2));
	}

	// 3.图片展示转换
	private void initViewPager2() {
		imageViewPager = (ViewPager) this.findViewById(R.id.image_vPager);
		views = new ArrayList<View>();
		inflater = getLayoutInflater();

		view1 = inflater.inflate(R.layout.book_layout3, null);
		view2 = inflater.inflate(R.layout.book_layout3, null);
		view3 = inflater.inflate(R.layout.book_layout3, null);

		views.add(view1);
		views.add(view2);
		views.add(view3);
		
		view1.setOnClickListener(new ViewOnClickListener(BookActivity.this, 0));
		view2.setOnClickListener(new ViewOnClickListener(BookActivity.this, 1));
		view3.setOnClickListener(new ViewOnClickListener(BookActivity.this, 2));

		initData(view1, view2, view3);

		imageViews = new ImageView[views.size()];
		
		imageViews[0] = (ImageView) this.findViewById(R.id.group_image1);
		imageViews[1] = (ImageView) this.findViewById(R.id.group_image2);
		imageViews[2] = (ImageView) this.findViewById(R.id.group_image3);

		imageViewPager.setAdapter(new MyViewPageAdapter(views));
		
		imageViewPager.setCurrentItem(0);
		imageViewPager.setOnPageChangeListener(new GuidePageChangeListener(
				BookActivity.this, imageViews));
	}

	/**
	 * 初始化，viewpager数据(底部)
	 */
	private void initViewPager() {
		viewPager = (ViewPager) findViewById(R.id.vPager);
		views = new ArrayList<View>();
		LayoutInflater inflater = getLayoutInflater();
		view1 = inflater.inflate(R.layout.book_layout1, null);
		view2 = inflater.inflate(R.layout.book_layout2, null);
		view3 = inflater.inflate(R.layout.book_layout2, null);
		views.add(view1);
		views.add(view2);
		views.add(view3);
		viewPager.setAdapter(new MyViewPageAdapter(views));
		viewPager.setCurrentItem(0);
		viewPager.setOnPageChangeListener(new MyOnPageChangeListener(offset,
				bmpW, currIndex, imageView, textList));

		initData2Views(view1, view2, view3);
	}

	// 装换中的图片
	private void initData(View view1, View view2, View view3) {
		ImageView imageView11 = (ImageView) view1
				.findViewById(R.id.book_comic_image);
		ImageView imageView22 = (ImageView) view2
				.findViewById(R.id.book_comic_image);
		ImageView imageView33 = (ImageView) view3
				.findViewById(R.id.book_comic_image);
		
		if(ComicData.zhanshiComicList.size() > 0){
			imageView11.setImageBitmap(CacheManager.loadCacheBitmapByUrl(ComicData.zhanshiComicList.get(0).getImageUrl()));
			imageView22.setImageBitmap(CacheManager.loadCacheBitmapByUrl(ComicData.zhanshiComicList.get(1).getImageUrl()));
			imageView33.setImageBitmap(CacheManager.loadCacheBitmapByUrl(ComicData.zhanshiComicList.get(2).getImageUrl()));
		}
	}

	/**
	 * 初始化 三个页面的数据
	 * 
	 * @param view1
	 * @param view2
	 * @param view3
	 */
	private void initData2Views(View view1, View view2, View view3) {
		tuijianView = (GridView) view1.findViewById(R.id.gridview);
		paihangView = (ListView) view2.findViewById(R.id.me_layout2_listview);
		zuixinView = (ListView) view3.findViewById(R.id.me_layout2_listview);

		tuijianAdapter = new BookTuiJianAdapter(BookActivity.this, ComicData.tuijianComicList);
		paihangAdapter = new BookCommonAdapter(BookActivity.this, ComicData.paihangComicList);
		zuixinAdapter = new BookCommonAdapter(BookActivity.this, ComicData.zuixinComicList);
		
		tuijianView.setAdapter(tuijianAdapter);
		paihangView.setAdapter(paihangAdapter);
		zuixinView.setAdapter(zuixinAdapter);
		
		tuijianView.setOnItemClickListener(new MyGridViewOnItemClickListener(BookActivity.this));
		paihangView.setOnItemClickListener(new ListViewOnItemClickListener(BookActivity.this, ComicData.paihangComicList));
		zuixinView.setOnItemClickListener(new ListViewOnItemClickListener(BookActivity.this, ComicData.zuixinComicList));
		
	}

	class MyOnClickListener implements OnClickListener {
		private int index = 0;

		public MyOnClickListener(int i) {
			index = i;
		}

		public void onClick(View v) {
			viewPager.setCurrentItem(index);
			TextUtil.changeTextColor(index, textList);
		}
	}

	
	
	//girdview的监听器
	class MyGridViewOnItemClickListener implements OnItemClickListener{
		
		private Context context;
		
		public MyGridViewOnItemClickListener(Context context){
			this.context = context;
		}

		@Override
		public void onItemClick(AdapterView<?> adapter, View view, int position,
				long arg3) {
			
			ComicDetail comicDetail = ComicData.tuijianComicList.get(position);
			Intent intent = new Intent(context,ComicDetailActivity.class);
			intent.putExtra("contentCode", comicDetail.getContentCode());
			context.startActivity(intent);
		}
		
	}
	//listView的监听器
	class ListViewOnItemClickListener implements OnItemClickListener{
		
		private Context context;
		private List<ComicDetail> comicList;
		
		public ListViewOnItemClickListener(Context context,List<ComicDetail>comicList){
			this.context = context;
			this.comicList = comicList;
		}

		@Override
		public void onItemClick(AdapterView<?> arg0, View arg1, int position,
				long arg3) {
			ComicDetail comicDetail = comicList.get(position);
			Intent intent = new Intent(context,ComicDetailActivity.class);
			intent.putExtra("contentCode", comicDetail.getContentCode());
			context.startActivity(intent);
		}
		
	}
	
	//View的点击事件
	class ViewOnClickListener implements OnClickListener {
		
		private int index;
		private Context context;
		
		public ViewOnClickListener(Context context,int index){
			this.index = index;
			this.context = context;
		}

		@Override
		public void onClick(View v) {
			ComicDetail comicDetail = ComicData.zhanshiComicList.get(index);
			Intent intent = new Intent(context,ComicDetailActivity.class);
			intent.putExtra("contentCode", comicDetail.getContentCode());
			context.startActivity(intent);
		}
		
	}
	

}

viewpager的页面切换监听：

package com.enterise.comic.manyu.listener;

import java.util.List;

import com.enterise.comic.manyu.utils.TextUtil;

import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
/**
 * 监听标题导航转换
 * @author Always
 *
 */
public class MyOnPageChangeListener implements OnPageChangeListener{
	
	private int offset;
	private int bmpW;
	private int currIndex;
	private int one;
	private int two;
	private ImageView imageView;
	private List<TextView> textList;
	
	
	public MyOnPageChangeListener(int offset,int bmpW,int currIndex,ImageView imageView,List<TextView> textList){
		this.offset = offset;
		this.bmpW = bmpW;
		this.currIndex = currIndex;
		this.imageView = imageView;
		this.textList = textList;
		
		one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量
		two = one * 2;// 页卡1 -> 页卡3 偏移量
	}
	
	public MyOnPageChangeListener(int offset,int bmpW,int currIndex,ImageView imageView,boolean isMeActivity,List<TextView> textList){
		this.offset = offset;
		this.bmpW = bmpW;
		this.currIndex = currIndex;
		this.imageView = imageView;
		this.textList = textList;
		
		one = offset;// 页卡1 -> 页卡2 偏移量
		two = one * 2;// 页卡1 -> 页卡3 偏移量
	}
	
	
	public void onPageScrollStateChanged(int arg0) {
		
		
	}

	public void onPageScrolled(int arg0, float arg1, int arg2) {
		
	}

	public void onPageSelected(int arg0) {
		/*两种方法，这个是一种，下面还有一种，显然这个比较麻烦
		Animation animation = null;
		switch (arg0) {
		case 0:
			if (currIndex == 1) {
				animation = new TranslateAnimation(one, 0, 0, 0);
			} else if (currIndex == 2) {
				animation = new TranslateAnimation(two, 0, 0, 0);
			}
			break;
		case 1:
			if (currIndex == 0) {
				animation = new TranslateAnimation(offset, one, 0, 0);
			} else if (currIndex == 2) {
				animation = new TranslateAnimation(two, one, 0, 0);
			}
			break;
		case 2:
			if (currIndex == 0) {
				animation = new TranslateAnimation(offset, two, 0, 0);
			} else if (currIndex == 1) {
				animation = new TranslateAnimation(one, two, 0, 0);
			}
			break;
			
		}
		*/
		
		//字体颜色的变化
		if(textList != null){
			TextUtil.changeTextColor(arg0, textList);
		}
		Animation animation = new TranslateAnimation(one*currIndex, one*arg0, 0, 0);//显然这个比较简洁，只有一行代码。
		currIndex = arg0;
		animation.setFillAfter(true);// True:图片停在动画结束位置
		animation.setDuration(300);
		imageView.startAnimation(animation);
	}
	

}

出现的问题是：

scrollview和listview、gridview冲突