用户引导页功能实现

用户指引是一般APP软件中都必不可少的，极大的简化了用户学习的时间，那今天我们就来实现一下用户引导页效果。

效果

引导效果

1-1Gradle配置

//工程的Gradle
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

//项目的Gradle
dependencies {
        implementation 'com.github.yilylong:UserGuideView:1.0.5'
}

XML布局

 <RelativeLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_height="match_parent">
        <Button
            android:id="@+id/btn_ho"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dp_20"
            android:layout_centerInParent="true"
            android:text="请点击我"
            />
        <com.zhl.userguideview.UserGuideView
            android:id="@+id/guideView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:HighlightViewStyle="rect"
            app:MaskBlurStyle="solid"
            app:maskColor="#b7000000"
            app:tipView="@mipmap/five" />
    </RelativeLayout>

布局文件中引入UserGuideView然后：

mGuideView.setHighLightView(targetView);

传入当前需要高亮的view即可 之前的方法持有一个activity的引用不太好 去掉了

支持高亮框形状 属性app:HighlightViewStyle="oval" 方形 圆形 椭圆 可选

提示的图片 属性 app:tipView="@mipmap/tip_view"

蒙版层颜色 属性 app：maskColor

高亮框边缘模糊效果 属性 app:MaskBlurStyle="solid" normal/solid

需要设置状态栏高度时候调用guideView.setStatusBarHeight(0)

Tip：实际应用中，tipview 和 箭头等设计图不一样，很难做到精准定位，所以增加了设置每个箭头和tipview位移的方法，来微调位置以达到最合适的布局。

setArrowDownCenterMoveX(int jtDownCenterMoveX)
setArrowUpRightMoveX(int jtUpRightMoveX)
setArrowUpLeftMoveX(int jtUpLeftMoveX)
setArrowUpRightMoveX(int jtUpRightMoveX)
setArrowUpCenterMoveX(int jtUpCenterMoveX)
setArrowDownRightMoveX(int jtDownRightMoveX)
setArrowDownLeftMoveX(int jtDownLeftMoveX)
setArrowDownCenterMoveX(int jtDownCenterMoveX)
setTipViewMoveX(View highlightView,int tipViewMoveX)
setTipViewMoveY(View highlightView,int tipViewMoveY)

支持同时设置多个需要高亮的View并将按顺序显示

guideView.setHightLightView(top,icon,back);

支持设置指示箭头

guideView.setArrowUpCenter(R.mipmap.up_arrow);

支持将自定义View作为tipview

guideView.setTipView(tipTextView,400,200);

详情参考Demo
项目地址

文章很短，路还漫长，大家好，我是玖玖君，一个帅气与才华并存的男人，我们下期再见。