Android学习之界面篇（六）ViewPager学习与Android引导界面的实现

ViewPager：是android扩展包v4包中的类,这个类可以让用户左右切换当前的view。主要特性有：

1.     ViewPager类直接继承了ViewGroup类，所以他是一个容器类，可以在其中添加其他的类
2.     ViewPager类需要一个PagerAdapter适配器类给他提供数据。
3.     ViewPager经常和Fragment一起使用，并且提供了专门的FragementPagerAdapter和FragementSatatePagerAdapter类供fragment中的viewPager使用。

ViewPager有两个用途：

1.     可以作为引导页的技术进行使用
2.     作为应用程序滑动的框架进行使用

一．ViewPager实现引导页

首先新建一个类用来承载ViewPager：该类继承自activity。使其成为主界面，

public class Guide extends Activity implements ViewPager.OnPageChangeListener{
    private ViewPager viewPager;
    private ViewPagerAdapter myAdapter;
    private List<View> views;
    private ImageView[] dots;
    private int[] ids={R.id.iv1,R.id.iv2,R.id.iv3};
    private Button btnWelcome;


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

    /**  * 自定义初始化方法  * 加载所要切换的view  */  private void init() {
        //使用layoutInflater来进行视图加载
        LayoutInflater inflater = LayoutInflater.from(this);
        //对集合进行实例化操作
        views = new ArrayList<View>();
        //layoutInflater的使用，root传入null
        views.add(inflater.inflate(R.layout.one, null));
        views.add(inflater.inflate(R.layout.two, null));
        views.add(inflater.inflate(R.layout.three, null));
        //实例化适配器
        myAdapter = new ViewPagerAdapter(views, this);
        //加载viewPager对象
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        //ViewPager绑定适配器
        viewPager.setAdapter(myAdapter);

        //查找id
        btnWelcome= (Button) views.get(2).findViewById(R.id.btnWelcome);
        btnWelcome.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(Guide.this,MainActivity.class));
                finish();//结束掉不需要的界面
            }
        });
        //设置页面回调，设置事件监听器
        viewPager.addOnPageChangeListener(this);
    }

想要使用 ViewPager对象必须使用PagerAdapter类来给他提供数据。

新建一个ViewPagerAdapter继承自PagerAdapter：

其实现方式和ListView比较相像

public class ViewPagerAdapter extends PagerAdapter{
    private List<View> views;//使用List来承载所有的view
    private Context context;//上下文

    /**  * 构造函数和ListView的相像  * @param views  * @param context  */  ViewPagerAdapter(List<View> views,Context context){
        this.views=views;
        this.context=context;
    }


    /**  * view不需要是将其销毁  * 不要使用super构造方法  * @param container  * @param position  * @param object  */  @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        ((ViewPager)container).removeView(views.get(position));//通过position来进行索引获取所要移除的view
    }


    /**  * 加载view，类似与ListView的Adapter中的getView()  * @param container  * @param position  * @return 当前的View  */  @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ((ViewPager)container).addView(views.get(position));
        return views.get(position);
    }

    /**  * 需复写的方法  * 返回view的数量  * @return  */  @Override
    public int getCount() {
        return views.size();
    }


    /**  * 需复写的方法  * 判断当前的view是不是我们需要的对象  * @param view  * @param object  * @return  */  @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }
}

二．添加viewPager导航点

要求：给当前viewPager添加导航点，就是在下方有小点提示当前的位置和所有的页面数量。

1.     首先设置界面布局，在viewPager下面加上一个LinearLayout布局，在线性布局当中添加与view视图个数相同的图片，图片内容指定为黑白小点，表示选中与未选中。
2.     在代码中控制图片显示的内容变化，实现导航点的功能。使用集合ImageView[]来存放小点，使用int[]来存放小点的id值。
3.     在Guide.java中设置为小点操作的方法initDots()。
4.     点的实现应该是根据viewPager的改变而改变，所以主界面应该监听viewPager的改变事件，实现监听ViewPager.OnPageChangeListener

guide.xml文件配置：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/viewpager">

    </android.support.v4.view.ViewPager>

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

在Guider.java中添加如下代码：

/**  * 导航点功能实现  */  private void initDots(){
        dots=new ImageView[views.size()];
        for (int i=0;i<views.size();i++){
            dots[i]= (ImageView) findViewById(ids[i]);
        }

    }

    /**  *当页面滑动时调用  * @param position  * @param positionOffset  * @param positionOffsetPixels  */  @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }


    /**  *当新的页面被选择时调用  * 当前的页面被选中，将当前页面的图片换成亮的  * @param position  */  @Override
    public void onPageSelected(int position) {

        for (int i=0;i<ids.length;i++){
            if (i==position){
                dots[i].setImageResource(R.drawable.login_point_selected);
            }
            else
                dots[i].setImageResource(R.drawable.login_point);
        }
    }

    /**  * 滑动状态改变时进行调用  * @param state  */  @Override
    public void onPageScrollStateChanged(int state) {

    }
}

三．添加进入主界面按钮

当导航页滑动到最后一张时，需要出现进入主界面的按钮。

1.     首先在最后一个viewPager视图中添加界面配置，添加一个线性布局，在线性布局当中添加一个按钮。
2.     在Guide.java中完成按钮的点击事件，使其直接跳转主界面，即打开主Activity。并关闭掉不需要的界面，使用finish()。

ViewPager视图中总共有三个View视图，在最后一个视图的布局中加上一个按钮实现点击进入主界面的功能，这个视图是three.xml

three.xml配置如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    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:id="@+id/llb"
        android:layout_gravity="bottom"
        android:gravity="center_horizontal"
        android:orientation="horizontal">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btnWelcome"
            android:text="@string/login"/>
    </LinearLayout>
</FrameLayout>

功能代码实现：

//查找id
btnWelcome= (Button) views.get(2).findViewById(R.id.btnWelcome);
btnWelcome.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        startActivity(new Intent(Guide.this,MainActivity.class));
        finish();//结束掉不需要的界面
    }
});

四．添加数据储存

真正的app只有在第一次使用时才会出现引导界面，所以得在程序中控制是否出现引导界面。

1.     新建一个Activity，让其显示一张图片，即为欢迎界面。在欢迎界面中先让线程沉睡两秒，在决定是进入哪个界面。通过参数来决定进入哪个界面。

不能让主线程沉睡，所以使用Handler来进行沉睡，发送延迟消息来实现。

2.     在Handler中使用handleMessage方法来决定跳转到哪个界面。使用msg.what来进行数据的判断。采用switch来进行判断。
3.     在程序中使用一个flag来判断是否是第一次进入应用。并且要将这个值储存起来，保证程序每次开启前都要读取的到这个值。
4.     自定义一个方法来储存这个值，采用SharedPreferences来实现。
5.     这时程序的界面入口就成为了欢迎界面，需要在AndroidManifest文件中修改启动界面。

使用WelcomeAty继承自Activity来实现欢迎界面功能，具体配置如下：

public class WelcomeAty extends Activity{

    //是否是第一次进入程序
    private static boolean isFirstIn=false;
    private static final int TIME=2000;
    private static final int GO_HOME=1000;
    private static final int GO_GUIDE=1001;

    private Handler mHandler=new Handler(){

        /**  * 使用handleMessage方法来决定跳转到哪个界面  * @param msg  */  @Override
        public void handleMessage(Message msg) {
            switch (msg.what){
                case GO_GUIDE:
                    goGuide();
                    break;
                case GO_HOME:
                    goHome();
                    break;
            }
        }
    };


    /**  * 程序主界面入口  * @param savedInstanceState  */  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.welcome);
        init();
    }

    /**  * 进行是否是第一次进入应用的判断  */  private void init(){
        //新建SharedPreferences对象
        SharedPreferences sharedPreferences=getSharedPreferences("test",MODE_PRIVATE);
        //查询值，不存在赋值为true;
        isFirstIn=sharedPreferences.getBoolean("isFirstIn",true);
        //已经存在该对象，直接进入主界面
        if(!isFirstIn){
            mHandler.sendEmptyMessageDelayed(GO_HOME,TIME);//延时发送
        }else {
            //不存在，进入引导界面
            mHandler.sendEmptyMessageDelayed(GO_GUIDE, TIME);
            //存储内容
            SharedPreferences.Editor editor=sharedPreferences.edit();
            editor.putBoolean("isFirstIn",false);
            editor.commit();//提交
        }

    }
    /**  *进入主界面  */  private void goHome(){
        startActivity(new Intent(WelcomeAty.this,MainActivity.class));
        finish();
    }


    /**  *进入引导界面  */  private void goGuide(){
        startActivity(new Intent(WelcomeAty.this,Guide.class));
        finish();
    }
}

到此，成功的将一个完整的引导页功能实现了。

效果：