使用ViewPager实现Android启动引导页

学习了ViewPager的基本知识，可以尝试着实实现一个Android的启动项

基础部分可以见我的另一篇博文

https://blog.csdn.net/nishigesb123/article/details/88706036

首先当然是

布局

和之前的ViewPager demo不一样，这里没有用到PagerTabStrip。布局方式也小有不同，选择了FrameLayout

关于布局相关我也写过一篇博文，不过初学，写的很简陋....orz....有机会把那篇再改改

https://blog.csdn.net/nishigesb123/article/details/88304305

然后ViewPager自然不能少，包括导包也不要忘记！
需要注意的是还增设了一个LinearLayout（线性布局）来放置ImageView（此处为实为小圆点的图标）

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pagertab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            app:layout_constraintStart_toStartOf="@+id/viewpager"
            app:layout_constraintTop_toTopOf="@+id/viewpager"></android.support.v4.view.PagerTabStrip>
    </android.support.v4.view.ViewPager>

</android.support.constraint.ConstraintLayout>

然后，每个view界面的子布局的话，也可以参考之前的文章，实际上就是一个LinearLayout套一个ImageView，非常简单。

接下来完成

MainActivity

首先还是注册组件，由于没有PagerTabStrip，所以只用注册ViewPager

https://blog.csdn.net/nishigesb123/article/details/88304305

然后就是走一遍ViewPager的流程了，一个存放view的ArrayList，并准备一个initViews的方法，将view添加进ArrayList。
接着适配器也不能落下，配置完毕后，通过setAdapter(new 你写的适配器())绑定即可。关于适配器如何配置，在前文中已经有较为具体的描述，就不再赘述。

需要注意的是，用不到titles，所以相关数组，相关适配器中的方法都可以去掉不要

到这里就已经初步完成了,效果如下，实在没有合适的小图标orz

然后和想要的效果还是有一点出入的，应该是全屏没有标题栏才对，可以修改AndroidManifest.xml图示部分

为它添加一个theme，使用Android自带的theme，翻译过来即没有标题栏、全屏

同时还需要修改继承关系，将MainActivity继承自修改成Activity否则会报错。

感觉更丑了 orz...

最后实现OnPageChangeListener

1、需要准备一个图片资源数组，和一个initPoint方法，注册存放圆点小图标的LinerLayout，并将小图标从里面拿出来放到数组中去。

2、然后准备一个int变量currentIndex，作为索引，当前正在显示的卡页。

3、最后准备一个设置小圆点的图片的方法，根据索引的情况来改变小圆点图片，在onPageSelected中调用即可。

完整代码

package com.example.viewpager2;

import android.app.Activity;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

import java.util.ArrayList;

public class MainActivity extends Activity implements ViewPager.OnPageChangeListener{
    private ViewPager viewPager;
    private ArrayList<View> views = new ArrayList<>();
    private ImageView[]imageViews;
    private int currentIndex;//当前正在显示的卡页
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
        initPoint();
    }

    private void initViews(){
        viewPager = findViewById(R.id.viewpager);
        views.add(getLayoutInflater().inflate(R.layout.layout1,null));
        views.add(getLayoutInflater().inflate(R.layout.layout2,null));
        views.add(getLayoutInflater().inflate(R.layout.layout3,null));
        views.add(getLayoutInflater().inflate(R.layout.layout4,null));

        viewPager.setOnPageChangeListener(this);
        viewPager.setAdapter(new MyPagerAdapter());
    }

    private void initPoint(){
        LinearLayout point_layout = findViewById(R.id.point_layout);
        imageViews = new  ImageView[views.size()];
        for(int i=0;i<imageViews.length;i++){
            imageViews[i]= (ImageView) point_layout.getChildAt(i);
        }
        currentIndex = 0;
        imageViews[currentIndex].setImageResource(android.R.drawable.presence_online);
    }
    //设置小圆点的图片
    private void setCurrentPoint(int position){
        if(currentIndex<0||currentIndex==position||currentIndex>imageViews.length-1){
            return;
        }
        imageViews[currentIndex].setImageResource(android.R.drawable.presence_invisible);
        imageViews[position].setImageResource(android.R.drawable.presence_online);
        currentIndex = position;
    }

    @Override
    public void onPageScrolled(int i, float v, int i1) {

    }

    @Override
    public void onPageSelected(int i) {
        setCurrentPoint(i);
    }

    @Override
    public void onPageScrollStateChanged(int i) {

    }

    class MyPagerAdapter extends PagerAdapter {

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

        //实例化选项卡
        @NonNull
        @Override
        public Object instantiateItem(@NonNull ViewGroup container, int position) {
            View v  = views.get(position);
            container.addView(v);
            return v;
        }
        //删除选项卡
        @Override
        public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
            container.removeView(views.get(position));
        }

        //判断视图是否为返回的对象
        @Override
        public boolean isViewFromObject(@NonNull View view, @NonNull Object o) {
            return view==o;
        }
    }
}

使用ViewPager实现Android启动引导页

布局

MainActivity

完整代码

最终效果