Android之ViewPager（引导界面）（1）

虽然我们无法改变人生，但可以改变人生观。虽然我们无法改变环境，但我们可以改变心境。

本讲内容：ViewPager控件的用法

与LisstView类似，也需要一个适配器，他就是PagerAdapter。

使用步骤：

一、在住布局文件里加入

<android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="match_parent" /><!-- 注意这个组件是用来显示左右滑动的界面的,如果不加载xml布局文件,他是不会显示内容的。   -->

LayoutInflater lf = getLayoutInflater().from(this);          view1 = lf.inflate(R.layout.layout1, null);          view2 = lf.inflate(R.layout.layout2, null);          view3 = lf.inflate(R.layout.layout3, null);            viewList = new ArrayList<View>();// 将要分页显示的View装入数组中           viewList.add(view1);          viewList.add(view2);          viewList.add(view3);  

示例一：

下面是res/layout/activity_main.xml 布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="wrap_content"    android:layout_height="wrap_content" >    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="match_parent" /><!-- 注意这个组件是用来显示左右滑动的界面的,如果不加载xml布局文件,他是不会显示内容的。   -->    <LinearLayout        android:id="@+id/layout1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:layout_marginBottom="25dp"        android:orientation="horizontal" >        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:clickable="true"            android:padding="20dp"            android:src="@drawable/point" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:clickable="true"            android:padding="20dp"            android:src="@drawable/point" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:clickable="true"            android:padding="20dp"            android:src="@drawable/point" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:clickable="true"            android:padding="20dp"            android:src="@drawable/point" />    </LinearLayout></RelativeLayout>

下面是res/drawable/paint.xml 文件：

<?xml version="1.0" encoding="UTF-8"?><selector  xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_enabled="true" android:drawable="@drawable/point_normal" />    <item android:state_enabled="false" android:drawable="@drawable/point_select" /></selector>

当你实现一个PagerAdapter,你必须至少覆盖以下4个方法:

• instantiateItem(ViewGroup, int)、destroyItem(ViewGroup, int, Object)
• getCount()、isViewFromObject(View, Object)

//ViewPager适配器，用来绑定数据和viewpublic class ViewPagerAdapter extends PagerAdapter{	////界面列表	private ArrayList<View> views;		public ViewPagerAdapter(ArrayList<View> views){		this.views=views;	}	//获得当前页卡的数量  	public int getCount() {		if(views!=null){			return views.size();		}		return 0;	}		//实例化(初始化)页卡	public Object instantiateItem(View container, int position) {		 ((ViewPager) container).addView(views.get(position), 0);//添加页卡   		 return views.get(position);	}		//销毁页卡	public void destroyItem(View container, int position, Object object) {		((ViewPager)container).removeView(views.get(position));//删除页卡   	}	//判断是否由对象生成界面	public boolean isViewFromObject(View arg0, Object arg1) {		return (arg0==arg1);//官方提示这样写 	}}

public class MainActivity extends Activity implements OnClickListener,OnPageChangeListener{	private ViewPager viewPager;// 定义ViewPager对象	private ViewPagerAdapter vpAdapter;// 定义ViewPager适配器	private ArrayList<View> views;// 定义一个ArrayList来存放View	// 引导图片资源	private static final int[] pics = { R.drawable.guide1, R.drawable.guide2,			R.drawable.guide3, R.drawable.guide4 };	// 底部小点的图片	private ImageView[] points;	// 记录当前选中位置	private int currentIndex;	protected void onCreate(Bundle savedInstanceState) {		requestWindowFeature(Window.FEATURE_NO_TITLE);		super.onCreate(savedInstanceState);		setContentView(R.layout.activity_main);		initView();		initData();	}	// 初始化组件	private void initView() {		// 实例化ArrayList对象		views = new ArrayList<View>();		// 实例化ViewPager		viewPager = (ViewPager) findViewById(R.id.viewPager);		// 实例化ViewPager适配器		vpAdapter = new ViewPagerAdapter(views);	}	// 初始化数据	private void initData() {		// 定义一个布局并设置参数		LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(				LinearLayout.LayoutParams.MATCH_PARENT,				LinearLayout.LayoutParams.MATCH_PARENT);				//初始化引导图片列表		for(int i=0;i<pics.length;i++){			ImageView iv=new ImageView(this);			iv.setLayoutParams(mParams);			iv.setImageResource(pics[i]);			views.add(iv);		}				//设置数据		viewPager.setAdapter(vpAdapter);		//设置监听		viewPager.setOnPageChangeListener(this);				//初始化底部小点		initPoint();	}		//初始化底部小点	private void initPoint() {		LinearLayout layout1=(LinearLayout) findViewById(R.id.layout1);		points = new ImageView[pics.length];				//循环取得小点图片		for(int i=0;i<pics.length;i++){			//得到一个LinearLayout下面的每一个子元素			points[i]=(ImageView) layout1.getChildAt(i);//获得第i个控件！<span style="color: rgb(51, 51, 51); font-family: 'Microsoft Yahei'; font-size: 14px; line-height: 28px; white-space: pre-wrap;">getChildAt里面的参数就是布局里面层次的索引</span>			//默认都设为灰色			points[i].setEnabled(true);			//给每个小点设置监听			points[i].setOnClickListener(this);			//设置位置tag，方便取出与当前位置对应			points[i].setTag(i);		}				//设置当面默认的位置		currentIndex=0;		//设置为白色，即选中状态		points[currentIndex].setEnabled(false);	}	//当滑动状态改变时调用	public void onPageScrollStateChanged(int arg0) {			}	//当前页面被滑动时调用	public void onPageScrolled(int arg0, float arg1, int arg2) {			}	//当新的页面被选中时调用	public void onPageSelected(int position) {		//设置底部小点选中状态		setCurDot(position);	}	//通过点击事件来切换当前的页面	public void onClick(View v) {		int position=(Integer) v.getTag();		setCurView(position);		setCurDot(position);	}		//设置当前页面的位置	private void setCurView(int position) {		if(position<0||position>=pics.length){			return;		}		viewPager.setCurrentItem(position);	}		//设置当前的小点的位置	private void setCurDot(int position) {		if(position<0||position>pics.length-1||currentIndex==position){			return;		}		points[position].setEnabled(false);		points[currentIndex].setEnabled(true);				currentIndex=position;	}	}

1楼hustdhg昨天 22:12

写的蛮好的