安卓简单引导页的制作

1、效果图

2、WelcomeGuideActivity

public class WelcomeGuideActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    private ViewPager viewpager;
    private GuideViewPagerAdapter adapter;
    //View数据
    private List<View> views;

    //引导页图片、布局资源
    private int[] pics = {R.layout.guid_view1, R.layout.guid_view2, R.layout.guid_view3, R.layout.guid_view4};
    //引导点资源
    private ImageView[] imageViews;

    //引导点
    private ImageView imageOne, imageTwo, imageThree, imageFour;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_welcome_guide);

        viewpager = this.findViewById(R.id.viewpager);
        imageOne = this.findViewById(R.id.imageOne);
        imageTwo = this.findViewById(R.id.imageTwo);
        imageThree = this.findViewById(R.id.imageThree);
        imageFour = this.findViewById(R.id.imageFour);
        initView();
    }

    private void initView() {
        if (views == null) {
            views = new ArrayList<>();
        }
        if (imageViews == null) {
            imageViews = new ImageView[4];
        }
        //初始化引导点,赋值
        imageViews[0] = imageOne;
        imageViews[1] = imageTwo;
        imageViews[2] = imageThree;
        imageViews[3] = imageFour;
        //默认全部为未选中
        setPointSelect(true, 0);

        //初始化引导页视图列表,将4个布局View添加至list中
        for (int i = 0; i < pics.length; i++) {
            View view = LayoutInflater.from(this).inflate(pics[i], null);
            views.add(view);
        }
        //初始化adapter
        adapter = new GuideViewPagerAdapter(views);
        //将adapter设置到viewpager中
        viewpager.setAdapter(adapter);
        //ViewPager切换事件
        viewpager.addOnPageChangeListener(this);
    }

    /**
     * ViewPager滑动事件
     */
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        //当前页面被滑动时调用
        //position :当前页面，及你点击滑动的页面
        //positionOffset:当前页面偏移的百分比
        //positionOffsetPixels:当前页面偏移的像素位置
    }

    @Override
    public void onPageSelected(int position) {
        //当新的页面被选中时调用(position：当前位置)
        //先设置为未选中，在将当前设置为选中状态
        setPointSelect(false, position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        //当滑动状态改变时调用
        //state ==1 的时候默示正在滑动
        //state ==2 的时候默示滑动完毕了
        //state ==0 的时候默示什么都没做
    }

    /**
     * 设置引导点为为选中状态
     */
    private void setPointSelect(boolean state, int position) {
        for (int i = 0; i < imageViews.length; i++) {
            imageViews[i].setBackgroundResource(R.mipmap.unselect);
        }
        if (state) {
            //第一张为选中状态
            imageViews[0].setBackgroundResource(R.mipmap.select);
        } else {
            imageViews[position].setBackgroundResource(R.mipmap.select);
        }
    }
}

3、GuideViewPagerAdapter

public class GuideViewPagerAdapter extends PagerAdapter {

    private List<View> views;

    public GuideViewPagerAdapter(List<View> views) {
        super();
        this.views = views;
    }

    @Override
    public int getCount() {
        if (views != null) {
            return views.size();
        }
        return 0;
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view == (object);
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        //super.destroyItem(container, position, object);
        container.removeView(views.get(position));
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        (container).addView(views.get(position), 0);
        return views.get(position);
    }
}

4、activity_welcome_guide.xml

<?xml version="1.0" encoding="utf-8"?>
<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=".WelcomeGuideActivity">

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

    <TextView
        android:id="@+id/start_home"
        android:textColor="#fff"
        android:gravity="center"
        android:layout_alignParentRight="true"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        android:background="@drawable/home_btnstyle"
        android:layout_width="40dp"
        android:textSize="12sp"
        android:layout_height="40dp"
        android:text="跳过"/>

    <LinearLayout
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_margin="30dp"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/imageOne"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ImageView
            android:id="@+id/imageTwo"
            android:layout_marginRight="10dp"
            android:layout_marginLeft="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ImageView
            android:id="@+id/imageThree"
            android:layout_marginRight="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <ImageView
            android:id="@+id/imageFour"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>
</RelativeLayout>

5、资源文件 home_btnstyle.xml

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

其中4个布局一致，只放出一个 -guid_view4.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/fourth"
    android:gravity="center|bottom"
    android:orientation="vertical">

    <Button
        android:id="@+id/start_home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="90dp"
        android:text="立即进入" />

</LinearLayout>

引导页图片自行换取
引导点图片链接:

http://www.iconfont.cn/search/index?searchType=icon&q=%E6%A8%AA%E7%BA%BF

http://www.iconfont.cn/search/index?q=%E9%80%89%E4%B8%AD%E7%82%B9