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 ：
<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
<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：
<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填充的引导页布局（每个人布局不同，这个其实不必看）
<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)