android使用ViewPager实现引导页效果

对于大多数android开发者来说,ViewPager和ListView是再熟悉不过了,ViewPager的实现思路和ListView大同小异,具体参照前面的ListView详解。在实现基础的ViewPager后还加上了一个类似于Tab的效果。
下面来一一详解:
1.在activity_main.xml中定义了ViewPager控件,在这之前,先导入android的v4包。

<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"
    tools:context=".MainActivity">

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

</RelativeLayout>

2.因为在引导页中有一个类似与Tab的效果,于是我就在drawable下定义一个小圆点,分别是正常状态下和选中状态下:
新建point.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
    <size
        android:width="16dp"
        android:height="16dp"
        />
    <solid android:color="#cc11e1"/>
</shape>

新建point_press.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
<size
    android:width="8dp"
    android:height="8dp"
    />
<solid android:color="#ff0000"/>
</shape>

新建一个选择器,point_selector.xml,这里使用的是state_enabled来判断选择的状态。

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

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

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

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

</selector>

3.在MainActivity中获取到控件,准备数据源,设置适配器。

package com.pbq.viewpager;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;


public class MainActivity extends Activity {

            private ViewPager viewPager;
            MyViewPager myViewPager;
            private int images[]={R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d};
            private int points[]={R.drawable.point,R.drawable.point,R.drawable.point,R.drawable.point};
            private String texts[]={"第一页","第二页","第三页","第四页"};
            @Override
            protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);
                viewPager= (ViewPager) findViewById(R.id.vp);
                //设置适配器
                myViewPager=new MyViewPager(this,images,points,texts);
                viewPager.setAdapter(myViewPager);

                //设置中间位置
//                int item = Integer.MAX_VALUE/2 - Integer.MAX_VALUE/2%images.length;//要保证imageViews的整数倍
//                viewPager.setCurrentItem(item);

                viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                    /**
                     * 当页面滚动了的时候回调这个方法
                     * @param position 当前页面的位置
                     * @param positionOffset 滑动页面的百分比
                     * @param positionOffsetPixels 在屏幕上滑动的像数
                     */
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            /**
             * 当某个页面被选中了的时候回调
             * @param position 被选中页面的位置
             */
            @Override
            public void onPageSelected(int position) {
                myViewPager.setPointState(position);
            }

            /**
             * 当页面滚动状态变化的时候回调这个方法
             *@param i 静止->滑动
             *滑动-->静止
             *静止-->拖拽
             */
            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
    }
}

4.新建适配器MyViewPager,这里从MainActivity中会传入一个构造器,第一个参数为上下文,第二个参数为图片的资源数组,第三个参数为小圆点的图片资源数组,第四个参数为显示的文字资源。这是MyViewPager继承PagerAdapter这个抽象类,实现getCount(获取总数),isViewFromObject(比较View和Object是否为同一实例),instantiateItem(相当于getView),destroyItem(释放资源)这4个方法,最主要的当然是instantiateItem的具体实现,要想讲图片文字和小圆点显示在视图上,此时我们需要一个行布局,把他通过instantiateItem加载到视图上。
新建item.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:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/a"
        android:scaleType="fitXY"
        />
    <LinearLayout
        android:orientation="vertical"
        android:gravity="center"
        android:layout_alignBottom="@id/iv"
        android:layout_width="match_parent"
        android:layout_height="80dp">
        <TextView
            android:id="@+id/tv"
            android:textColor="#000"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第一页"
            />
        <LinearLayout
            android:layout_marginTop="10dp"
            android:id="@+id/ll"
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            >
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

细心的朋友可以看到这里在textView的下面怎么有一个空的LinearLayout,这是用来显示小圆点的,为什么不在行布局中显示呢?之前我也是在这里显示,但发现一个小问题,当我写了4个小圆点定义好之后,显示确实好看,但如果我的图片资源不止4个呢?我还要自己手动去来行布局中进行修改,于是灵光一现,我是不是可以在代码中动态添加呢?看看代码,是不是比先前更智能了呢?这里设置了默认显示第一页选中。

linearLayout= (LinearLayout) view.findViewById(R.id.ll);
        for (int i = 0 ;i < images.length;i++) {
            //添加点
            ImageView point = new ImageView(context);
            point.setBackgroundResource(R.drawable.point_selector);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(16,16);
            if (i == 0) {
                //默认显示第一页选中
                point.setEnabled(true); //显示红色
            } else {
                point.setEnabled(false);//显示紫色
                params.leftMargin = 16;
            }
            point.setLayoutParams(params);
            linearLayout.addView(point);
        }

这时,心想终于完成了,运行代码一看,为什么滑动到第二页之后小圆点没有移动呢?
这里写图片描述
呵呵,原来还没对viewpager的页面进行监听

 viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                    /**
                     * 当页面滚动了的时候回调这个方法
                     * @param position 当前页面的位置
                     * @param positionOffset 滑动页面的百分比
                     * @param positionOffsetPixels 在屏幕上滑动的像数
                     */
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            /**
             * 当某个页面被选中了的时候回调
             * @param position 被选中页面的位置
             */
            @Override
            public void onPageSelected(int position) {
                myViewPager.setPointState(position);
            }

            /**
             * 当页面滚动状态变化的时候回调这个方法
             *@param i 静止->滑动
             *滑动-->静止
             *静止-->拖拽
             */
            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });

当页面被选中的时候通过adapter去调用myViewPager.setPointState(position);这个方法。来到MyViewPager中。

   /**
     * 设置点滑动的状态
     * @param position
     */
    public void setPointState(int position) {
        //支持无限滑动
//        int realPosition = position%images.length;

        //把上一个高亮的设置默认-紫色
        linearLayout.getChildAt(prePosition).setEnabled(false);
        //当前的设置为高亮-红色

        linearLayout.getChildAt(position).setEnabled(true);
    }

好了,看一下效果。这是在第二个页面小圆点也移动了。
这里写图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页