首页 > 移动平台 > 详细

Android开发之ViewPager

时间:2015-09-07 21:13:56      阅读:352      评论:0      收藏:0      [点我收藏+]

什么是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"/>

 

Android开发之ViewPager

原文:http://www.cnblogs.com/hsshy/p/4789872.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!