轉自： http://blog.163.com/li_xugang/blog/static/1307818302014428591330/
效果圖：
左右滑動展示圖片，頁面底部的小點表示當前圖片的位置，淺藍色的小點表示當前正在查看的圖片。
佈局文件：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<android.support.v4.view.ViewPager
android:id="@+id/viewpager1"
android:layout_width="fill_parent"
android:layout_height="match_parent"
></android.support.v4.view.ViewPager>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="@+id/tipsBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="36dp"
android:orientation="horizontal"
>
</LinearLayout>
</RelativeLayout>
</FrameLayout>
使用ViewPager需要引入android.support.v4包，用來向後兼容api 4（android 1.6）.
上面的佈局文件使用FrameLayout（幀）佈局方式，幀佈局UI元素會層層摺疊，上述佈局的效果是表示圖片索引的小圓點在圖片的上方顯示。
JAVA程序：
自定義類繼承Activity
public class MyViewPager1 extends Activity
下面定義一些私有屬性：
private ViewPager viewPager;
private ImageView[] tips;//提示性點點數組
private int[] images;//圖片ID數組
private int currentPage=0;//當前展示的頁碼
在onCreate方法中初始化這些屬性。
viewPager=(ViewPager)findViewById(R.id.viewpager1);
//圖片ID數組
images=new int[]{R.drawable.images1,R.drawable.images2,R.drawable.images3,R.drawable.images4,R.drawable.images5};
//存放點點的容器
LinearLayout tipsBox=(LinearLayout)findViewById(R.id.tipsBox);
//初始化 提示點點
tips=new ImageView[5];
for(int i=0;i<tips.length;i++){
ImageView img=new ImageView(this); //實例化一個點點
img.setLayoutParams(new LayoutParams(10,10));
tips[i]=img;
if(i==0)
{
img.setBackgroundResource(R.drawable.page_now);//藍色背景
}
else{
img.setBackgroundResource(R.drawable.page);//黑色背景
}
LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
params.leftMargin=5;
params.rightMargin=5;
tipsBox.addView(img, params); //把點點添加到容器中
}
屬性初始化完成之後，我們需要給ViewPager設置adapter對象。ViewPager如同ListView一般需要設置適配器，ViewPager的adapter是PagerAdapter。
PagerAdapter adapter=new PagerAdapter(){
@Override
public int getCount() {
// TODO Auto-generated method stub
return images.length;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0==arg1;
}
@Override
public void destroyItem(ViewGroup container,int position,Object o){
//container.removeViewAt(position);
}
//設置ViewPager指定位置要顯示的view
@Override
public Object instantiateItem(ViewGroup container,int position){
ImageView im=new ImageView(MyViewPager1.this);
im.setImageResource(images[position]);
container.addView(im);
return im;
}
};
viewPager.setAdapter(adapter);
完成了這些操作我們已經可以實現圖片的左右滾動，但是底部的小圓點的背景色並沒有隨着查看的圖片不同而有所改變，這時需要給ViewPager綁定一個事件處理函數，currentPage保存的是當前查看的圖片的索引，當向左或向右滾動時currentPage需要重新賦值，設置舊值表示的小圓點的背景爲黑色，設置新值表示的小圓點的背景爲藍色。
//更改當前tip
viewPager.setOnPageChangeListener(new OnPageChangeListener(){
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// TODO Auto-generated method stub
}
@Override
public void onPageSelected(int position) {
// TODO Auto-generated method stub
Log.e("rf",String.valueOf(position));
tips[currentPage].setBackgroundResource(R.drawable.page);
currentPage=position;
tips[position].setBackgroundResource(R.drawable.page_now);
}
});
--------------------------------------------------------------------------------------------------------------------------------------------
下面是完整程序：
package li.example.myfriend;
import android.util.Log;
import android.view.*;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.app.*;
import android.content.*;
import android.os.*;
import android.support.v4.*;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
public class MyViewPager1 extends Activity{
private ViewPager viewPager;
private ImageView[] tips;//提示性點點數組
private int[] images;//圖片ID數組
private int currentPage=0;//當前展示的頁碼
@Override
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_myviewpager_1);
viewPager=(ViewPager)findViewById(R.id.viewpager1);
//存放點點的容器
LinearLayout tipsBox=(LinearLayout)findViewById(R.id.tipsBox);
//初始化圖片資源
images=new int[]{R.drawable.images1,R.drawable.images2,R.drawable.images3,R.drawable.images4,R.drawable.images5};
//初始化 提示點點
tips=new ImageView[5];
for(int i=0;i<tips.length;i++){
ImageView img=new ImageView(this);
img.setLayoutParams(new LayoutParams(10,10));
tips[i]=img;
if(i==0)
{
img.setBackgroundResource(R.drawable.page_now);
}
else{
img.setBackgroundResource(R.drawable.page);
}
LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
params.leftMargin=5;
params.rightMargin=5;
tipsBox.addView(img, params);
}
//-----初始化PagerAdapter------
PagerAdapter adapter=new PagerAdapter(){
@Override
public int getCount() {
// TODO Auto-generated method stub
return images.length;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0==arg1;
}
@Override
public void destroyItem(ViewGroup container,int position,Object o){
//container.removeViewAt(position);
}
@Override
public Object instantiateItem(ViewGroup container,int position){
ImageView im=new ImageView(MyViewPager1.this);
im.setImageResource(images[position]);
container.addView(im);
return im;
}
};
viewPager.setAdapter(adapter);
//更改當前tip
viewPager.setOnPageChangeListener(new OnPageChangeListener(){
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// TODO Auto-generated method stub
}
@Override
public void onPageSelected(int position) {
// TODO Auto-generated method stub
Log.e("rf",String.valueOf(position));
tips[currentPage].setBackgroundResource(R.drawable.page);
currentPage=position;
tips[position].setBackgroundResource(R.drawable.page_now);
}
});
}
}