引导页是app必备的元素之一。前面一篇文章教了大家使用ConvenientBanner来实现轮播图的实现，其实他还可以用来实现引导页。今天来教大家如何简单的实现。
说明：
一,使用的Androidstudio版本为3.2.1
二,使用的ConvenientBanner版本为2.1.4
github地址为：https://github.com/Bigkoo/Android-ConvenientBanner
展示效果:
Screenr26.gif
现在正式开始
1，在build.gradle中做如下代码1--4步骤所示配置。
apply plugin: 'com.android.application'
android {
compileSdkVersion 28
defaultConfig {
applicationId "com.mumu.jsguidepage"
minSdkVersion 15
targetSdkVersion 28
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
//1,增加这个东西
allprojects {
repositories {
maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }
flatDir {
dirs 'libs'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:28.0.0'
//2,导入design，原因是通用广告栏ConvenientBanner使用了里面的元素
implementation 'com.android.support:design:28.0.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
//3，butterKnife，不是必须添加，如果你使用的项目使用的是DataBinding，可以不添加该依赖
implementation 'com.jakewharton:butterknife:8.8.1'
annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'
//4，通用广告栏ConvenientBanner
implementation 'com.bigkoo:ConvenientBanner:2.1.4'
}
####2，在mipmap中增加图片备用
3，新建一个引导页GuidePageActivity
package com.mumu.jsguidepage;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import com.bigkoo.convenientbanner.ConvenientBanner;
import com.bigkoo.convenientbanner.holder.CBViewHolderCreator;
import com.bigkoo.convenientbanner.holder.Holder;
import com.bigkoo.convenientbanner.listener.OnPageChangeListener;
import java.util.ArrayList;
import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
import butterknife.Unbinder;
/**
* author : zlf
* date : 2018/11/26
* blog ://www.greatytc.com/u/281e9668a5a6
*/
public class GuidePageActivity extends AppCompatActivity {
Unbinder unbinder;
@BindView(R.id.cb_test)
ConvenientBanner cbTest;
@BindView(R.id.btn_test)
Button btnTest;
private ArrayList<Integer> arrayList;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_guide_page);
unbinder = ButterKnife.bind(this);
initView();
initGuidePage();
}
@Override
protected void onDestroy() {
super.onDestroy();
unbinder.unbind();
}
private void initView() {
arrayList = new ArrayList<>();
arrayList.add(R.mipmap.b1);
arrayList.add(R.mipmap.b2);
arrayList.add(R.mipmap.b3);
}
private void initGuidePage() {
cbTest.setPages(new CBViewHolderCreator() {
@Override
public Holder createHolder(View itemView) {
return new LocalImageHolderView(itemView);
}
@Override
public int getLayoutId() {
//设置加载哪个布局
return R.layout.item_guide_page;
}
}, arrayList)
.setPageIndicator(new int[]{R.mipmap.ic_page_indicator, R.mipmap.ic_page_indicator_focused})
.setPageIndicatorAlign(ConvenientBanner.PageIndicatorAlign.CENTER_HORIZONTAL)
.setPointViewVisible(true)
.setCanLoop(false)
.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
}
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
}
@Override
public void onPageSelected(int index) {
//总共添加了三张图片，如果index为2表示到了最后一张图片，隐藏下面的指示器，显示跳转到主页的按钮
if (index == 2) {
btnTest.setVisibility(View.VISIBLE);
cbTest.setPointViewVisible(false);
} else {
btnTest.setVisibility(View.GONE);
cbTest.setPointViewVisible(true);
}
}
});
}
@OnClick(R.id.btn_test)
public void onViewClicked() {
//跳转到主activity
Intent intent = new Intent(GuidePageActivity.this, MainActivity.class);
startActivity(intent);
}
/**
* 轮播图2 对应的holder
*/
public class LocalImageHolderView extends Holder<Integer> {
private ImageView mImageView;
//构造器
public LocalImageHolderView(View itemView) {
super(itemView);
}
@Override
protected void initView(View itemView) {
mImageView = itemView.findViewById(R.id.iv_guide_page);
mImageView.setScaleType(ImageView.ScaleType.FIT_XY);
}
@Override
public void updateUI(Integer data) {
mImageView.setImageResource(data);
}
}
}
4，新建GuidePageActivity 对应的xml文件activity_guide_page.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.bigkoo.convenientbanner.ConvenientBanner
android:id="@+id/cb_test"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:id="@+id/btn_test"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="30dp"
android:text="进入app"
android:visibility="gone" />
</RelativeLayout>
5，新建一个子布局item_guide_page.xml，他在GuidePageActivity 中会使用到。这个子布局随便填写，我因为简单方便只添加了一个imageview来铺满屏幕。
<?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:orientation="vertical">
<ImageView
android:id="@+id/iv_guide_page"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@mipmap/ic_launcher" />
</LinearLayout>
6，在\res\values\styles.xml中添加一个launchTheme，来满足铺满整个屏幕的需求
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="launchTheme" parent="AppTheme">
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
</style>
</resources>
7，在AndroidManifest.xml中修改启动的activity，让app首先打开引导页，给引导页增加launchTheme，然后给mainactivity注册。
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.mumu.jsguidepage">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".GuidePageActivity"
android:theme="@style/launchTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".MainActivity"/>
</application>
</manifest>
8，项目结构和github地址
项目结构：
image.png
demo地址：https://github.com/mamumu/jsGuidePage
如果有发现错误欢迎指正我及时修改，如果有好的建议欢迎留言。如果觉得对你有帮助欢迎给小星星，谢谢。
