Android開發之使用ViewPager做引導頁面

標籤：android   viewpager   引導頁面   

引導頁面相信大家都不會陌生，安裝了一個新的App後第一次開啟，都會有類似，相當於說明文檔

實現效果

程式目錄結構

在主layout裡main.xml定義一個幀布局，在viewPager上有多少頁就顯示多少個點

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="center" >    </android.support.v4.view.ViewPager>    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="bottom|center_horizontal"        android:orientation="horizontal" >        <ImageView            android:id="@+id/icon_1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginRight="30dp"            android:contentDescription="@string/content_description"            android:src="@drawable/page_icon" />        <ImageView            android:id="@+id/icon_2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginRight="30dp"            android:contentDescription="@string/content_description"            android:src="@drawable/page_icon" />        <ImageView            android:id="@+id/icon_3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:contentDescription="@string/content_description"            android:src="@drawable/page_icon" />    </LinearLayout></FrameLayout>

每一個View的布局pager1.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@drawable/image1"    android:orientation="vertical" >    <Button        android:id="@+id/btn_in_first"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:text="第一頁" /></LinearLayout>

其它兩個view類似

在主Activity中

package com.example.viewpagerdemo;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.LayoutInflater;import android.view.View;import android.widget.ImageView;public class MainActivity extends Activity {private ViewPager viewPager = null;private ImageView img1, img2, img3;private ArrayList<String> titles;private int curIndex = -1;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);initWidgets();// 把要顯示的View裝入數組LayoutInflater li = LayoutInflater.from(this);View view1 = li.inflate(R.layout.pager1, null);View view2 = li.inflate(R.layout.pager2, null);View view3 = li.inflate(R.layout.pager3, null);// 添加頁面final ArrayList<View> views = new ArrayList<View>();views.add(view1);views.add(view2);views.add(view3);// 添加標題titles = new ArrayList<String>();titles.add("tab1");titles.add("tab2");titles.add("tab3");picViewPagerAdapter pagerAdapter = new picViewPagerAdapter(views);viewPager.setAdapter(pagerAdapter);curIndex = 1;viewPager.setCurrentItem(curIndex);img2.setImageResource(R.drawable.page_icon_sel);viewPager.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int arg0) {// TODO Auto-generated method stubswitch (arg0) {case 0:img1.setImageResource(R.drawable.page_icon_sel);img2.setImageResource(R.drawable.page_icon);img3.setImageResource(R.drawable.page_icon);break;case 1:img2.setImageResource(R.drawable.page_icon_sel);img1.setImageResource(R.drawable.page_icon);img3.setImageResource(R.drawable.page_icon);break;case 2:img3.setImageResource(R.drawable.page_icon_sel);img2.setImageResource(R.drawable.page_icon);img1.setImageResource(R.drawable.page_icon);break;default:break;}curIndex = arg0;System.out.println("[MainActivity->]currIndex = " + curIndex);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}});}private void initWidgets() {viewPager = (ViewPager) findViewById(R.id.viewpager);img1 = (ImageView) findViewById(R.id.icon_1);img2 = (ImageView) findViewById(R.id.icon_2);img3 = (ImageView) findViewById(R.id.icon_3);}/** * 為ViewPager添加適配器 *  * @author Administrator *  */class picViewPagerAdapter extends PagerAdapter {private List<View> listViews;public picViewPagerAdapter(List<View> list) {listViews = list;}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn listViews.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn arg0 == arg1;}@Overridepublic void destroyItem(View container, int position, Object object) {((ViewPager) container).removeView(listViews.get(position));}@Overridepublic CharSequence getPageTitle(int position) {return titles.get(position);}@Overridepublic Object instantiateItem(View container, int position) {((ViewPager) container).addView(listViews.get(position));return listViews.get(position);}}}

每個小圓點的改變是通過viewpager監聽器去改變的

viewPager.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int arg0) {// TODO Auto-generated method stubswitch (arg0) {case 0:img1.setImageResource(R.drawable.page_icon_sel);img2.setImageResource(R.drawable.page_icon);img3.setImageResource(R.drawable.page_icon);break;case 1:img2.setImageResource(R.drawable.page_icon_sel);img1.setImageResource(R.drawable.page_icon);img3.setImageResource(R.drawable.page_icon);break;case 2:img3.setImageResource(R.drawable.page_icon_sel);img2.setImageResource(R.drawable.page_icon);img1.setImageResource(R.drawable.page_icon);break;default:break;}curIndex = arg0;System.out.println("[MainActivity->]currIndex = " + curIndex);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}});

完整Demo下載：http://download.csdn.net/detail/deng0zhaotai/7272609

Android開發之使用ViewPager做引導頁面