Android利用Viewpager实现开场的loading页

这个东西，口述一下吧，项目刚开始用到viewpager来滑动的loading，但是后来改成了MP4的视频loading。所以这个就给删除了一些东西。

口述实现后的效果，相信大家应该可以理解。

就是四张图，开场，有四个圆点，分别对应你现在的图，然后可以滑动，滑到头不能继续滑，不是循环滚动的一个。很多app都有用到这个。相信大家应该了解。

直接上代码吧：

public class TestActivity extends Activity {

    /**
     * Viewpager对象
     */
    private ViewPager viewPager;
    private ImageView imageView;
    /**
     * 创建一个数组，用来存放每个页面要显示的View
     */
    private ArrayList<View> pageViews;
    /**
     * 创建一个imageview类型的数组，用来表示导航小圆点
     */
    private ImageView[] imageViews;
    /**
     * 装显示图片的viewgroup
     */
    private ViewGroup viewPictures;

    /**
     * 导航小圆点的viewgroup
     */
    private ViewGroup viewPoints;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        // 取消标题
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        // 取消状态栏
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_test);
        LayoutInflater inflater = getLayoutInflater();
        pageViews = new ArrayList<View>();
        pageViews.add(inflater.inflate(R.layout.viewpager01, null));
        pageViews.add(inflater.inflate(R.layout.viewpager02, null));
        pageViews.add(inflater.inflate(R.layout.viewpager03, null));
        pageViews.add(inflater.inflate(R.layout.viewpager04, null));
        // 小圆点数组，大小是图片的个数
        imageViews = new ImageView[pageViews.size()];
        // 从指定的XML文件中加载视图
        viewPictures = (ViewGroup) inflater.inflate(R.layout.activity_test, null);

        viewPager = (ViewPager) viewPictures.findViewById(R.id.guidePagers);
        viewPoints = (ViewGroup) viewPictures.findViewById(R.id.viewPoints);

        // 添加小圆点导航的图片
        for (int i = 0; i < pageViews.size(); i++) {
            imageView = new ImageView(KegoalActivity.this);
            imageView.setLayoutParams(new ViewGroup.LayoutParams(20, 20));
            imageView.setPadding(5, 0, 5, 0);
            // 把小圆点放进数组中
            imageViews[i] = imageView;
            // 默认选中的是第一张图片，此时第一个小圆点是选中状态，其他不是
            if (i == 0)
                imageViews[i].setImageDrawable(getResources().getDrawable(
                        R.drawable.page_indicator_focused));
            else
                imageViews[i].setImageDrawable(getResources().getDrawable(
                        R.drawable.page_indicator_unfocused));
            // 将imageviews添加到小圆点视图组
            viewPoints.addView(imageViews[i]);
        }

        setContentView(viewPictures);

        viewPager.setAdapter(new NavigationPageAdapter());
        // 为viewpager添加监听，当view发生变化时的响应
        viewPager.setOnPageChangeListener(new NavigationPageChangeListener());
    }


    // 导航图片view的适配器，必须要实现的是下面四个方法
    class NavigationPageAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return pageViews.size();
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;
        }

        // 初始化每个Item
        @Override
        public Object instantiateItem(View container, int position) {
            ((ViewPager) container).addView(pageViews.get(position));
            return pageViews.get(position);
        }

        // 销毁每个Item
        @Override
        public void destroyItem(View container, int position, Object object) {
            ((ViewPager) container).removeView(pageViews.get(position));
        }

    }

    // viewpager的监听器，主要是onPageSelected要实现
    class NavigationPageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageScrollStateChanged(int arg0) {

        }

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

        }

        @Override
        public void onPageSelected(int position) {
            // 循环主要是控制导航中每个小圆点的状态
            for (int i = 0; i < imageViews.length; i++) {
                // 当前view下设置小圆点为选中状态
                imageViews[i].setImageDrawable(getResources().getDrawable(
                        R.drawable.page_indicator_focused));
                // 其余设置为飞选中状态
                if (position != i)
                    imageViews[i].setImageDrawable(getResources().getDrawable(
                            R.drawable.page_indicator_unfocused));
            }
        }

    }
}

然后就是布局，对应的布局如下：

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

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v4.view.ViewPager
            android:id="@+id/guidePagers"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <LinearLayout
                android:id="@+id/viewPoints"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_marginBottom="15dp"
                android:gravity="center_horizontal"
                android:orientation="horizontal" >
            </LinearLayout>
        </RelativeLayout>
    </LinearLayout>
</FrameLayout>

还有就是使用到的viewpager01   -  04。这个很简单了，就是一个布局，背景是你用到的图片就ok了。

差不多就这样了，大家可以实现一下。