android覆盖式引导

我们在开发产品的时候,每次发版可能会有一些新的功能需要引导用户使用,以前大部分都是使用截图,然后让设计师把引导的问题修饰好放到图上,现在这张图片就是引导图片,我们只需要用这张图片放到界面上,这样基本上就可以满足引导的作用.

但是这样的情况有个缺点,那就是,手机的分辨率太多,我们不可能每个分辨率都做一张图片,这样图片就会变形,有些引导操作的位置可能就不准确了,而且使用绘图的方式绘制在图片上的文字也会模糊不清.

基于如上的方式,我们可以使用另外一种方式来做引导,这样方式就是使用覆盖式的方式,主要的实现方式是

  1. 使用一个透明并且全屏的PopuWindow,这样我们就有一个可以显示向导
  2. 获取需要引导的View元素在屏幕上的位置,这样我们就可以准确的给这个View绘制引导信息
  3. 然后让PopuWindow显示出来,这样就可以看到我们的引导正好指向需要引导的位置

可以看下如下图的效果,这是实现的示例图.

可以看到,“查看帮助,了解更多”正好指向我们?图片操作按钮,位置很准确,文字也很清晰,并且这种方式实现的在所有分辨率上的手机上位置都是准确的,因为我们准确的获得了目标View的位置.

从上面的描述和效果图中我们也看到了一些关键点,比如全屏背景透明的PopuWindow,这个相信比较简单,宽高FILL_PARENT,背景设置为透明背景就好了.第二个就是目标View的位置,这个是比较难的,一般的引导我们都会在用户打开界面的时候显示,按说在Activity onCreate方法里调用最合适,但是这个时候我们的ContentVIew还没有测量绘制,所以我们根本不知道目标的位置.另外一个办法就是监听View层级的变化.

ViewTreeObserver observer view.getViewTreeObserver();
observer.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener(){
    public void onGlobalLayout(){
    //开始显示向导
  }
});

注册监听后,就可以在收到通知后进行显示向导,这时候每个View都已经测量布局好,可以获得他们的准确位置,获取View在屏幕上的位置通过public void getLocationOnScreen (int[] location)获取其在屏幕上的位置.

获取到这些VIew的位置后,就需要显示我们的引导了,PopuWindow可以设置一个ContentView,我们可以AbsoluteLayout作为ContentView,在这里绝对布局是最好的选择,因为我们获取的目标View的位置都是绝对的,所以使用绝对位置,通过x,y坐标就可以确定引导的位置.

接下来的事情就简单了,我们只需要显示PopuWindow就可以啦,然后控制好事件,比如用户点击的时候收起该引导,让用户继续正常使用产品.引导不能无休止的显示,我们可以通过配置来控制引导是否显示以及显示的次数等等.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏iOSDevLog

sketch入门第1部分:画板和形状Sketch使产品设计变得非常简单。准备好了吗?转到第2部分

今年,我在旧金山举行的大会上担任用户体验设计课程的助教。我在互联网上搜索了绝对初学者的素描教程,但是没有提到任何覆盖所有基础知识而没有提到Photoshop。所...

18020
来自专栏人云亦云

网页中内嵌字体

45460
来自专栏非著名程序员

通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout

? 特别喜欢稀土掘金个人界面的样子,那我们就来看看如何实现这个效果吧,要想实现这个效果,肯定需要的是Material Design风格,那就需要学会使用以下控...

30090
来自专栏IMWeb前端团队

div+css布局时常见bug总结

综述:虽然说被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼容各个浏览器,依然是不得不...

20670
来自专栏前端杂货铺

css截断长文本显示

实现 截断长文本显示处理,以前是通过后台的截取,但这种方法容易丢失数据,不利于SEO。 而通过前端css的截断,则灵活多变,可统一运用与整个网站。 这项技术主要...

37870
来自专栏二次元

CSS3随机背景图片切换特效

看大家扒我的幻想领域二次元限定版扒的比较累,扒了大半个小时的,抽空整理一下发出来

19530
来自专栏九彩拼盘的叨叨叨

学习前端 第1周 第3天

8140
来自专栏Python爬虫实战

数字华容道03:首页创建

整个布局采用 QVBoxLayout (竖型布局)。最上方的“数字华容道”字样是一张图片,采用QLabel进行展示。下面几个选择难度的按钮和排行榜按钮采用 QP...

10720
来自专栏前端说吧

前端切图-PhotoShop软件使用教程(png+jpg格式图片)

部分看了文章的设计师,来找我说怎么切图。sorry?在我的理解,这就是切图啊,但是他们所指的“切图”是,怎么把设计图制作成html页面。

267100
来自专栏拂晓风起

HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

1、js配合传统css属性控制,可以使用setTimeout或者高级的requestAnimationFrame

28710

扫码关注云+社区

领取腾讯云代金券