导言

根据google的官方显示Android 4.0以上的设备已经有34.2%,由于国内很多的手机都没机会用上google play市场,所以国内市场的情况,得看类似于友盟的季度报告才知道了。个人觉得,Android 4.0以后设备才能有让人用的欲望,之前的版本受限于硬件,和系统的优化程度,个人觉得,除了打个电话、收个短信、看个微博、上个QQ以外,也没多大让人使用的价值了,至于原因,知道的都会知道,不知道也就不知道了。现在,硬件技术的发展,我们很方便就能购买到性能足够强劲、价格足够廉价的Android 4.0以后的手机和平板,那么,现在我们学习android 4.X的设计风格也算是不晚。

所谓类响应式设计

这篇文章的标题为类响应式设计,有做过web开发的应该都知道,所谓的响应式设计,就是一个网页能够根据是电脑的访问或者手机的访问进行的一个响应的显示,在google官方设计指导文档里面,也有相关的说明:http://developer.android.com/design/patterns/multi-pane-layouts.html, 相比web的响应式设计思想,在Android上使用这种思想,只能称作为类似而已,因为相比之下,web的终端复杂,Android就相对于比较简单,因为在Android上面你只需要考虑,简单的来说,就是什么时候显示一个pane,什么时候显示两个pane的问题而已。

设计的理论基础

要解决Android应用什么时候显示一个pane,什么时候显示两个pane,我们需要了解一些Android是如何解决各种分辨率下的兼容性问题。

在做桌面软件的时代,我们很少发现有人会吐槽不同分辨率下的情况,至于原因,我个人觉得,第一,电脑的分辨率很多,但是屏幕的dpi/ppi 其实都差不多,这就使以像素为单位的计量参数在不同屏幕下的其实显示区别不大;第二点,就是pc上的软件的窗口是可调节的,而手机或者平板上你很少看到 (当然,现在三星的一些Android设备支持这个)。但是,移动设备上就完全不同了,首先,产生兼容性的问题,根源在于对显示一个像素改多大的问题,在高密度的手机屏幕上,一个像素被显示的非常之小,那么我们假设用100个像素本来是想显示2厘米左右的长度,但是结果却只显示了1厘米;第二点就是,移动设备不支持窗口的缩放,如果我定义了一个100像素的单位,那就永远没有用户可以调节的空间。对于这个问题,其实Android官方已经提供了很好的解决方案,就是不依赖像素的计量单位,让系统根据屏幕密度来渲染像素。

一张图片:

一个公式:

px = dp * (dpi / 160)

如果,你是严格按照以上两点来设计你的程序的话,那你分辨率的兼容问题,你就不需要额外操心了。当然,要做到这点,需要在设计的时候操心。

Android程序的实现

上面讨论了一堆理论上的东西,估计大家都看烦了,那么在Android上具体是该怎么实现的呢?

设计规则

首先我们来看一张图:

从这张图里面我们可以大致了解到手机和平板的最简单的区别,就在于屏幕是否有一边大于 600dp,那么我们绘制一幅流程图:

显示一个pane,还是多个pane

如果,我们把平板和手机的设计,只是简单的认为是手机上显示一个pane,平板上显示多个pane,这也未免太过于肤浅了。

在web设计上,我们有个div的概念,对于这个概念,我们可以很平滑的过渡到我们Android应用的设计上。在android 4以后,实际上是Android 3以后,google意识到Android的平板的魅力不足以让我们专门针对平板再开发一次(例如iPad),所以引入了类似于web的设计方案,将每个view彻底的独立起来,让activity只是作为这些view的容器,在fragment推出以前,我们要做出设计,需要花很多的心力,因为我们需要自己手工维护实现每个view的生命周期,而有了fragment,我们就有了一套稳定的机制(有针对于android4以前的兼容包)。接下来,我们只需要考虑的是,我们的应用整个逻辑该怎么处理,在我研究了多个Android自适应的app以后,得出了一个关于 600dp的法则。

所谓600dp法则

我们从上边可以知道,手机与平板的区分点就是长或者高达到了600dp的大小,那么这个600dp究竟能做什么?首先,600dp是手机与平板的区分点,而手机与平板最大的不同就是一个屏幕能显示内容多少的问题。如果以手机的显示为一个pane单位,那么对于大于600dp而言,我们可以考虑在一个屏幕下放多一个pane。(关于为什么选择600dp可以参考诸多google android apps)

现在,我们以开源中国的客户端为例,来说说如何在实践中这个法则。

原版客户端在某手机上显示:

接着在某平板(宽超过 600dp)上显示:

我们会很容易的发现,在对于大于600dp的设备上来看的话,在屏幕利用率而言,远远不够。接下来我们针对这点进行600dp法则的使用,进行改版后的显示。

根据600dp法则改造后的显示:

关于横屏

我们都知道,手机横屏以后似乎多了不少空余的空间,那么我们是否可以考虑放多个pane呢?

首先,我们要考虑的是我们的应用针对的是平板还是手机,而不是关于如何利用好屏幕的空间,而这里600dp刚好是能区分手机和平板的最好的大小。如果你要考虑的是手机和平板的设计,你只需要考虑一个app在手机和平板上的不同点,如果你考虑的是如何利用好屏幕的使用率,请根据手机或者平板分别设计一套。

推荐读物

【编辑推荐】

【责任编辑:Pockey TEL:(010)68476606】

android 类的设计,Android App的类响应式设计相关推荐

  1. 什么是响应式设计?为什么要做响应式设计?响应式设计的基本原理是什么?...

    页面的设计和开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.css media query的使用等.无论用 ...

  2. 什么是响应式设计?为什么要做响应式设计?响应式设计的基本原理是什么?(十九)

    什么是响应式设计?为什么要做响应式设计?响应式设计的基本原理是什么? 页面的设计和开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包 ...

  3. html5响应式前端设计,15个最新的响应式设计前端框架

    你会发现,随着响应式Web设计的不断成熟,各类框架也变得越发健壮和可靠.也许是受到了Bootstrap.Foundation和Gumby的影响,如今很多新的框架都开始向一体化多功能的模式进化,它们提供 ...

  4. HTML学习笔记之类、布局、响应式设计(九)

    9.类.布局.响应式设计 9.1类 使用style标签设置样式颜色 div块儿级元素 <!--类 --> <html> <head> <style> . ...

  5. Windows10 UWP开发 - 响应式设计

    Windows10 UWP开发 - 响应式设计 原文:Windows10 UWP开发 - 响应式设计 Windows10 UWP开发 - 响应式设计 本篇随笔与大家简单讨论一下在开发适配不同分辨率.宽 ...

  6. 响应式设计和移动端优化:如何实现页面在不同设备上的适配和优化

    章节一:介绍响应式设计和移动端优化 响应式设计是一种使网页能够自适应不同设备和屏幕尺寸的设计方法.它通过使用流式网格布局.媒体查询和弹性图片等技术,使得网页能够在不同分辨率和设备上呈现出最佳的布局和用 ...

  7. (15):响应式设计

    响应式设计,响应式设计的基本原理 一.响应式设计是什么 1. 响应式网站设计(Responsive Web design) 是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平 ...

  8. 什么是响应式设计?响应式设计的基本原理是什么?如何做?

    响应式设计文章目录 1.响应式设计 2.基本原理 3.实现方式 4.总结 5.响应式布局的优缺点 1.响应式设计 是一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台,屏幕尺 ...

  9. android 图片轮播带缩略图,超酷响应式带缩略图的jQuery轮播图插件

    PgwSlideshow是一款非常实用的响应式.支持触摸屏的jQuery轮播图插件.该轮播图插件带有缩略图预览效果,可以根据容器的大小自适应图片的宽度.你也可以自定义轮播图的高度,图片宽度会根据高度等 ...

最新文章

  1. android 线程 wait notify
  2. 【转】java线程系列---Runnable和Thread的区别
  3. 适合写python的电脑_这篇写给想选计算机专业的学弟学妹们
  4. java shape用法_Java PShape.scale方法代码示例
  5. 10.12 telnet:远程登录主机
  6. 教你玩转CSS的所有字体,走过路过不要错过!!!
  7. mysql多实例配置安装_MySQL多实例安装配置方案
  8. 流程型企业SCM、ERP、MES、PCS如何集成?
  9. 自动化运维专题之zabbix课程内容大纲
  10. .net core sorteddictionary 排序_#键盘排序——为什么我们的键盘字母不是按照ABCD的顺序排列?...
  11. idea怎么集成svn服务端,使用Mac自带svn搭建服务器,并使用idea进行连接(示例代码)...
  12. 初中计算机考试办公软件office2003安装教程
  13. 大学生职业生涯规划计划与路径_大学生职业生涯的规划路径
  14. 亚马逊卖家运营必备八大工具
  15. 那些年,我们一起做过的 Java 课后练习题(71 - 75)
  16. 【Codevs 1376】帕秋莉•诺蕾姬
  17. 同样的计算机用户购买不同的,[单选] 下列组织的C%关系是()。
  18. Android开发笔记(序)写在前面的目录大全
  19. Java通过socket实现客户端和服务器端的通信
  20. ABAQUS三维骨料随机分布脚本(三种粒子,水泥沙子石子)

热门文章

  1. 学生信息管理系统c 语言程序设计报告,C语言程序设计报告(学生信息管理系统)[1].txt...
  2. 腾讯云 mysql 密码_腾讯云mysql重新设置密码解决办法
  3. 国家计算机二级access考试试题,全国计算机二级access试题及答案
  4. c语言中图像处理相关函数,C语言图像处理函数大全
  5. 川大计算机生物学怎么样,四川大学生物信息学初试经验分享
  6. php redis 设置,php设置redis扩展,你值得拥有
  7. python生成随机字符串包含数字字母_用大写字母和数字随机生成字符串
  8. java awt编程_java awt编程
  9. 小学生计算机课堂实践的重要性,小学《信息技术》有效课堂教学的实践与研究课题方案...
  10. db2嵌套查询效率_详解oracle嵌套循环及实例说明