android焦点图（ViewPager实现）

MainActivity.java

Activiity_main.xml

package com.example.viewgroup;

import java.util.ArrayList;
import android.os.Bundle;
import android.os.Parcelable;
import android.app.Activity;
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.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;

public class MainActivity extends Activity {
	private ViewPager viewPager; 
	// 包裹小圆点的LinearLayout
	private ViewGroup pageNumGroup;
	
	private ArrayList<View> pageViews; 
	private ImageView[] imageViews;
	 private ImageView imageView; 
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		
		
		viewPager = (ViewPager) this.findViewById(R.id.guidePages);
		pageNumGroup = (ViewGroup) this.findViewById(R.id.pageNumGroup);
		
		LayoutInflater inflater = getLayoutInflater();  
        		pageViews = new ArrayList<View>();  
        		pageViews.add(inflater.inflate(R.layout.item01, null));  
        		pageViews.add(inflater.inflate(R.layout.item02, null));  
        		pageViews.add(inflater.inflate(R.layout.item03, null)); 
        
        		imageViews = new ImageView[pageViews.size()];  
        		for (int i = 0; i < pageViews.size(); i++) {  
            		imageView = new ImageView(MainActivity.this);  
            		imageView.setLayoutParams(new LayoutParams(20,20));  
            		imageView.setPadding(20, 0, 20, 0);  
            		imageViews[i] = imageView;  
            
            		if (i == 0) {  
                			//默认选中第一张图片
                			imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);  
            		} else {  
                			imageViews[i].setBackgroundResource(R.drawable.page_indicator);  
            		}  
            
            		pageNumGroup.addView(imageViews[i]);  
        		}  
	      
        		viewPager.setAdapter(new GuidePageAdapter());  
        		viewPager.setOnPageChangeListener(new GuidePageChangeListener()); 
		}

		@Override
		public boolean onCreateOptionsMenu(Menu menu) {
			getMenuInflater().inflate(R.menu.main, menu);
			return true;
		}
    // 指引页面数据适配器
    class GuidePageAdapter extends PagerAdapter {  
  	  
        @Override  
        public int getCount() {  
            return pageViews.size();  
        }  
  
        @Override  
        public boolean isViewFromObject(View arg0, Object arg1) {  
            return arg0 == arg1;  
        }  
  
        @Override  
        public int getItemPosition(Object object) {  
            // TODO Auto-generated method stub  
            return super.getItemPosition(object);  
        }  
  
        @Override  
        public void destroyItem(View arg0, int arg1, Object arg2) {  
            // TODO Auto-generated method stub  
            ((ViewPager) arg0).removeView(pageViews.get(arg1));  
        }  
  
        @Override  
        public Object instantiateItem(View arg0, int arg1) {  
            // TODO Auto-generated method stub  
            ((ViewPager) arg0).addView(pageViews.get(arg1));  
            return pageViews.get(arg1);  
        }  
  
        @Override  
        public void restoreState(Parcelable arg0, ClassLoader arg1) {  
            // TODO Auto-generated method stub  
  
        }  
  
        @Override  
        public Parcelable saveState() {  
            // TODO Auto-generated method stub  
            return null;  
        }  
  
        @Override  
        public void startUpdate(View arg0) {  
            // TODO Auto-generated method stub  
  
        }  
  
        @Override  
        public void finishUpdate(View arg0) {  
            // TODO Auto-generated method stub  
  
        }  
    }
	// 指引页面更改事件监听器
    class GuidePageChangeListener implements OnPageChangeListener {  
    	  
        @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 < imageViews.length; i++) {  
                imageViews[arg0].setBackgroundResource(R.drawable.page_indicator_focused);
                
                if (arg0 != i) {  
                    imageViews[i].setBackgroundResource(R.drawable.page_indicator);  
                }  
            }
        }  
    }  
}

 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
 	android:orientation="vertical"
    tools:context=".MainActivity" >

   <android.support.v4.view.ViewPager
	        android:id="@+id/guidePages"
	        android:layout_width="fill_parent"
	        android:layout_height="200dp"/> 

    <LinearLayout  
        android:id="@+id/pageNumGroup"  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content" 
        android:layout_below="@id/guidePages" 
        android:layout_marginBottom="40dp"  
        android:gravity="center_horizontal"  
        android:orientation="horizontal" />  
</RelativeLayout>

item01.xml(每个item都是包含一张图片)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:contentDescription="@string/app_name"
            android:background="@drawable/feature_guide_0" >
        </ImageView>
</LinearLayout>