什么是ViewPager?
ViewPager是安卓3.0之后提供的新特性,继承自ViewGroup,专门用以实现左右滑动切换View的效果。
如果想向下兼容就必须要android-support-v4.jar这个包的支持,这是一个来自google提供的一个附加包。
通俗点来讲,就是现在市面上大多数app,安装完第一次打开软件会出现的一个左右滑动的引导界面。
布局代码:
要点1、页面的小圆点的控制,当在当前页时小圆点不可点。
所以有多少个页面就需要添加多少的圆点图片。
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 tools:context="com.example.viewpager.MainActivity" > 6 7 <android.support.v4.view.ViewPager 8 android:id="@+id/viewpager" 9 android:layout_width="match_parent" 10 android:layout_height="match_parent" /> 11 12 <LinearLayout 13 android:id="@+id/ll" 14 android:layout_width="wrap_content" 15 android:layout_height="wrap_content" 16 android:layout_alignParentBottom="true" 17 android:layout_centerHorizontal="true" 18 android:layout_marginBottom="20dp" 19 android:orientation="horizontal" > 20 21 <ImageView 22 android:id="@+id/iv1" 23 android:layout_width="wrap_content" 24 android:layout_height="wrap_content" 25 android:layout_gravity="center_vertical" 26 android:clickable="true" 27 android:padding="25dp" 28 android:src="@drawable/point_selector" /> 29 <ImageView 30 android:id="@+id/iv2" 31 android:layout_width="wrap_content" 32 android:layout_height="wrap_content" 33 android:layout_gravity="center_vertical" 34 android:clickable="true" 35 android:padding="25dp" 36 android:src="@drawable/point_selector" /> 37 <ImageView 38 android:id="@+id/iv3" 39 android:layout_width="wrap_content" 40 android:layout_height="wrap_content" 41 android:layout_gravity="center_vertical" 42 android:clickable="true" 43 android:padding="25dp" 44 android:src="@drawable/point_selector" /> 45 <ImageView 46 android:id="@+id/iv4" 47 android:layout_width="wrap_content" 48 android:layout_height="wrap_content" 49 android:layout_gravity="center_vertical" 50 android:clickable="true" 51 android:padding="25dp" 52 android:src="@drawable/point_selector" /> 53 </LinearLayout> 54 55 </RelativeLayout>
小圆点是否可点,则需要一个选择器,当当前页面可触碰,则小圆点为灰色,否则为白色
1 <?xml version="1.0" encoding="utf-8"?> 2 <selector xmlns:android="http://schemas.android.com/apk/res/android" > 3 <item android:state_enabled="true" android:drawable="@drawable/page_now"></item> 4 <item android:state_enabled="false" android:drawable="@drawable/page"></item> 5 6 </selector>
pege_now和page为准备好的图片,分别是灰色小圆点和白色小圆点。
ViewPager和ListView都需要一个适配器,ViewPager需要适配器来提供要显示页面的页数、判断是否是view对象、实例化一个页面、删除一个页面等等。。
适配器代码:
1 package com.example.viewpager; 2 3 import java.util.List; 4 5 import android.support.v4.view.PagerAdapter; 6 import android.view.View; 7 import android.view.ViewGroup; 8 9 public class ImageAdapter extends PagerAdapter { 10 11 private List<View> viewlist; 12 public ImageAdapter(List<View> viewlist) 13 { 14 this.viewlist=viewlist; 15 } 16 @Override 17 public int getCount() {//返回页面数 18 // TODO Auto-generated method stub 19 if (viewlist.size()!=0) 20 { 21 return viewlist.size(); 22 } 23 return 0; 24 } 25 26 @Override 27 public boolean isViewFromObject(View arg0, Object arg1) {//判断是否为view对象 28 // TODO Auto-generated method stub 29 return arg0==arg1; 30 } 31 public Object instantiateItem(ViewGroup container,int position)//实例化一个页面 32 { 33 container.addView(viewlist.get(position)); 34 return viewlist.get(position); 35 } 36 public void destroyItem(ViewGroup container, int position, Object object) {//销毁一个页卡 37 container.removeView(viewlist.get(position)); 38 } 39 40 }
MainActivity代码:
1 package com.example.viewpager; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 6 import android.app.Activity; 7 import android.os.Bundle; 8 import android.support.v4.view.ViewPager; 9 import android.support.v4.view.ViewPager.OnPageChangeListener; 10 import android.util.Log; 11 import android.view.View; 12 import android.view.View.OnClickListener; 13 import android.view.ViewGroup.LayoutParams; 14 import android.widget.Button; 15 import android.widget.ImageView; 16 import android.widget.ImageView.ScaleType; 17 import android.widget.LinearLayout; 18 19 public class MainActivity extends Activity implements OnClickListener, OnPageChangeListener{ 20 21 private ViewPager viewpager=null; 22 private List<View> viewlist=null; 23 //private View view1, view2, view3, view4; 24 private int images[]=new int[]{R.drawable.p01,R.drawable.w07,R.drawable.w08,R.drawable.welcome}; 25 private ImageView points[];//存放小圆圈数组 26 private int currentIndex=0;//当前页面,默认首页 27 private static final String TAG="MainActivity"; 28 @Override 29 protected void onCreate(Bundle savedInstanceState) { 30 super.onCreate(savedInstanceState); 31 setContentView(R.layout.activity_main); 32 initViewPager(); 33 initPoint(); 34 } 35 public void initPoint()//初始化小圆点 36 { 37 LinearLayout ll=(LinearLayout)findViewById(R.id.ll); 38 points=new ImageView[4]; 39 for (int i=0;i<points.length;i++) 40 { 41 points[i]=(ImageView)ll.getChildAt(i); 42 points[i].setEnabled(true); 43 points[i].setOnClickListener(this); 44 points[i].setTag(i);//标识符与圆点顺序一致 45 } 46 currentIndex=0; 47 points[currentIndex].setEnabled(false); 48 49 50 } 51 private void initViewPager() 52 { 53 viewpager=(ViewPager)findViewById(R.id.viewpager); 54 viewlist=new ArrayList<View>(); 55 for (int i = 0; i < images.length; i++) { 56 ImageView imageView = new ImageView(MainActivity.this); 57 imageView.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT)); 58 imageView.setScaleType(ScaleType.FIT_XY);// 设置缩放样式 59 imageView.setImageResource(images[i]); 60 viewlist.add(imageView); 61 } 62 ImageAdapter adapter=new ImageAdapter(viewlist);//构造一个适配器 63 viewpager.setAdapter(adapter);//给viewpager添加一个适配器 64 viewpager.setOnPageChangeListener(this);//设置监听 65 66 67 } 68 @Override 69 public void onClick(View arg0) { 70 // TODO Auto-generated method stub 71 Log.i("tuzi",arg0.getTag()+""); 72 // viewpager.setCurrentItem(Integer.parseInt((String) arg0.getTag()));//需要直接跳转的某个页面的时候 73 } 74 @Override 75 public void onPageScrollStateChanged(int arg0) { 76 //此方法是在状态改变的时候调用,其中arg0这个参数有三种状态(0,1,2)。arg0 ==1的时辰默示正在滑动,arg0==2的时辰默示滑动完毕了,arg0==0的时辰默示什么都没做。 77 // TODO Auto-generated method stub 78 79 } 80 @Override 81 public void onPageScrolled(int arg0, float arg1, int arg2) { 82 // TODO Auto-generated method stub 83 // 当页面在滑动的时候会调用此方法,在滑动被停止之前,此方法回一直得到调用。其中三个参数的含义分别为: 84 // arg0 :当前页面,及你点击滑动的页面 85 // arg1:当前页面偏移的百分比 86 // arg2:当前页面偏移的像素位置 87 88 } 89 @Override 90 public void onPageSelected(int arg0) { 91 // TODO Auto-generated method stub 92 points[arg0].setEnabled(false); 93 points[currentIndex].setEnabled(true); 94 currentIndex=arg0; 95 96 } 97 }
添加标题栏
PagerTabStrip与PagerTitleStrip的区别
其实这两个实现的效果基本差不多,但有两点不同:
1、PagerTabStrip在当前页面下,会有一个下划线条来提示当前页面的Tab是哪个。
2、PagerTabStrip的Tab是可以点击的,当用户点击某一个Tab时,当前页面就会跳转到这个页面,而PagerTitleStrip则没这个功能。
首先是PagerTitleStrip的用法
1、在布局文件添加上
<android.support.v4.view.PagerTitleStrip
android:id="@+id/pagetitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"/>
2、声明一个存放标题名称的数组
private ArrayList<String> titlelist=null;
并实例化
titlelist = new ArrayList<String>();// 每个页面的Title数据
titlelist.add("页面一");
titlelist.add("页面二");
titlelist.add("页面三");
3、在适配器中重写getPageTitle()函数
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return titlelist.get(position);
}
注意点:要改适配器的构造函数
public ImageAdapter(List<View> viewlist,ArrayList<String> titlelist)
{
this.viewlist=viewlist;
this.titlelist=titlelist;
}
PagerTabStrip的用法和PagerTitleStrip相同
修改布局代码为:
<android.support.v4.view.PagerTabStrip
android:id="@+id/pagertab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"/>
原文:http://www.cnblogs.com/hsshy/p/4789872.html