android使用ViewPager实现引导页效果

最新推荐文章于 2024-05-16 21:26:53 发布

稀饭汉堡peng

最新推荐文章于 2024-05-16 21:26:53 发布

阅读量1.8k

点赞数 1

分类专栏： android控件文章标签： android开发

本文链接：https://blog.csdn.net/kobe_peng/article/details/51899600

版权

android控件专栏收录该内容

4 篇文章 0 订阅

订阅专栏

对于大多数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);
    }

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

稀饭汉堡peng

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
android使用ViewPager实现引导页效果

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

扫一扫

专栏目录