新手指引页功能实现
在本期版本更新的需求中添加了新手指引页功能,从网上看了去多大神的实现方式,有用自定义View来自己挖透明区域的,也有透明图来实现遮盖的,时间紧迫就采用UI给图遮盖的实现方式。
自己简单的用Dialog来实现的,思路就是将Dialog设置成了全屏的,然后找到你要添加蒙板的地方,给他设置上图片即可
具体实现方式请看代码,估计你能看懂~代码添加还算可以~
在这将几个方法说明一下即可:
setGuideStyle(Context context, int themeResId, int laytouResId)
设置Dialog的样式以及布局ID,本文使用的布局只需要一个跟标签即可,需要给一个默认的style和layout
setImageRes(Context context, int imgResId, Direction direction, int topMargin)
设置图片的ID,其中的Direction是自定义方向,注意最后的topMargin,指的是显示的图片距离TOP的边距,特别注意的是,做机型适配的时候,需要将状态栏的高度也算进去
同时还监听了Dialog显示的时候的返回键按下,通过接口回调,传递你自己要处理的事件~
比较简单的解释~希望以后继续改进了~~
public class GuideViewUtils {
private static GuideViewUtils instance;
private static Dialog dialog;
private View view;
private RelativeLayout rl_dismiss;
// private ImageView iv_show;
private RelativeLayout.LayoutParams params;
private final String TAG = getClass().getSimpleName();
private OnClickCallback onclickListener;
/**
* 私有构造
*/
private GuideViewUtils() {
}
public static GuideViewUtils getInstance() {
if (instance == null) {
instance = new GuideViewUtils();
}
return instance;
}
/**
* 设置Dialog样式
* 都传0的时候使用默认样式
*
* @param context 上下文对象
* @param themeResId 样式ID
* @param laytouResId layout布局ID
* @return this
*/
public GuideViewUtils setGuideStyle(Context context, int themeResId, int laytouResId) {
if (themeResId == 0) {
dialog = new Dialog(context, R.style.guideDialog);
view = View.inflate(context, R.layout.layout_guideview, null);
} else {
dialog = new Dialog(context, themeResId);
view = View.inflate(context, laytouResId, null);
}
return this;
}
/**
* 设置图片资源ID、显示位置
*
* @param context 上下文
* @param imgResId 资源ID
* @param direction 方向
* @param topMargin margin_top
* @return this
*/
public GuideViewUtils setImageRes(Context context, int imgResId, Direction direction, int topMargin) {
rl_dismiss = (RelativeLayout) view.findViewById(R.id.rl_dismiss);
ImageView imageView = new ImageView(context);
if (imgResId != 0) {
imageView.setImageResource(imgResId);//设置图片资源ID
}
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
switch (direction) {
case RIGHT_TOP://右上角的
rl_dismiss.setGravity(Gravity.RIGHT | Gravity.TOP);
break;
case BOTTOM://底部居中
rl_dismiss.setGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL);
break;
case TOP_CENTER_HORIZONTAL://需要手动设置margin_top
rl_dismiss.setGravity(Gravity.TOP | Gravity.CENTER_HORIZONTAL);
if (topMargin != 0) {
layoutParams.topMargin = topMargin;//设置margin_top
}
break;
default:
break;
}
imageView.setLayoutParams(layoutParams);
imageView.requestLayout();
rl_dismiss.addView(imageView);
dialog.setContentView(view);
rl_dismiss.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
onclickListener.onClickedGuideView();
}
});
return this;
}
/**
* 设置全屏,获取屏幕尺寸
*
* @return
*/
public GuideViewUtils setGuideGravity() {
Window dialogWindow = dialog.getWindow();
dialogWindow.setGravity(Gravity.CENTER);
WindowManager m = dialogWindow.getWindowManager();
Display d = m.getDefaultDisplay(); // 获取屏幕宽、高用
WindowManager.LayoutParams p = dialogWindow.getAttributes(); // 获取对话框当前的参数值
Log.e(TAG, "屏幕宽度 Width = " + d.getWidth() + " Height : " + d.getHeight());
p.width = d.getWidth(); // 宽度设置为屏幕宽度
p.height = WindowManager.LayoutParams.MATCH_PARENT;
dialogWindow.setAttributes(p);
return this;
}
/**
* 显示
*
* @return
*/
public GuideViewUtils show() {
dialog.setCanceledOnTouchOutside(true);
//简单的方法是直接设置 dialog.setCancelable(false); 立解囧况
dialog.setOnKeyListener(new DialogInterface.OnKeyListener() {
@Override
public boolean onKey(DialogInterface dialog, int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
L.e("IVEN", "在Dialog显示的时候,点击了 返回键 ........");
dialog.dismiss();
onclickListener.onClickedGuideView();//回调
return true;
} else {
return false;
}
}
});
dialog.show();
return this;
}
/**
* 方向枚举设置
* OTHER:表示不需要具体的方向,是需要自己设置具体的边距的
*/
public enum Direction {
LEFT,
TOP,
RIGHT,
/**
* 居底
*/
BOTTOM,
LEFT_TOP,
LEFT_BOTTOM,
/**
* 水平居中、向上
*/
TOP_CENTER_HORIZONTAL,
/**
* 右上角
*/
RIGHT_TOP,
RIGHT_BOTTOM,
OTHER
}
/**
* Callback
*/
public interface OnClickCallback {
void onClickedGuideView();
}
public GuideViewUtils setOnclickListener(OnClickCallback onclickListener) {
this.onclickListener = onclickListener;
return this;
}
}“
样式:
<style name="guideDialog" parent="@android:style/Theme.Holo.Light.Dialog">
<item name="android:windowFrame">@null</item>
<!--是否浮在activity上-->
<item name="android:windowIsFloating">true</item>
<!-- 半透明 -->
<item name="android:windowIsTranslucent">true</item>
<!-- 是否有title -->
<item name="android:windowNoTitle">true</item>
<!--dialog背景 -->
<item name="android:background">@android:color/transparent</item>
<!-- 模糊 不设置背景不是半透明的 -->
<item name="android:backgroundDimEnabled">true</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowContentOverlay">@null</item>
</style>