Android ViewPager引導頁

本博客整理自極客學院Android ViewPager引導頁。

一、建立承載ViewPager的類Guide.java

public class Guide extends Activity implements OnPageChangeListener{

	private ViewPager vp;
	private ViewPagerAdapter vpAdapter;
	private List<View> views;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.guide);
		initViews();
	}

	private void initViews() {
		LayoutInflater inflater = LayoutInflater.from(this);
		
		views = new ArrayList<View>();
		views.add(inflater.inflate(R.layout.one, null));
		views.add(inflater.inflate(R.layout.two, null));
		views.add(inflater.inflate(R.layout.three, null));
		
		vpAdapter = new ViewPagerAdapter(views, this);
		vp = (ViewPager) findViewById(R.id.viewpager);
		vp.setAdapter(vpAdapter);
		
	}
	
}

所需Adapter類：

public class ViewPagerAdapter extends PagerAdapter {
	
	private List<View> views;
	private Context context;

	public ViewPagerAdapter(List<View> views, Context context) {
		this.views = views;
		this.context = context;
	}
	
	@Override
	public void destroyItem(View container, int position, Object object) {
		((ViewPager) container).removeView(views.get(position));
	}
	
	@Override
	public Object instantiateItem(View container, int position) {
		((ViewPager) container).addView(views.get(position));
		return views.get(position);
	}

	@Override
	public int getCount() {
		return views.size();
	}

	@Override
	public boolean isViewFromObject(View arg0, Object arg1) {
		return arg0 == arg1;
	}

}

佈局文件：

<android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#000000"
        >
    </android.support.v4.view.ViewPager>

佈局文件所需圖片文件（one.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:orientation="vertical" >
    <ImageView 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/guide_1"
        android:contentDescription="@string/v1"/>

</LinearLayout>

經過以上步驟程序已基本能夠運行。

二、添加導航點

修改佈局文件，添加導航點

    <LinearLayout 
        android:id="@+id/ll"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal"
        android:orientation="horizontal">
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/iv1"
            android:src="@drawable/login_point_selected"
            android:contentDescription="@string/v1"/>
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/iv2"
            android:src="@drawable/login_point"
            android:contentDescription="@string/v2"/>
        <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/iv3"
            android:src="@drawable/login_point"
            android:contentDescription="@string/v3"/>
    </LinearLayout>

在Guide類中添加對導航點的操做，並經過ViewPager中View改變導航點

	private ImageView[] dots;
	private int[] ids = {R.id.iv1, R.id.iv2, R.id.iv3};

	private void initDots() {
		dots = new ImageView[views.size()];
		for (int i = 0; i < views.size(); i++) {
			dots[i] = (ImageView) findViewById(ids[i]);
		}
	}

	@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 arg0) {
		for (int i = 0; i < ids.length; i++) {
			if(arg0 == i) {
				dots[i].setImageResource(R.drawable.login_point_selected);
			}else{
				dots[i].setImageResource(R.drawable.login_point);
			}
		}
	}

	vp.setOnPageChangeListener(this);//添加回調

三、添加進入主界面按鈕

在最後一個圖片視圖中添加按鈕

<pre name="code" class="html">    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true">
        <Button
            android:id="@+id/start_btn" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="進入"
            />
    </LinearLayout>

並添加監聽事件

private Button startBtn;

startBtn = (Button) views.get(2).findViewById(R.id.start_btn);
startBtn.setOnClickListener(new OnClickListener() {
	
	@Override
	public void onClick(View v) {
		Intent i = new Intent(Guide.this, MainActivity.class);
		startActivity(i);
		finish();
	}
});

四、添加歡迎界面，第一次進入引導頁，非第一次進入主界面

public class WelcomActivity extends Activity {
	
	private boolean isFirstIn = false;
	private static final int TIME = 2000;
	private static final int GO_HOME = 1000;
	private static final int GO_GUIDE = 1001;
	
	private Handler mHandler = new Handler(){
		public void handleMessage(android.os.Message msg) {
			switch (msg.what) {
			case GO_HOME:
				goHome();
				break;
			case GO_GUIDE:
				goGuide();
				break;
			}
		}
	};
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.welcome);
		init();
	}
	
	private void init() {
		SharedPreferences preferences = getSharedPreferences("jike", MODE_PRIVATE);
		isFirstIn = preferences.getBoolean("isFirstIn", true);
		if(!isFirstIn) {
			mHandler.sendEmptyMessageDelayed(GO_HOME, TIME);
		}else{
			mHandler.sendEmptyMessageDelayed(GO_GUIDE, TIME);
			Editor editor = preferences.edit();
			editor.putBoolean("isFirstIn", false);
			editor.commit();
		}
	}

	private void goHome() {
		Intent i = new Intent(WelcomActivity.this, MainActivity.class);
		startActivity(i);
		finish();
	};
	
	private void goGuide() {
		Intent i = new Intent(WelcomActivity.this, Guide.class);
		startActivity(i);
		finish();
	}
}

源碼下載