【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布局

<?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">        <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);    }}

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

本文结束

前言

运行效果：

源码地址：

简单介绍：

正文

更多相关文章

随机推荐