[Android]新功能引導高亮顯示遮罩層View

@Author GQ 年月日   

實際上是一個Activity遮蓋在目标View的上方，
可以設定遮罩層文字圖檔等，親測好使。
           

原文github位址

效果圖

• Android新功能引導高亮顯示遮罩層View
  • 效果圖
  • AndroidStudio使用
  • 使用

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()
    //設定遮罩透明度(0-255)
    .setAlpha()
    //設定遮罩形狀 預設矩形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();
        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 ;
    }

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