新手引导页（GuideView）的使用

GitHub项目地址：https://github.com/binIoter/GuideView

原项目在使用上没做详细的讲述，本篇文章就是建立在项目的基础上讲解如何使用。

1.首先，将GitHub上面的项目下载下来，将其中的 guidview 包，作为我们的项目lib导入进来。

   如果不知道如何导入请参考我的上一篇博客：http://blog.csdn.net/eueheuen/article/details/77508496

2.在导入完成后，我们在原项目的app包下，将 component 包和里面的内容拷贝到我们的项目中，这个时候会报错，我们呢只要替换      掉错误的部分，删除最上面的包名，就可以了。

3.在这些工作完成后，我们先看我们导入的 componet包，其实他里面的两个类，实现的方法是一样的，区别在于一个是动态加入布        局，一个是使用的Xml。

4.我们先看MutiComponent 这个类，在getView方法中，首先加入了布局，这个布局就是我们要显示的引导布局，创建了线性布局，在里面加入了图片和文字，下面复写的四个方法中，getXOffset表示X轴的偏移量，getYOffset表示相对于Y轴的偏移量，可以传入负值（X：负值向左，正数向右   Y：负值向上，正数向下）。

5.作者的类中，直接写好了这些值，其实，我们在使用的时候，可以只创建一个，具体的参数通过构造方法传递进来。

   例如：

public class MutiComponent implements Component {

  private String name;
  private int x;
  private int y;

  public MutiComponent(String name, int x, int y) {
    this.name = name;
    this.x = x;
    this.y = y;
  }

  @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(name);

    textView.setTextColor(inflater.getContext().getResources().getColor(R.color.colorAccent));
    textView.setTextSize(20);
    ImageView imageView = new ImageView(inflater.getContext());
    imageView.setImageResource(R.mipmap.ic_launcher_round);
    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_CENTER;
  }

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

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

如果你想替换图片，就定义一个图片，然后通过构造方法传递进来就可以了（其他数值类似）。

6.SimpleComponent这个类和MutiComponent这个道理一样，只不过视图布局在Xml，其他方法都相同。

7.在使用上，支持Fragment和Activity及ListView等：

（1）在Fragment中：

  private Guide guide;

    在onViewCreated中写：

   getActivity().getWindow()
        .getDecorView()
        .getViewTreeObserver()
        .addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                    getActivity().getWindow()
                            .getDecorView()
                            .getViewTreeObserver()
                            .removeOnGlobalLayoutListener(this);
                } else {
                    getActivity().getWindow()
                            .getDecorView()
                            .getViewTreeObserver()
                            .removeGlobalOnLayoutListener(this);
                }
                showGuideView();
            }
        });

其中的 showGuideView方法：

 private void showGuideView() {

    GuideBuilder builder = new GuideBuilder();
    builder.setTargetView(btn4)
            .setAlpha(150)
            .setHighTargetCorner(20)
            .setHighTargetPadding(10)
            .setOverlayTarget(false)
            .setOutsideTouchable(false);
    builder.setOnVisibilityChangedListener(new GuideBuilder.OnVisibilityChangedListener() {
        @Override
        public void onShown() {
        }

        @Override
        public void onDismiss() {
        }
    });

    builder.addComponent(new MutiComponent("我滴妈呀。你在说啥啊",50,10));
    guide = builder.createGuide();
    guide.setShouldCheckLocInWindow(true);
    guide.show(getActivity());
}

   

在Activity中：

header_imgbtn.post(new Runnable() {
  @Override public void run() {
    showGuideView();
  }
});

public void showGuideView() {
  GuideBuilder builder = new GuideBuilder();
  builder.setTargetView(header_imgbtn)
      .setAlpha(150)
      .setHighTargetCorner(20)
      .setHighTargetPadding(10)
      .setOverlayTarget(false)
      .setOutsideTouchable(false);
  builder.setOnVisibilityChangedListener(new GuideBuilder.OnVisibilityChangedListener() {
    @Override public void onShown() {
    }

    @Override public void onDismiss() {
    }
  });

  builder.addComponent(new SimpleComponent());
  guide = builder.createGuide();
  guide.setShouldCheckLocInWindow(true);
  guide.show(this);
}

这些就是简单的使用，如果有复杂的需求，源码都在项目中了，按照自己的需求改就好了。