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>

功能代码实现：

//查找idbtnWelcome= (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();    }}

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

效果：