Android响应式布局

标签: Android 开发 安卓开发 布局 | 发表时间:2014-08-21 06:15 | 作者:chris
出处:http://blog.jobbole.com

由于目前在做的一款app需要适配手机和平板,所以我在研究怎么构建可适应所有屏幕尺寸的布局方法。

在web的响应式布局上我有很多经验,比如使用网格流,CSS3中的media queries属性等等,这些都可以实现web上的响应式布局,所以我想在Android上试试看。

在Android上,是通过 configuration qualifiers的方式来加载不同的资源,基于不同的手机屏幕尺寸或者屏幕的朝向(竖直还是水平),而我最大的目标就是创建一个可以自动缩放的布局,而不用根据不同的屏幕尺寸加载不同的布局文件。

除了为每种设备尺寸分别制作不同的布局文件外,我发现一种更简单的方法,就是为不同屏幕尺寸的设备重载 style.xml文件。

也许你会觉得它很像CSS样式,首先可以定义一个基本的style文件,代表普通设备尺寸,它的路径位于 values/styles.xml,然后还可以定义中等设备尺寸,在 values-sw600dp/styles.xml(7寸平板), values-sw600dp-land/styles.xml表示水平方向的屏幕, values-sw720dp/styles.xml表示十寸的平板等等。

在CSS中的响应式网格系统中,我们可以布局一个宽是960像素的 .container类(没有margin),而在手机上,我们也可以布局一个100%宽的 .container(也是没有margin的)。

我们可以在Android上使用相同的方法实现,首先,需要建立一个基类样式。

res/values/styles.xml

    <style name="Container">
    <item name="android:layout_margin">0dp</item>
    <item name="android:padding">16dp</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:orientation">vertical</item>
    <item name="android:background">@drawable/container_background</item>
    </style>

对于平板(竖直的)来说,我们可以添加一些外边距,因为屏幕够大。

res/values-sw600dp/styles.xml

    <style name="Container">
    <item name="android:layout_margin">0dp</item>
    <item name="android:padding">32dp</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:orientation">vertical</item>
    <item name="android:background">@drawable/container_background</item>
    </style>

在平板上竖直和水平的最大区别在于,我们会加上margin值,这样内容就不会充满整个屏幕了、我们还可以给父视图加一个背景图片,来填充空白区域。

res/values-sw600dp-land/styles.xml

    <style name="Container">
    <item name="android:layout_marginRight">130dp</item>
    <item name="android:layout_marginLeft">130dp</item>
    <item name="android:padding">32dp</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:orientation">vertical</item>
    <item name="android:background">@drawable/container_background</item>
    </style>

然后我们可以在不同的屏幕上,这样使用样式文件:

    <LinearLayout style="@style/Container">
    ... buttons, edit texts, text views, etc ...
    </LinearLayout>

这是在四寸屏幕手机的效果:

responsive_android_phone

这是在七寸平板上的效果:

responsive_android_tablet

这是在七寸平板的横屏效果:

responsive_android_tablet_landscape

还有一些在CSS里面非常方便的属性(比如bootstrap),它们是一些帮助类,如 .visible-phone, .hidden-phone, .visible-tablet等等,在Android上也可以这么做。

    <!-- Device Visibility -->
    <style name="PhoneOnly">
        <item name="android:visibility">gone</item>
    </style>
    
    <style name="TabletOnly">
        <item name="android:visibility">visible</item>
    </style>
    
    <style name="TabletPortraitOnly">
        <item name="android:visibility">gone</item>
    </style>
    
    <style name="TabletLandscapeOnly">
        <item name="android:visibility">visible</item>
    </style>

把这些样式放在对应的配置文件夹中,然后就可以在需要的时候隐藏显示相应的控件了。

    <LinearLayout android:id="@+id/column_one">
      ... some content ...
    </LinearLayout>
    
    <LinearLayout android:id="@+id/column_two"
      style="@style/TabletLandscapeOnly">
      ... some extra content since we have space ...
    </LinearLayout>

对于平板(水平的)来说,此样式会显示两列,但是对于大多数设备来说,第二列是不会显示的。

仅仅用了几行xml代码,我们就能够创建一个迷你的布局框架了,我们还可以扩展这种技术,根据需要去实现一个通用的样式文件,以后可以用到项目中。

很遗憾的是,很难把Android的资源打包进jar包中(非Gradle的话),所以在Android上很难像bootstrap那样去构建一个框架(不要被这些项目误导了 ,如: http://www.androidbootstrap.com/,它们没有你想象的那么强大),还好Android正在向Gradle迁移,这样可以使得制作Android前端的布局框架就更加方便了。

Android响应式布局,首发于 博客 - 伯乐在线

相关 [android 响应式 布局] 推荐:

Android响应式布局

- - 博客 - 伯乐在线
由于目前在做的一款app需要适配手机和平板,所以我在研究怎么构建可适应所有屏幕尺寸的布局方法. 在web的响应式布局上我有很多经验,比如使用网格流,CSS3中的media queries属性等等,这些都可以实现web上的响应式布局,所以我想在Android上试试看. 在Android上,是通过 configuration qualifiers的方式来加载不同的资源,基于不同的手机屏幕尺寸或者屏幕的朝向(竖直还是水平),而我最大的目标就是创建一个可以自动缩放的布局,而不用根据不同的屏幕尺寸加载不同的布局文件.

[原]响应式设计中怎样布局?

- - zuoninger的专栏
多栏布局中最大的挑战之一就是确保它能在各种各样的屏幕尺寸下正确工作. 简单来说,就是开发一个其文本、图像和其他的媒体能够适应任何移动设备、桌面计算机或一些未来设备的浏览器体验. 在智能手机移动浏览器中看到的网页与在桌面浏览器中看到的不同,这是因为手机屏幕更小. 如果想要在小屏幕上查看单栏中的文字或图像,你必须双击这个区域(见图12.23).

浅析jQuery EasyUI响应式布局的实现方案

- - WebUI框架使用参考
首先解释一下本篇文章标题中提到的“jQuery EasyUI响应式布局”,这里是指EasyUI里布局类组件的fit属性,也就是实现自适应的属性. 到了1.4版本,新增了一个宽度百分比的概念,既可以用在布局类组件上,也可用在表单类组件上,但是其实现方案跟fit是类似的. 也就是说,jQuery EasyUI的自适应布局包含两块内容:.

Android的UI布局总览

- - 博客园_首页
                  android布局的目的是为了实现不同屏幕比例适配而设计的,有五种布局类:FrameLayout、LinearLayout、AbsoluteLayout、RelativeLayout和TableLayout. 五大布局类的继承关系如下(以FrameLayout为例):.

Android 布局之线性布局、相对布局、表格布局、帧布局

- - CSDN博客推荐文章
1、LinearLayout(线性布局). 2、RelativeLayout(相对布局). 3、TableLayout(表格布局 两行两列). 4、FrameLayout(帧布局)显示控件会进行叠加,后者会叠加在前者之上. 作者:h7870181 发表于2012-11-7 22:28:59 原文链接.

Profound Grid:实现固定和流动布局的响应式网格系统

- - 博客园_梦想天空
Profound Grid 是一个实现固定和流动布局的网格系统. 内置 SCSS,带给你灵活性和全面的控制. 你可以让让个流动或者固定,还可以根据需要为每个媒体添加布局. 更改列和间隔宽度,并根据需要删除或添加列. 2012年最佳的15个 CSS3 教程推荐. 35个让人惊讶的 CSS3 动画效果演示.

超酷的响应式dribbble设计作品瀑布流布局效果

- - 前端观察
相信做设计的朋友肯定都知道 dribbble.com,它是一个非常棒的设计师分享作品的网站,全世界数以万计的设计高手和行家都在这个网站上分享自己的作品,当然,如果你常在上面闲逛的话,经常得到一些免费的好东西. 在今天的这篇jQuery教程中,我们将使用jQuery的几个插件来开发一个响应式的瀑布流应用,这个应用可以帮助你实时的从dribbble上得到最流行的设计作品,我们将使用如下几个插件:.

Android学习笔记之布局

- - CSDN博客推荐文章
我们对Android应用程序运行原理及布局文件可谓有了比较深刻的认识和理解,并且用“Hello World. 在继续深入 Android开发之旅之前,有必要解决前两篇中没有介绍的遗留问题:View的几种布局显示方法,以后就不会在针对布局方面做过多的介绍. View的布局显示方式有下面几种: 线性布局(Linear Layout)、 相对布局(Relative Layout)、 表格布局(Table Layout)、 网格视图(Grid View)、 标签布局(Tab Layout)、 列表视图(List View)、 绝对布局(AbsoluteLayout).

10款非常有效的帮助你设计超酷响应式布局的jQuery插件

- - 博客园_首页
日期:2012/02/24  来源: GBin1.com. 如 果你关注最近几年的web设计,那么响应式布局(responsive layout)设计对于你来说肯定不是一个陌生的词汇. 相对于传统的页面设计来说,今天的设计者需要考虑的用户来源和用户体验对于设计者来说是一个非常大的挑战,因为随着硬件的更新,新设备的出现,你需要能够 使得你的网站能够针对不同的设置做出最好显示响应.

android 使用html5作布局文件: webview跟javascript交互

- - 移动开发 - ITeye博客
android 使用html5作布局文件 http://www.cnblogs.com/andgoo/archive/2011/10/11/2207936.html. Android中webview跟JAVASCRIPT中的交互 http://www.oschina.net/question/4873_27156.