android 半透明图层用户引导、用户指导、用户教导,教用户怎么使用app的页面制作

开写前先上图,很多app在第一次进入的时候都会有“点这里,点这里”这样的用户提示作为引导用户使用的教程,那么如何制作这样的app教程呢?接下来一步步解析:

android 半透明图层用户引导、用户指导、用户教导,教用户怎么使用app的页面制作_第1张图片 android 半透明图层用户引导、用户指导、用户教导,教用户怎么使用app的页面制作_第2张图片 android 半透明图层用户引导、用户指导、用户教导,教用户怎么使用app的页面制作_第3张图片 android 半透明图层用户引导、用户指导、用户教导,教用户怎么使用app的页面制作_第4张图片

基本思路是

1、在当前屏幕获取WindowManager新创建一个适合屏幕大小的ImageView

2、把ImageView的背景换成引导图

3、点击引导图的时候消失(显示正常的activity界面)

4、如果用户不是第一次进入,则不显示引导页


此demo只是我在项目中的一部分,仅仅用来演示原理和效果


上代码:

首先在布局文件中添加了两个按钮:



        

然后在写一个GuidUitl类,方便在各Activity中调用

public class GuideUtil {
	private Context context;
	private ImageView imgView;
	private WindowManager windowManager;
	private static GuideUtil instance = null;
	/** 是否第一次进入该程序 **/
	private boolean isFirst = true;

	private int i =0;


	int img[] = new int[]{R.mipmap.num1,R.mipmap.num2,R.mipmap.num3,R.mipmap.num4,R.mipmap.num5,R.mipmap.num6,R.mipmap.num7,R.mipmap.num8,R.mipmap.num9,R.mipmap.num10,R.mipmap.num11};



	private GuideUtil() {
	}

	public static GuideUtil getInstance() {
		synchronized (GuideUtil.class) {
			if (null == instance) {
				instance = new GuideUtil();
			}
		}
		return instance;
	}

	private Handler handler = new Handler(Looper.getMainLooper()) {
		public void handleMessage(android.os.Message msg) {
			switch (msg.what) {
			case 1:
				// 设置LayoutParams参数
				final LayoutParams params = new WindowManager.LayoutParams();
				// 设置显示的类型,TYPE_PHONE指的是来电话的时候会被覆盖,其他时候会在最前端,显示位置在stateBar下面,其他更多的值请查阅文档
				params.type = WindowManager.LayoutParams.TYPE_PHONE;
				// 设置显示格式
				params.format = PixelFormat.RGBA_8888;
				// 设置对齐方式
				params.gravity = Gravity.LEFT | Gravity.TOP;
				// 设置宽高
				params.width = ScreenUtils.getScreenWidth(context);
				params.height = ScreenUtils.getScreenHeight(context);
				// 设置动画
				params.windowAnimations = R.style.view_anim;

				// 添加到当前的窗口上
				windowManager.addView(imgView, params);
				break;
			}
		};
	};

	public void initGuide(Activity context, int mipmapRourcesId) {
		if (!isFirst) {
			return;
		}
		this.context = context;
		windowManager = context.getWindowManager();

		// 动态初始化图层
		imgView = new ImageView(context);
		imgView.setLayoutParams(new LayoutParams(
				android.view.ViewGroup.LayoutParams.MATCH_PARENT,
				android.view.ViewGroup.LayoutParams.MATCH_PARENT));
		imgView.setScaleType(ScaleType.FIT_XY);
		imgView.setImageResource(mipmapRourcesId);
		handler.sendEmptyMessage(1);

		// 点击图层之后,将图层移除
		imgView.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View arg0) {
//				windowManager.removeView(imgView);//这句话是移除当前ImageView的
				imgView.setImageResource(img[i]);
				if (i

报错了对不对?因为里面有一个获取屏幕宽高参数的类还没写呢,接下来我们就写它:

public class ScreenUtils {
	public static DisplayMetrics getDisPlayMetrics(Context context) {
		DisplayMetrics metric = new DisplayMetrics();
		if (null != context) {
			((Activity) context).getWindowManager().getDefaultDisplay()
					.getMetrics(metric);
		}
		return metric;
	}
	public static int getScreenWidth(Context context) {
		int width = getDisPlayMetrics(context).widthPixels;
		return width;
	}
	public static int getScreenHeight(Context context) {
		int height = getDisPlayMetrics(context).heightPixels;
		return height;
	}
	public static float getDensity(Context context) {
		float density = getDisPlayMetrics(context).density;
		return density;
	}
	public static int getDensityDpi(Context context) {
		int densityDpi = getDisPlayMetrics(context).densityDpi;
		return densityDpi;
	}

}

接下来来实现我们的MainActivity

public class MainActivity extends AppCompatActivity {

    private GuideUtil guideUtil = null;
    private int i =0;


    int img[] = new int[]{R.mipmap.num1,R.mipmap.num2,R.mipmap.num3,R.mipmap.num4,R.mipmap.num5,R.mipmap.num6,R.mipmap.num7,R.mipmap.num8,R.mipmap.num9,R.mipmap.num10,R.mipmap.num11};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        ActionBar actionBar = getActionBar();
//        actionBar.hide();
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_main);

        //如果activity只需要一张引导图,则用下面两行代码就可以了
        guideUtil = GuideUtil.getInstance();
        guideUtil.initGuide(MainActivity.this, img[10]);


        findViewById(R.id.button1).setOnClickListener(new View.OnClickListener() {

            @Override
            public void onClick(View v) {
                guideUtil.initGuide(MainActivity.this, img[i]);
                if (i

如果你点击了第二个按钮,则表示不是第一次进入app,那么就不会出来引导页了,这个时候结束app,重新进入就行。


同学们,重点来了,高考要考的!记住了:

千万别忘记在AndroidManifest.xml文件中加入以下权限:

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

啊,项目到这里就结束了,由于楼主近期需要用到一点分,但是之前的DEMO一直是免费的,所以在这里下载收1分

满10分之后我就免费。谢谢小伙伴们~



源码点此下载

http://download.csdn.net/download/qq_24531461/9730304


你可能感兴趣的:(Android)