1 package com.example.viewpage2; 2 3 import java.util.ArrayList; 4 import java.util.List; 5 6 import android.os.Bundle; 7 import android.app.Activity; 8 import android.support.v4.view.ViewPager; 9 import android.support.v4.view.ViewPager.OnPageChangeListener; 10 import android.view.Menu; 11 import android.view.View; 12 import android.view.View.OnClickListener; 13 import android.view.ViewGroup.LayoutParams; 14 import android.widget.ImageView; 15 import android.widget.LinearLayout; 16 17 public class MainActivity extends Activity implements OnPageChangeListener,OnClickListener{ 18 19 private ViewPager vp; 20 private List<View> views; 21 private int[] imgs = { R.drawable.img1, R.drawable.img2, R.drawable.img3, 22 R.drawable.img4 }; 23 private ViewPageAdapter vpa; 24 private LinearLayout ll; 25 private ImageView[] points; 26 private int index; 27 28 @Override 29 protected void onCreate(Bundle savedInstanceState) { 30 super.onCreate(savedInstanceState); 31 setContentView(R.layout.activity_main); 32 initView(); 33 initData(); 34 initPoint(); 35 36 } 37 38 private void initView() { 39 ll = (LinearLayout) findViewById(R.id.ll); 40 vp = (ViewPager) findViewById(R.id.vp); 41 views = new ArrayList<View>(); 42 } 43 44 private void initData() { 45 LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, 46 LayoutParams.MATCH_PARENT); 47 for (int i : imgs) { 48 ImageView img = new ImageView(this); 49 img.setImageResource(i); 50 img.setLayoutParams(lp); 51 views.add(img); 52 53 } 54 vpa = new ViewPageAdapter(views); 55 vp.setAdapter(vpa); 56 vp.setOnPageChangeListener(this); 57 } 58 private void initPoint(){ 59 points = new ImageView[imgs.length]; 60 //首先先定义一个imageview数组来接收他们，因为他们在linearlayout里 61 //所以通过循环把他们都放在数组里，并且让他们都设置成未选中状态， 62 for (int i = 0; i < ll.getChildCount(); i++) { 63 points[i] = (ImageView) ll.getChildAt(i); 64 points[i].setImageResource(R.drawable.point_two); 65 points[i].setOnClickListener(this); 66 points[i].setTag(i); 67 } 68 //因为第一页是选中状态所以我们要定义一个数组下表来表示选中的状态 69 index = 0; 70 points[index].setImageResource(R.drawable.point_one); 71 } 72 73 @Override 74 public void onPageScrollStateChanged(int arg0) { 75 // TODO Auto-generated method stub 76 77 } 78 79 @Override 80 public void onPageScrolled(int arg0, float arg1, int arg2) { 81 // TODO Auto-generated method stub 82 83 } 84 85 @Override//新页面选中时候调用 86 public void onPageSelected(int position) { 87 for (int i = 0; i < ll.getChildCount(); i++) { 88 points[i] = (ImageView) ll.getChildAt(i); 89 points[i].setImageResource(R.drawable.point_two); 90 } 91 points[position].setImageResource(R.drawable.point_one); 92 93 } 94 95 @Override 96 public void onClick(View v) { 97 int i = (Integer)v.getTag(); 98 vp.setCurrentItem(i); 99 100 } 101 102 }
1 <FrameLayout 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 6 <android.support.v4.view.ViewPager 7 android:id="@+id/vp" 8 android:layout_width="match_parent" 9 android:layout_height="match_parent" > 10 </android.support.v4.view.ViewPager> 11 12 <LinearLayout 13 android:id="@+id/ll" 14 android:layout_width="wrap_content" 15 android:layout_height="wrap_content" 16 android:orientation="horizontal" 17 android:layout_gravity="bottom|center_horizontal" > 18 19 <ImageView 20 android:layout_width="wrap_content" 21 android:layout_height="wrap_content" 22 android:src="@drawable/point_one" 23 android:padding="15dp" 24 /> 25 26 <ImageView 27 android:layout_width="wrap_content" 28 android:layout_height="wrap_content" 29 android:src="@drawable/point_two" 30 android:padding="15dp" /> 31 32 <ImageView 33 android:layout_width="wrap_content" 34 android:layout_height="wrap_content" 35 android:src="@drawable/point_two" 36 android:padding="15dp" /> 37 38 <ImageView 39 android:layout_width="wrap_content" 40 android:layout_height="wrap_content" 41 android:src="@drawable/point_two" 42 android:padding="15dp" /> 43 </LinearLayout> 44 <Button 45 android:layout_width="wrap_content" 46 android:layout_height="wrap_content" 47 android:text="跳过引导页" 48 android:layout_marginLeft="200dp" 49 50 /> 51 52 </FrameLayout>
package com.example.viewpage2; import java.util.List; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; public class ViewPageAdapter extends PagerAdapter { List<View> views; public ViewPageAdapter(List<View> views){ this.views = views; } @Override //返回页数 public int getCount() { // TODO Auto-generated method stub return views.size(); } @Override //初始化position数值下的图片 public Object instantiateItem(View container, int position) { ((ViewPager)container).addView(views.get(position)); return views.get(position); } @Override //判断是否由界面生成对象 public boolean isViewFromObject(View arg0, Object arg1) { // TODO Auto-generated method stub return arg0==arg1; } @Override //销毁上一个图片 public void destroyItem(ViewGroup container, int position, Object object) { ((ViewPager)container).removeView(views.get(position)); } }
首先的思想就是布局，其实这个布局还挺简单的用到的是框架布局，然后下面有一个线性布局横向排列，有四张图片一个点点。
布局有了之后我们要着手写代码。 要声明viewpager，还要声明一个保存view的list，还要声明一个存图片id的数组， 然后我们要有两个方法，一个是用来初始化view的，另一个是初始化数据的，最后咋oncrete方法里调用就可以 private ViewPager vp; private List<View> views; private int[] imgs = { R.drawable.img1, R.drawable.img2, R.drawable.img3, R.drawable.img4 }; private ViewPageAdapter vpa; private void initView() { vp = (ViewPager) findViewById(R.id.vp); views = new ArrayList<View>(); }
private void initData() { LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); 为了设置图片的宽高 for (int i : imgs) { 对存图片id的数组进行循环，每循环一次都要新建一个 ImageView img = new ImageView(this); ImageView ，然后把这个ImageView设置大小，放在 img.setImageResource(i); 里面就可以； img.setLayoutParams(lp); views.add(img);
} vpa = new ViewPageAdapter(views); initPoint(); 绑定adapter vp.setAdapter(vpa); vp.setOnPageChangeListener(this); 设置事件，为了让圆点与之匹配 } 接下来数据和视图绑定我们都要用到adapter，因为没有可用adapter，所以我们要自己写 我们要继承pageradapter，这个是针对有一张张视图的空间的。 然后我们要实现里面的四个方法，
public class ViewPageAdapter extends PagerAdapter { private List<View> views; public ViewPageAdapter(List<View> views){ 构造方法用来传递那个已经有图片的list this.views = views; } @Override //返回页数 public int getCount() { // TODO Auto-generated method stub return views.size(); } @Override //初始化position数值下的图片 public Object instantiateItem(View container, int position) { 数值的下标是用0开始 ((ViewPager)container).addView(views.get(position)); 第一次打开的时候它会创建两个界面为0,1 return views.get(position); 1当往右划时候又会创建2，这时候内存中有三 } 个界面， 2当再划的时候会销毁第0个界面，并 @Override 且创建第三个界面， //判断是否由界面生成对象 当 public boolean isViewFromObject(View arg0, Object arg1) { 3当在划的时候会销毁第1个界面，因为后面 // TODO Auto-generated method stub 没有不再创建，总结就是开头和结尾的页面 return arg0==arg1; 内存有两个图片，中间的过程内存有三张 } @Override //销毁上一个图片 public void destroyItem(ViewGroup container, int position, Object object) { ((ViewPager)container).removeView(views.get(position)); }
} 最后将adapter和viewpager绑定就可以了
在此基础之上我们要加上圆点的功能，首先我们也写一个类来初始化这些圆点（就是获得他们） 第一步我们来定义一个imgview数组；然后在这个方法里实例化，数组的长度就为我们图片的长度。 第二步这些圆点存在一个线性布局里，所以我们要声明这个线性布局，然后通过循环将这些圆点放进这个数组里，并且把他们 设置成没有选中的状态。 第三步我们还需要一个下标来跟进这个圆点选中的状态，所以声明这个圆点的下标，并且设置选中状态； private LinearLayout ll; private ImageView[] points; private int index;
private void initPoint(){ points = new ImageView[imgs.length]; //首先先定义一个imageview数组来接收他们，因为他们在linearlayout里 //所以通过循环把他们都放在数组里，并且让他们都设置成未选中状态， for (int i = 0; i < ll.getChildCount(); i++) { points[i] = (ImageView) ll.getChildAt(i); points[i].setImageResource(R.drawable.point_two); points[i].setOnClickListener(this); 设置点击事件，点击圆点能够跳转到对应的界面 points[i].setTag(i); } //因为第一页是选中状态所以我们要定义一个数组下表来表示选中的状态 index = 0; points[index].setImageResource(R.drawable.point_one); }
已经把这些数据放进数组里了，下一步我们要实现滑动来跟圆点匹配，我们要想实现这个功能一定要配合监听器，这里我们要实现
OnPageChangeListener这个监听器，然后一共有三个方法，我们主要用最后一个， @Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub }
@Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub }
@Override//新页面选中时候调用 public void onPageSelected(int position) { for (int i = 0; i < ll.getChildCount(); i++) {//首先一定我们要把这些圆点都设置成空 points[i] = (ImageView) ll.getChildAt(i); points[i].setImageResource(R.drawable.point_two); } points[position].setImageResource(R.drawable.point_one);然后在让他根据选择的页数来设置选中的圆点。 } 最后我们还要实现一个功能就是点击的时候可以快速的跳转页面， 让每个圆点都有点击事件，并且把它的下标一起传递， points[i].setOnClickListener(this); points[i].setTag(i);
@Override public void onClick(View v) { int i = (Integer)v.getTag();获得下标 vp.setCurrentItem(i); 设置页面 }