Android ViewPager程序引导页的实现

Android ViewPager程序引导页的实现

1. 首先是程序启动的默认欢迎页面（每次启动都会进入该页面）

welcome.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="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/welcome_android"
        />

</LinearLayout>

WelcomeActivity.java

public class WelcomeActivity extends Activity {

    private static final int TIME = 2000;
    private static final int GO_HOME = 1000;
    private static final int GO_GUIDE = 1001;
    private boolean isFirstIn = false;

    private  Handler handler = 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 sp = getSharedPreferences("firstTime", MODE_PRIVATE);
        isFirstIn = sp.getBoolean("firstTime", true);
        if (!isFirstIn) {
            handler.sendEmptyMessageDelayed(GO_HOME, TIME);
        } else {
            handler.sendEmptyMessageDelayed(GO_GUIDE, TIME);
            Editor editor = sp.edit();
            editor.putBoolean("firstTime", false);
            editor.commit();
        }
    }

    private void goHome() {
        Intent intent = new Intent(WelcomeActivity.this, MainActivity.class);
        startActivity(intent);
        finish();
    }

    private void goGuide() {
        Intent intent = new Intent(WelcomeActivity.this,GuideActivity.class);
        startActivity(intent);
        finish();
    }

}

2. 接着是首次进入的引导页面：

activity_guide.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#00000000" >       
    </android.support.v4.view.ViewPager>

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

</RelativeLayout>

GuideActivity.java

public class GuideActivity extends Activity implements OnPageChangeListener{

    private ViewPager vp;
    private ViewPagerAdapter vpAdapter;
    private List<View> views;
    private ImageView[] dots;
    private int[] ids = {R.id.iv1, R.id.iv2, R.id.iv3};
    private Button btn_start;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);
        initViews();
        initDots();
    }

    public 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);

        btn_start = (Button) views.get(2).findViewById(R.id.btn_start);
        btn_start.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                Intent intent = new Intent(GuideActivity.this, MainActivity.class);
                startActivity(intent);
                finish();
            }
        });

        vp.setOnPageChangeListener(this);
    }

    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) {    
    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {    
    }

    @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);
            }
        }
    }

}

3. 接着是三个子引导页面的布局文件：

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="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/guide_1"
        />

</LinearLayout>

two.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="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/guide_2"
        />

</LinearLayout>

three.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/guide_3"
        />

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        >
        <Button 
            android:id="@+id/btn_start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="进入"
            />
    </LinearLayout>

</RelativeLayout>

最后的程序主界面就不贴了......

图的话从新浪微博的apk解压使用，教程学自极客学院......