【Android】[3]如何制作引导页轮播图

前言

运行效果：

源码地址：

https://github.com/littlecurl/AppProjects

进去找AndroidGuide或者AndroidGuide.zip进行下载

简单介绍：

今天介绍的是一款由国人开源的第三方库，GitHub地址：https://github.com/youth5201314/banner，我看到的时候，star已经8000+了，每当看到这种国人开源库被广泛使用的时候，就像周董说的那样“我不知道作者骄傲不骄傲，反正老子挺骄傲的”。

正文

首先要在gridle文件中引入两个库：

    // banner 轮播
    implementation 'com.youth.banner:banner:1.4.10'
	// Glide
    implementation 'com.github.bumptech.glide:glide:4.9.0'

然后是xml布局

<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">
    
    <com.youth.banner.Banner
        android:id="@+id/guide_banner"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    
    <ImageView
        android:id="@+id/iv_start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        android:src="@drawable/iv_start"
        app:layout_constraintBottom_toBottomOf="@+id/guide_banner"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:visibility="gone"
        />
android.support.constraint.ConstraintLayout>

解释一下，轮播图com.youth.banner.Banner就是我们第三方开开源库的控件名称。之所以还存在一个ImageView，而且还在最下面写上了visibility为"gone"是因为想实现一个轮播到最后一张图片时，显现一个按钮，点击进入。

接下来是Java类

package cn.edu.heuet.androidguide;

import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.ImageView;

import com.youth.banner.Banner;

import java.util.ArrayList;
import java.util.List;

/**
 * @author 刘亚恒
 * @since 2019/6/28 10:00
 */
public class GuideActivity extends AppCompatActivity {
    private Banner guide_banner;
    private ImageView iv_start;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        fullScreenConfig();
        // 全屏一定要设置在这句之上
        setContentView(R.layout.activity_guide);

        // 获取控件
        guide_banner = findViewById(R.id.guide_banner);
        iv_start = findViewById(R.id.iv_start);

        // 初始化图片资源
        List<Integer> imageList = new ArrayList<>();
        imageList.add(R.drawable.launcher_01);
        imageList.add(R.drawable.launcher_02);
        imageList.add(R.drawable.launcher_03);

        // 轮播图实现
        initViews(imageList);

    }

    // 全屏显示
    private void fullScreenConfig() {
        // 去除ActionBar
        // 如果该类 extends Activity，使用下面这句
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        // 如果该类 extends AppCompatActivity，使用下面这句
        if (getSupportActionBar() != null) {
            getSupportActionBar().hide();
        }

        // 去除状态栏，如 电量、Wifi信号等
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
    }

    private void initViews(final List<Integer> imageList) {
        // 设置ImageLoader
        guide_banner.setImageLoader(new ModelImageLoader())
                .setImages(imageList)
                .isAutoPlay(true) // 自动播放
                .start();

        // 设置页面选择监听器并实现选中点击事件响应
        guide_banner.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {
            }

            @Override
            public void onPageSelected(int i) {
                // 如果轮播到了最后一张图片
                if (i == imageList.size() - 1) {
                    // 显示start按钮图片
                    iv_start.setVisibility(View.VISIBLE);
                    iv_start.setOnClickListener(new View.OnClickListener() {
                        @Override
                        public void onClick(View v) {
                            startActivity(new Intent(GuideActivity.this, MainActivity.class));
                            finish();
                        }
                    });
                } else {
                    iv_start.setVisibility(View.GONE);
                }
            }

            @Override
            public void onPageScrollStateChanged(int i) {
            }
        });
    }
}

上面还涉及到一个ImageLoader的类，内容如下：

package cn.edu.heuet.androidguide;

import android.content.Context;
import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.youth.banner.loader.ImageLoader;

/**
 * Create by SunnyDay on 2019/03/15
 * Banner 的ImageLoader
 */
public class ModelImageLoader extends ImageLoader {
    @Override
    public void displayImage(Context context, Object path, ImageView imageView) {
        // Glide相关用法可参考其GitHub官方网址
        Glide.with(context)
                .load(path)
                .into(imageView);
    }
}

最后，我这里为了图个省事，没做美工处理，看起来最后那个按钮有些突兀，见谅。

本文结束