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()));
}
}

[/code]

对应的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冲突