本系列文章都會以一個程式的執行個體開發為主線來進行講解，以求達到一個循序漸進的學習效果，這樣更能加深大家對于程式為什麼要這樣寫的用意，理論加上實際的應用才能達到事半功倍的效果，不是嗎？
最下方有源碼的下載下傳位址，幾乎源碼的每一行都有注釋，寫的通俗易懂，非常清晰，如有不懂的可以留言，本部落客一定盡心盡力，為大家答題解惑，希望大家多多支援，好的，話不多說，讓我們回歸到今天的正題。
一、實作的效果圖
也許是養成了這樣一個習慣，每次看别人的代碼前，必須要先看實作的效果圖達到了一個什麼樣的效果，是不是跟自己想要實作的效果類似，有圖才有真相嘛，呵呵。
二、編碼前的準備工作
ViewPager是Android3.0之後提供的新特性，是以要想讓你的應用向下相容就必須要Android-support-v4.jar這個包的支援，這是一個來自google提供的一個附加包。大家搜下即可。
三、項目結構圖
四、具體的編碼實作
1、 布局界面比較簡單，加入ViewPager元件，以及底部的引導小點，activity_main.xml:
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
android:id="@+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
android:id="@+id/ll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="24.0dip"
android:orientation="horizontal">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15.0dip"
android:src="@drawable/point"/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15.0dip"
android:src="@drawable/point"/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15.0dip"
android:src="@drawable/point"/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:clickable="true"
android:padding="15.0dip"
android:src="@drawable/point"/>
2、其中小點的圖檔用一個selector來控制顔色，point.xml：
xmlns:android="http://schemas.android.com/apk/res/android">
3、 ViewPager擴充卡代碼，ViewPagerAdapter.java：
package com.yangyu;
import java.util.ArrayList;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
public class ViewPagerAdapter extends PagerAdapter {
//界面清單
private ArrayList views;
public ViewPagerAdapter (ArrayList views){
this.views = views;
}
@Override
public int getCount() {
if (views != null) {
return views.size();
}
return 0;
}
@Override
public Object instantiateItem(View view, int position) {
((ViewPager) view).addView(views.get(position), 0);
return views.get(position);
}
@Override
public boolean isViewFromObject(View view, Object arg1) {
return (view == arg1);
}
@Override
public void destroyItem(View view, int position, Object arg2) {
((ViewPager) view).removeView(views.get(position));
}
}
4、主程式入口類，MainActivity.java：
package com.yangyu;
import java.util.ArrayList;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import com.example.myguideview01.R;
public class MainActivity extends Activity implements OnClickListener,OnPageChangeListener {
//定義ViewPager對象
private ViewPager viewPager;
//定義ViewPager擴充卡
private ViewPagerAdapter vpAdapter;
//定義一個ArrayList來存放View
private ArrayList views;
//引導圖檔資源
private static final int[] pics = {R.drawable.guide1,R.drawable.guide2,R.drawable.guide3,R.drawable.guide4};
//底部小點的圖檔
private ImageView[] points;
//記錄目前選中位置
private int currentIndex;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
}
private void initView(){
//執行個體化ArrayList對象
views = new ArrayList();
//執行個體化ViewPager
viewPager = (ViewPager) findViewById(R.id.viewpager);
//執行個體化ViewPager擴充卡
vpAdapter = new ViewPagerAdapter(views);
}
private void initData(){
//定義一個布局并設定參數
LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT,
LinearLayout.LayoutParams.FILL_PARENT);
//初始化引導圖檔清單
for(int i=0; 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 linearLayout = (LinearLayout) findViewById(R.id.ll);
points = new ImageView[pics.length];
//循環取得小點圖檔
for (int i = 0; i < pics.length; i++) {
//得到一個LinearLayout下面的每一個子元素
points[i] = (ImageView) linearLayout.getChildAt(i);
//預設都設為灰色
points[i].setEnabled(true);
//給每個小點設定監聽
points[i].setOnClickListener(this);
//設定位置tag，友善取出與目前位置對應
points[i].setTag(i);
}
//設定當面預設的位置
currentIndex = 0;
//設定為白色，即選中狀态
points[currentIndex].setEnabled(false);
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int position) {
//設定底部小點選中狀态
setCurDot(position);
}
@Override
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 positon){
if (positon < 0 || positon > pics.length - 1 || currentIndex == positon) {
return;
}
points[positon].setEnabled(false);
points[currentIndex].setEnabled(true);
currentIndex = positon;
}
}
這篇主要是讓大家能夠實作一個簡單的例子，讓你的程式先動起來，才有信心和勇氣挑戰更複雜的UI設計和開發，在後面的幾篇章節中，部落客也會以同樣生動和富有激情的講解，給大家帶來更加的複雜的示範和代碼，如仿微信、和人人網的引導界面的開發，加入了動畫的效果，運作起來也會更炫一點。
以上就是本文的全部内容，希望對大家的學習有所幫助，也希望大家多多支援腳本之家。