[Android]新功能引导高亮显示遮罩层View

[Android]新功能引导高亮显示遮罩层View

@Author GQ 2016年08月5日   

实际上是一个Activity遮盖在目标View的上方，
可以设置遮罩层文字图片等，亲测好使。

原文github地址

效果图

1. AndroidStudio使用

dependencies {

    compile 'com.guoqi.widget:highlightview:1.0'

}

2. 使用

//在fab上使用线程加载
fab.post(new Runnable() {
            @Override
            public void run() {
                showHighLight(fab);
            }
        });


/**
 * 显示高亮引导
 */
private void showHighLight(final View v) {
  final GuideBuilder builder = new GuideBuilder();
  builder.
    //设置要高亮显示的View
    setTargetView(v)
    //设置高亮区域圆角
    .setHighTargetCorner(10)
    //设置遮罩透明度(0-255)
    .setAlpha(150)
    //设置遮罩形状 默认矩形Component.ROUNDRECT,可选圆形
    .setHighTargetGraphStyle(Component.ROUNDRECT)
    //是否覆盖目标View,默认flase
    .setOverlayTarget(false)
    //设置进出动画
    .setEnterAnimationId(android.R.anim.fade_in)
    .setExitAnimationId(android.R.anim.fade_out)
    //外部是否可点击取消遮罩,true为不可取消
    .setOutsideTouchable(false);
  //设置遮罩监听
  builder.setOnVisibilityChangedListener(new      GuideBuilder.OnVisibilityChangedListener() {
            @Override
            public void onShown() {
                //显示遮罩时触发
            }

            @Override
            public void onDismiss() {
                //显示下一个遮罩
                showHightLight2(iv);
            }
        });

        //添加遮罩旁边需要显示的视图,比如 "新功能在这里~"
        builder.addComponent(new MyComponent());
        Guide guide = builder.createGuide();
        //检测定位非0
        guide.setShouldCheckLocInWindow(false);
        //显示
        guide.show(this);
    }

• MyComponent.java

//自定义遮罩层文字图片
public class MyComponent implements Component {

    @Override
    public View getView(LayoutInflater inflater) {
        LinearLayout ll = new LinearLayout(inflater.getContext());
        LinearLayout.LayoutParams param =
                new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
                        LinearLayout.LayoutParams.WRAP_CONTENT);
        ll.setOrientation(LinearLayout.VERTICAL);
        ll.setLayoutParams(param);
        TextView textView = new TextView(inflater.getContext());
        textView.setText("点击这里");
        textView.setTextColor(Color.WHITE);
        textView.setTextSize(20);
        ImageView imageView = new ImageView(inflater.getContext());
        imageView.setImageResource(R.drawable.arrow);
        ll.removeAllViews();
        ll.addView(textView);
        ll.addView(imageView);
        ll.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(view.getContext(), "引导层被点击了", Toast.LENGTH_SHORT).show();
            }
        });
        return ll;
    }

    @Override
    public int getAnchor() {
        return Component.ANCHOR_BOTTOM;
    }

    @Override
    public int getFitPosition() {
        return Component.FIT_START;
    }

    @Override
    public int getXOffset() {
        return 0;
    }

    @Override
    public int getYOffset() {
        return 30;
    }
}