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;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(mListViews.get(position));}@Overridepublic Object instantiateItem(ViewGroup container, int position) { container.addView(mListViews.get(position), 0); return mListViews.get(position);}@Overridepublic int getCount() {return  mListViews.size();}@Overridepublic 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;}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic 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 blocke.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>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_book);// 1.计算页卡滑动的数据initImageData();// 2.初始化头标initTextView();// 3.加载viewpageinitViewPager2();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;}@Overridepublic 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;}@Overridepublic 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;}@Overridepublic 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冲突