Android进阶之路 - 蒙版引导页

在一些app中除了首次进入应用时出现的引导页之外，同时也在用户首次使用的时候会有部分引导！

第一部分引导页主要是介绍自己的产品，第二部分引导页主要是教用户操作我们的app -。- ~

公共配置

• build（app）

//效果1依赖
compile 'com.github.huburt-Hu:NewbieGuide:v1.0.2'
//效果2依赖
compile 'com.github.huburt-Hu:NewbieGuide:v2.1.0'

• build （project）

/**其实主要加入 maven { url 'https://jitpack.io' } 
  因为项目初建不包含maven库依赖*/

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}

目前效果有俩种 ，一种为单页引导，一种为多页引导；

Effect 1：

因为最初是借鉴的一篇博友的文章，在2017年github原作者NewbieGuide的版本为v1.0.2，所以第一个效果我相当于用的是很老的东西了！扩展方面比较差！下面是我使用时遇到的一些缺陷：

• 同一引导页面，无法满足多处视图进行高亮显示 ~
• 设置椭圆形时设置shape数值，显示时是无效的~
• 代码的设计方面只满足了建造模式，其他模式用不多~

MainActivity：

package com.advance.yongliu.guidedemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;

import com.app.hubert.library.HighLight;
import com.app.hubert.library.NewbieGuide;

public class MainActivity extends AppCompatActivity {

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

        TextView mView = findViewById(R.id.tv_btn);

        NewbieGuide.with(this)
                //存储sp的键
                .setLabel("1")
                //设置高亮区域的样式，圆形，长方形，椭圆形
                .addHighLight(mView, HighLight.Type.RECTANGLE)
                //设置引导布局与高亮区域
                .setLayoutRes(R.layout.page_view,R.id.iv_konw)
                //设置点击任何区域消失，默认为true
                .setEveryWhereCancelable(false)
                //是否每次都显示引导层，默认false
                .alwaysShow(true)
                .show();
    }
}

MainActivity 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="com.advance.yongliu.guidedemo.MainActivity">

    <TextView
        android:id="@+id/tv_btn"
        android:layout_marginTop="210dp"
        android:layout_marginRight="11dp"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:layout_alignParentRight="true"
        android:gravity="center"
        android:text="我真的好想你，在每一个夜里~"
        />

</RelativeLayout>

引导蒙版xml ：page_view

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <ImageView
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:layout_width="37dp"
        android:layout_height="46dp"
        android:layout_marginLeft="203dp"
        android:src="@mipmap/ic_go"
        />

    <ImageView
        android:id="@+id/iv_guide_girl"
        android:layout_width="50dp"
        android:layout_height="120dp"
        android:layout_marginTop="285dp"
        android:layout_marginLeft="69dp"
        android:src="@mipmap/ic_girl"
        />

    <ImageView
        android:id="@+id/iv_text"
        android:layout_width="220dp"
        android:layout_height="74dp"
        android:layout_marginTop="336dp"
        android:layout_toRightOf="@+id/iv_guide_girl"
        android:src="@mipmap/ic_text"
        />

    <ImageView
        android:layout_marginTop="31dp"
        android:layout_marginLeft="120dp"
        android:id="@+id/iv_konw"
        android:layout_width="135dp"
        android:layout_height="49dp"
        android:layout_below="@+id/iv_text"
        android:src="@mipmap/ic_konw"
        />
</RelativeLayout>

Effect 2（Demo下载地址）:

这里的效果是根据github原作者最新的版本进行设置的，方法和使用方面都扩展性强了很多！当然我这篇博客中肯定没有原作者写的详细 - -~ 主要是这个三方库的使用介绍，写的很详细！所以在这里如果没有解决的问题，那么就跳转GitHub原作者的项目下哦！！！

MainActivity（主要代码） :

package com.advance.yongliu.guidedemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.widget.TextView;
import android.widget.Toast;

import com.app.hubert.guide.NewbieGuide;
import com.app.hubert.guide.core.Controller;
import com.app.hubert.guide.listener.OnGuideChangedListener;
import com.app.hubert.guide.listener.OnPageChangedListener;
import com.app.hubert.guide.model.GuidePage;
import com.app.hubert.guide.model.HighLight;


public class MainActivity extends AppCompatActivity {

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

        TextView mView1 = findViewById(R.id.view1);
        TextView mView2 = findViewById(R.id.view2);

        /**淡入动画*/
        Animation enterAnimation = new AlphaAnimation(0f, 1f);
        enterAnimation.setDuration(600);
        enterAnimation.setFillAfter(true);
        /**淡出动画*/
        Animation exitAnimation = new AlphaAnimation(1f, 0f);
        exitAnimation.setDuration(600);
        exitAnimation.setFillAfter(true);

        /**引导页配置-。- */
        NewbieGuide.with(this)
                //存储sp的键
                .setLabel("1")
                //监听引导层 状态~
                .setOnGuideChangedListener(new OnGuideChangedListener() {
                    @Override
                    public void onShowed(Controller controller) {
                        //引导层显示
                        Toast.makeText(MainActivity.this, "开始进行引导页浏览", Toast.LENGTH_SHORT).show();
                    }

                    @Override
                    public void onRemoved(Controller controller) {
                        //引导层消失（多页切换不会触发）
                        Toast.makeText(MainActivity.this, "引导页已经全部浏览完毕，我在听陈小姐的话", Toast.LENGTH_SHORT).show();
                    }
                })

                .setOnPageChangedListener(new OnPageChangedListener() {
                    @Override
                    public void onPageChanged(int i) {

                    }
                })
                .alwaysShow(true)
                .addGuidePage(
                        GuidePage.newInstance()
                                //设置高亮区域的样式，圆形，长方形，椭圆形
                                .addHighLight(mView1)
                                .addHighLight(mView2, HighLight.Shape.RECTANGLE)
                                //设置引导布局与高亮区域
                                .setLayoutRes(R.layout.page_view1, R.id.iv_view1_konw)
                                //设置点击任何区域消失，默认为true
                                .setEverywhereCancelable(false)
                                //进入动画
                                .setEnterAnimation(enterAnimation)
                                //退出动画
                                .setExitAnimation(exitAnimation)

                )
                .addGuidePage(
                        GuidePage.newInstance()
                                //设置高亮区域的样式，圆形，长方形，椭圆形
                                .addHighLight(mView2, HighLight.Shape.OVAL, 50)
                                //设置引导布局与高亮区域
                                .setLayoutRes(R.layout.page_view2, R.id.iv_view2_konw)
                                //设置点击任何区域消失，默认为true
                                .setEverywhereCancelable(false)
                                //进入动画
                                .setEnterAnimation(enterAnimation)
                                //退出动画
                                .setExitAnimation(exitAnimation)

                )
                //显示引导层(至少需要一页引导页才能显示)
                .show();
    }
}

MainActivity 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="com.advance.yongliu.guidedemo.MainActivity">

    <TextView
        android:id="@+id/view1"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:layout_alignParentRight="true"
        android:layout_marginRight="11dp"
        android:layout_marginTop="210dp"
        android:gravity="center"
        android:text="我真的好想你，在每一个夜里~"
        />

    <TextView
        android:id="@+id/view2"
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="陈小姐的话~"
        />
</RelativeLayout>

page_view1， page_view2填充的引导页布局（每个人布局不同，这个其实不必看）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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_girl"
        android:layout_width="50dp"
        android:layout_height="120dp"
        android:layout_marginTop="285dp"
        android:layout_marginLeft="69dp"
        android:src="@mipmap/ic_girl"
        />

    <ImageView
        android:id="@+id/iv_text"
        android:layout_width="220dp"
        android:layout_height="74dp"
        android:layout_marginTop="336dp"
        android:layout_toRightOf="@+id/iv_guide_girl"
        android:src="@mipmap/ic_text"
        />

    <ImageView
        android:layout_marginTop="31dp"
        android:layout_marginLeft="120dp"
        android:id="@+id/iv_view1_konw"
        android:layout_width="135dp"
        android:layout_height="49dp"
        android:layout_below="@+id/iv_text"
        android:src="@mipmap/ic_konw"
        />
</RelativeLayout>

---

所遇问题：

• 高亮区域，椭圆形方法展示(样式自选)

  //内边距撑多大，看自己需求
  addHighLight(mView2, HighLight.Shape.OVAL, 50)

• 设置引导页的背景色（我认为也可以在引导页的xml下设置，但是可能没有这个效果好）

//设置背景色，建议使用有透明度的颜色
setBackgroundColor(getResources().getColor(R.color.testColor))

• 多处高亮视图展示

//使用addHighLight方法，可直接设置view，这里可设置高亮形状，如果不设置的话，默认是长方形
.addHighLight(mView1)
.addHighLight(mView2, HighLight.Shape.RECTANGLE)

• 设置引导页显示次数，例如只有第一次使用app显示，或者每次都显示，或者你想让引导页总共展示几次！

//控制次数  例如现在只会显示3此引导页，除非你删了app重新安装
setShowCounts(3)

• 多页引导动画切换

步骤1 ：copy 到类内，放在引导页设置之前，不然无法调用

        //淡入动画
        Animation enterAnimation = new AlphaAnimation(0f, 1f);
        enterAnimation.setDuration(600);
        enterAnimation.setFillAfter(true);
        //淡出动画
        Animation exitAnimation = new AlphaAnimation(1f, 0f);
        exitAnimation.setDuration(600);
        exitAnimation.setFillAfter(true);

步骤2 ：需要使用动画就进行设置，不需要就注释

  //进入动画
  .setEnterAnimation(enterAnimation)
  //退出动画
  .setExitAnimation(exitAnimation)