【Android UI设计与开发】2.引导界面（二）使用ViewPager实现欢迎引导页面

1.实现的效果

 

2.编码前的准备工作

 ViewPager是Android3.0之后提供的新特性，所以要想让你的应用向下兼容就必须要android-support-v4.jar这个包的支持，这是一个来自google提供的一个附加包。没有的百度下就有了。

 

3.具体的编码实现

(1)布局界面比较简单，加入ViewPager组件，以及底部的引导小点

<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.support.v4.view.ViewPager

        android:id="@+id/viewpager"

        android:layout_width="match_parent"

        android:layout_height="match_parent" />



    <LinearLayout

        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" >



        <ImageView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="center_vertical"

            android:clickable="true"

            android:contentDescription="@string/strPoint"

            android:padding="15.0dip"

            android:src="@drawable/point" />



        <ImageView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="center_vertical"

            android:clickable="true"

            android:contentDescription="@string/strPoint"

            android:padding="15.0dip"

            android:src="@drawable/point" />



        <ImageView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="center_vertical"

            android:clickable="true"

            android:contentDescription="@string/strPoint"

            android:padding="15.0dip"

            android:src="@drawable/point" />



        <ImageView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="center_vertical"

            android:clickable="true"

            android:contentDescription="@string/strPoint"

            android:padding="15.0dip"

            android:src="@drawable/point" />

    </LinearLayout>



</RelativeLayout>

activity_main.xml

(2)其中小点的图片用一个selector来控制颜色

<?xml version="1.0" encoding="UTF-8"?>

<selector

  xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="true" android:drawable="@drawable/point_normal" />

    <item android:state_enabled="false" android:drawable="@drawable/point_select" />

</selector>

point.xml

(3)重写ViewPager适配器

package com.yanis.yc_ui_viewpager_guideview;



import java.util.ArrayList;



import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.view.View;

/**

 * 

 * @author YeChao

 * @功能描述：ViewPager适配器，用来绑定数据和view 

 */

public class ViewPagerAdapter extends PagerAdapter{

    //界面列表  

    private ArrayList<View> views;  

    public ViewPagerAdapter(ArrayList<View> views)

    {

         this.views = views; 

    }

    

    /**

     * 获得当前界面数

     */

    @Override

    public int getCount() { 

         if (views != null) {  

             return views.size();  

         }        

         else return 0;  

    }



    /**

     * 判断是否由对象生成界面 

     */

    @Override

    public boolean isViewFromObject(View arg0, Object arg1) {

        return (arg0 == arg1);  

    }



    /**

     * 销毁position位置的界面 

     */

    @Override

    public void destroyItem(View container, int position, Object object) {

        ((ViewPager) container).removeView(views.get(position));     

    }



    /**

     * 初始化position位置的界面 

     */

    @Override

    public Object instantiateItem(View container, int position) {

        ((ViewPager) container).addView(views.get(position), 0);  

        return views.get(position);  

    }

    

}

ViewPagerAdapter.class

(4)编辑主程序入口类

package com.yanis.yc_ui_viewpager_guideview;



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.ImageView.ScaleType;

import android.widget.LinearLayout;



/**

 * 

 * @author YeChao

 * @功能描述：主程序入口类

 */

public class MainActivity extends Activity implements OnClickListener,

        OnPageChangeListener {

    // 定义ViewPager对象

    private ViewPager viewPager;

    // 定义ViewPager适配器

    private ViewPagerAdapter vpAdapter;

    // 定义一个ArrayList来存放View

    private ArrayList<View> 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<View>();

        // 实例化ViewPager

        viewPager = (ViewPager) findViewById(R.id.viewpager);

        // 实例化ViewPager适配器

        vpAdapter = new ViewPagerAdapter(views);

    }



    /**

     * 初始化数据

     */

    private void initData() {

        // 定义一个布局并设置参数

        LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(

                LinearLayout.LayoutParams.MATCH_PARENT,

                LinearLayout.LayoutParams.MATCH_PARENT);



        // 初始化引导图片列表

        for (int i = 0; i < pics.length; i++) {

            ImageView iv = new ImageView(this);

            iv.setLayoutParams(mParams);

            //防止图片不能填满屏幕

            iv.setScaleType(ScaleType.FIT_XY);

            //加载图片资源

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

        // 设置底部小点选中状态

        setCurDot(arg0);

    }



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

    }

}

MainActivity.class

 

源代码地址：https://github.com/YeXiaoChao/Yc_ui_viewpager_guideview

来源：http://blog.csdn.net/yangyu20121224/article/details/8983770