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

释放双眼,带上耳机,听听看~!

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

   

基本思路是

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

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

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

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

 

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

 

上代码:

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

<LinearLayout
android:gravity="bottom"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button1"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="开始引导"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="结束引导(not first)"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</LinearLayout>

然后在写一个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<img.length-1){
i++;
}else if (i==10){
i=0;
windowManager.removeView(imgView);
}
}
});
}
public boolean isFirst() {
return isFirst;
}
public void setFirst(boolean isFirst) {
this.isFirst = isFirst;
}
}

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

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<img.length){
i++;
}
}
});
findViewById(R.id.button2).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
guideUtil.setFirst(false);
}
});
}
}

如果你点击了第二个按钮,则表示不是第一次进入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文章

android开发实现背景平铺的三种方法

2020-1-26 14:13:58

Android文章

Android开发Fragment与Activity之间的数据交互

2020-1-26 22:39:20

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索