通過Dialog來展示新手指引蒙層
阿新 • • 發佈:2018-11-22
以前展示新手指引蒙層的方式都是在Activity基類的根佈局中疊加上一個全屏的ImageView,然後在條件成立的時候設定蒙層並顯示,這裡介紹一種通過Dialog來展示的方式,用起來比較靈活.
先看dialog的佈局,其實就是一個ImageView
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/iv_img" android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/ic_add_wish_suc"/> </android.support.constraint.ConstraintLayout>
然後是自定義Dialog
package blog.csdn.net.mchenys; import android.app.Activity; import android.app.Dialog; import android.content.Context; import android.graphics.drawable.ColorDrawable; import android.support.annotation.NonNull; import android.view.View; import android.view.Window; import android.view.WindowManager; import android.widget.ImageView; import blog.csdn.net.mchenys.R; import blog.csdn.net.mchenys.utils.UIUtils; /** * Created by mChenys on 2018/10/30. */ public class GuideDialog extends Dialog implements View.OnClickListener { private ImageView mGuideView; private int[] imageIds;//多張引導圖陣列 private int currPosition;//當前顯示第幾個引導圖 public GuideDialog(@NonNull Context context, int id) { this(context, new int[]{id}); } public GuideDialog(@NonNull Context context, int[] ids) { super(context); setContentView(R.layout.dialog_guide); Window window = getWindow(); window.setBackgroundDrawable(new ColorDrawable(0));//佈局背景透明 WindowManager.LayoutParams lp = window.getAttributes(); lp.width = context.getResources().getDisplayMetrics().widthPixels; //寬度=螢幕寬度 lp.height = context.getResources().getDisplayMetrics().heightPixels;//高度=螢幕高度 lp.dimAmount = 0; window.setAttributes(lp); setCanceledOnTouchOutside(false); this.imageIds = ids; mGuideView = findViewById(R.id.iv_img); mGuideView.setImageResource(imageIds[0]); mGuideView.setOnClickListener(this); //由於切圖是全屏的包括了狀態列,所以圖片內容要往上偏移一個狀態列的距離 mGuideView.scrollBy(0,UIUtils.getStatusBarHeight(context)); } @Override public void show() { //獲取dialog依賴的Activity Activity activity = UIUtils.scanForActivity(getContext()); if (!isShowing() && null != activity && !activity.isFinishing()) { super.show(); } } @Override public void onClick(View v) { if (++currPosition < imageIds.length) { //點選切換顯示下一個引導圖 mGuideView.setImageResource(imageIds[currPosition]); } else { //沒有下一張時隱藏dialog dismiss(); } } }
工具類UIUtils#scanForActivity
package blog.csdn.net.mchenys.utils; import android.app.Activity; import android.content.Context; import android.content.ContextWrapper; /** * Created by mChenys on 2018/10/30. */ public class UIUtils { public static Activity scanForActivity(Context cont) { if (cont == null) return null; else if (cont instanceof Activity) return (Activity)cont; else if (cont instanceof ContextWrapper) return scanForActivity(((ContextWrapper)cont).getBaseContext()); return null; } /** * 獲取狀態列高度/畫素 * * @return */ public static int getStatusBarHeight(Context context) { Class<?> c = null; Object obj = null; Field field = null; int x = 0, statusBarHeight = 0; try { c = Class.forName("com.android.internal.R$dimen"); obj = c.newInstance(); field = c.getField("status_bar_height"); x = Integer.parseInt(field.get(obj).toString()); statusBarHeight = context.getResources().getDimensionPixelSize(x); } catch (Exception e1) { e1.printStackTrace(); } return statusBarHeight; } }
使用方式,直接在需要用到的地方呼叫一行程式碼即可:
new GuideDialog(context, R.drawable.ic_guide_01).show();
如果有多個引導圖,依次點選顯示下一張的話就傳入一個數組即可
new GuideDialog(context,new int[]{
R.drawable.guide_01,
R.drawable.guide_02,
R.drawable.guide_03
} ).show();