- 浏览: 247863 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
tanglingshuai:
liulehua 写道根本原因是:没有把该对象对应的主键保存到 ...
关于: org.hibernate.StaleStateException: Batch update -
javeye:
转载了你的文章http://javeye.iteye.com/ ...
关于在tomcat下配置 error-page 500错误不能在IE下转发页面的问题 -
imlsq:
嘿嘿, 使用SEAM 7-8个月时间了还是放弃使用SEAM的想 ...
发现一个Seam做的企业应用,blackberry的在线商店 -
yuanliyin:
我也在用,唯一不爽的就是性能!
发现一个Seam做的企业应用,blackberry的在线商店 -
perfect:
假的 ,大家不要上当 ,根本不能用
HttpWatch 6.1.41 许可文件
支持各种尺寸的屏幕
课程内容
- 使用”wrap_content”和”match_parent”
- 使用RelativeLayout
- 使用尺寸限定符
- 使用Smallest-width限定符
- 使用Layout别名
- 使用方向限定符
- 使用Nine-patch格式图片
您还应该阅读
动手试试
NewsReader.zip
该课程将告诉您如何通过如下方式来支持各种尺寸的屏幕:
- 确保您的布局可以改变大小来填充整个屏幕
- 根据屏幕的配置来显示不同的布局
- 确保布局应用到对应的屏幕上
- 使用能正确缩放的图片
使用”wrap_content”和”match_parent”
要确保您的布局是弹性的并且可以适应各种尺寸的屏幕,你应该使用"wrap_content"
和"match_parent"
来设置一些控件的宽高。如果使用"wrap_content"
,控件的宽度和高度将会设置为能够显示该控件内容的最小尺寸;而当你使用"match_parent"
(在API level 8之前被称之为"fill_parent"
)的时候,控件的高度和宽度将和父控件的大小一样。
当使用"wrap_content"
和
"match_parent"
来代替具体的大小数字的时候,您的控件要么只使用能显示其内容的最小尺寸或者填充整个能用的空间。下面是一个示例:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:id="@+id/linearLayout1" android:gravity="center" android:layout_height="50dp"> <ImageView android:id="@+id/imageView1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/logo" android:paddingRight="30dp" android:layout_gravity="left" android:layout_weight="0" /> <View android:layout_height="wrap_content" android:id="@+id/view1" android:layout_width="wrap_content" android:layout_weight="1" /> <Button android:id="@+id/categorybutton" android:background="@drawable/button_bg" android:layout_height="match_parent" android:layout_weight="0" android:layout_width="120dp" style="@style/CategoryButtonStyle"/> </LinearLayout> <fragment android:id="@+id/headlines" android:layout_height="fill_parent" android:name="com.example.android.newsreader.HeadlinesFragment" android:layout_width="match_parent" /> </LinearLayout>
注意示例中的代码是如何使用
"wrap_content"
和
"match_parent"
而不是使用具体的数值来指定控件的大小。这样布局就可以根据不同的屏幕尺寸和方向来自适应显示界面。
下图是该布局在横向或者纵向的情况下的显示情况,注意 控件的宽度和高度自动的适应屏幕的尺寸:
使用 RelativeLayout
通过"wrap_content"
和
"match_parent"
以及嵌套使用多个LinearLayout
您可以实现各种复杂的布局。然而,LinearLayout
不允许精确的控制子控件之间的关系;在LinearLayout
里面的控件只是一个挨着一个去布局的。如果您不想让控件只是排成一行或者一列,使用
RelativeLayout
是一个更好的选择,该布局可以指定子控件之间的相对位置。例如,你可以指定一个子控件位于屏幕的左边而另外一个位于屏幕的右边。
示例
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/label" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Type here:"/> <EditText android:id="@+id/entry" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/label"/> <Button android:id="@+id/ok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/entry" android:layout_alignParentRight="true" android:layout_marginLeft="10dp" android:text="OK" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toLeftOf="@id/ok" android:layout_alignTop="@id/ok" android:text="Cancel" /> </RelativeLayout>
下图显示了该布局在QVGA屏幕上的界面
在大屏幕上的界面
注意:尽管控件的大小改变了, 但是他们之间的相对位置通过RelativeLayout.LayoutParams
定义为一样。
使用尺寸限定符
您可以通过前面的方法实现各种各样的自适应布局和相对布局。但是这种布局只是通过把控件拉伸或者拉伸控件周围的空间,对于大小不同的屏幕并没有提供最优的用户体验。因此,您的程序应该不仅仅只是实现自适应的布局,还应该根据不同的屏幕配置分别提供更加友好的布局。通过配置限定符 可以实现这个优化,这样在运行时系统会自动的选择适合当前设备的布局和资源(例如:针对不同屏幕使用不同的布局)。
例如,很多程序在大屏幕设备上使用“两个窗口”布局模式(程序可以在一个窗口中显示一个列表而在另外一个窗口中显示列表中选中的内容)。平板设备和电视剧的屏幕足够用来同时显示两个窗口,但是手机设备就只能分别显示他们了。因此,要实现这种布局,您需要使用如下的文件:
-
res/layout/main.xml
, 单个窗口(默认)布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <fragment android:id="@+id/headlines" android:layout_height="fill_parent" android:name="com.example.android.newsreader.HeadlinesFragment" android:layout_width="match_parent" /> </LinearLayout>
-
res/layout-xlarge/main.xml
, 两个窗口布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal"> <fragment android:id="@+id/headlines" android:layout_height="fill_parent" android:name="com.example.android.newsreader.HeadlinesFragment" android:layout_width="400dp" android:layout_marginRight="10dp"/> <fragment android:id="@+id/article" android:layout_height="fill_parent" android:name="com.example.android.newsreader.ArticleFragment" android:layout_width="fill_parent" /> </LinearLayout>
注意上面的文件夹中的xlarge
限定符,这个文件夹里面的布局只会用到屏幕尺寸为超级大(例如:10寸的平板)的设备中。其他的布局(没有限定符的)将会用于小屏幕的设备中。
使用 Smallest-width 限定符
在Android 3.2之前的版本上,开发者可能有点郁闷,应为之前的“large”限定符包含的尺寸太宽泛了,例如 Dell Streak、Galaxy 平板、以及7寸的平板。但是很多开发者都想在这个范围内根据不同的具体屏幕尺寸来显示不同的布局(例如 5寸和7寸的设备)。在Android 3.2版本中引入 “Smallest-width”限定符就是为了解决这个问题的。
Smallest-width限定符可以让你指定目标设备的最少屏幕尺寸(单位是dp)。例如,普通的7寸平板的最小宽度是600dp,因此如果你希望你的程序在这种尺寸的屏幕上使用两个窗口(小于该尺寸的屏幕使用一个窗口),那么您可以使用上面的两个布局文件,只要把xlarge
限定符替换为sw600dp
即可, 可以看出在3.2+版本中,对屏幕的限定更加详细了。
-
res/layout/main.xml
, 一个窗口(默认)布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <fragment android:id="@+id/headlines" android:layout_height="fill_parent" android:name="com.example.android.newsreader.HeadlinesFragment" android:layout_width="match_parent" /> </LinearLayout>
-
res/layout-sw600dp/main.xml
, 两个窗口布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal"> <fragment android:id="@+id/headlines" android:layout_height="fill_parent" android:name="com.example.android.newsreader.HeadlinesFragment" android:layout_width="400dp" android:layout_marginRight="10dp"/> <fragment android:id="@+id/article" android:layout_height="fill_parent" android:name="com.example.android.newsreader.ArticleFragment" android:layout_width="fill_parent" /> </LinearLayout>
上面的代码意味着,只要最小屏幕宽度大于等于600dp的设备都会使用layout-sw600dp/main.xml
这个两个窗口布局,而小于该尺寸的设备就用layout/main.xml
一个窗口的布局。
但是,这样在3.2之前的版本没法使用,因为他们不认识sw600dp
这个限定符,这样您还是要同时使用xlarge
限定符。这样您的res/layout-xlarge/main.xml
文件和res/layout-sw600dp/main.xml
文件的内容是一样的。在下一个小节中,您会看到一种技术可以让你避免这种内容一样的布局文件出现。
使用布局别名
上面看到的Smallest-width限定符只适用于3.2+的设备,因此您还需要同时使用(small, normal,large and xlarge)这些限定符来让您的程序运行在3.2之前的系统中。例如:如果你想设计一个界面,在手机中显示一个窗口,而在7寸平板或者更大的设备中显示两个窗口,您需要这些布局文件:
-
res/layout/main.xml:
单个窗口布局 -
res/layout-xlarge:
两个窗口布局 -
res/layout-sw600dp:
两个窗口布局
后面的两个布局文件是一样的,一个是用于3.2+设备的;一个用于之前的设备的。
为了避免这种布局文件的重复,并且维护起来也很麻烦,您可以使用别名文件。例如您可以定义如下的布局文件:
-
res/layout/main.xml
, 单个窗口布局 -
res/layout/main_twopanes.xml
, 两个窗口布局
布局文件内容:
-
res/values-xlarge/layout.xml
<resources> <item name="main" type="layout">@layout/main_twopanes</item> </resources>
-
res/values-sw600dp/layout.xml
-
<resources> <item name="main" type="layout">@layout/main_twopanes</item> </resources>
- 这两个文件内容是一样的,但是他们实际上并没有定义布局。他们仅仅设置了
main
为main_twopanes
的一个别名。既然该布局文件有xlarge
和sw600dp
这两个限定符,这样不管系统的版本是3.2之前的还是之后的,满足尺寸要求的都会使用该布局。
使用方向限定符
有些布局在横向和纵向屏幕中都表现很好,但是有些可以稍作修改从而提升用户体验。在新闻阅读示例程序中,下面展示了在不同的屏幕尺寸和屏幕方向中使用的布局:
- 小屏幕 纵向: 带Logo的单个窗口
- 小屏幕 横向: 带Logo的单个窗口
- 7寸平板, 纵向: 有动作条的单个窗口
- 7寸平板, 横向: 有动作条的两个宽窗口
- 10寸平板, 纵向: 有动作条的两个窄窗口
- 10寸平板, 横向: 有动作条的两个宽窗口
每个布局都在res/layout/
目录中定义了一个布局文件。通过布局别名来影射的不同的配置项中的:
res/layout/onepane.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <fragment android:id="@+id/headlines" android:layout_height="fill_parent" android:name="com.example.android.newsreader.HeadlinesFragment" android:layout_width="match_parent" /> </LinearLayout>
|
res/layout/onepane_with_bar.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:id="@+id/linearLayout1" android:gravity="center" android:layout_height="50dp"> <ImageView android:id="@+id/imageView1" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/logo" android:paddingRight="30dp" android:layout_gravity="left" android:layout_weight="0" /> <View android:layout_height="wrap_content" android:id="@+id/view1" android:layout_width="wrap_content" android:layout_weight="1" /> <Button android:id="@+id/categorybutton" android:background="@drawable/button_bg" android:layout_height="match_parent" android:layout_weight="0" android:layout_width="120dp" style="@style/CategoryButtonStyle"/> </LinearLayout> <fragment android:id="@+id/headlines" android:layout_height="fill_parent" android:name="com.example.android.newsreader.HeadlinesFragment" android:layout_width="match_parent" /> </LinearLayout>
res/layout/twopanes.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal"> <fragment android:id="@+id/headlines" android:layout_height="fill_parent" android:name="com.example.android.newsreader.HeadlinesFragment" android:layout_width="400dp" android:layout_marginRight="10dp"/> <fragment android:id="@+id/article" android:layout_height="fill_parent" android:name="com.example.android.newsreader.ArticleFragment" android:layout_width="fill_parent" /> </LinearLayout>
res/layout/twopanes_narrow.xml
:
现在所有的布局文件都定义好了,只要使用配置限定符做好影射即可,通过布局别名很容易实现:
res/values/layouts.xm
<resources> <item name="main_layout" type="layout">@layout/onepane_with_bar</item> <bool name="has_two_panes">false</bool> </resources>
res/values-sw600dp-land/layouts.xml
<resources> <item name="main_layout" type="layout">@layout/twopanes</item> <bool name="has_two_panes">true</bool> </resources>
res/values-sw600dp-port/layouts.xml
<resources> <item name="main_layout" type="layout">@layout/onepane</item> <bool name="has_two_panes">false</bool> </resources>
res/values-xlarge-land/layouts.xml
<resources> <item name="main_layout" type="layout">@layout/twopanes</item> <bool name="has_two_panes">true</bool> </resources>
res/values-xlarge-port/layouts.xml
<resources> <item name="main_layout" type="layout">@layout/twopanes_narrow</item> <bool name="has_two_panes">true</bool> </resources>
使用Nine-patch格式图片
支持不同尺寸的屏幕也意味着在不同的屏幕上使用不同大小的图片。例如,一个按钮的背景图片在任何尺寸的按钮上都应该是差不多的。
如果您在能改变大小的控件上使用同一个图片,你将会发现这些图片将会被缩放,看起来有点毛毛糙糙。而Android系统中的nine-patch格式图片就解决了这个问题。
要让一个普通的图片转换为nine-patch格式的,如下图(为了清楚的演示,该图被放大了4倍)
通过Android SDK中的
draw9patch
工具(在tools/
目录中)编辑,详情请参考这篇详细介绍
,如下图:
注意 边框上的黑色像素点。左边和上边的黑点定义了图片可以被拉伸的地方,右边和下边的黑点定义了控件内容可以显示的地方。
同时也要注意图片的扩展名为.9.png
。只有这种格式的图片系统才认为是nine-patch格式的。
如果您使用该图片作为控件的背景(代码android:background="@drawable/button"
),系统会自动的拉伸响应的地方,如下图所示:
发表评论
-
地铁/公交英语助手介绍 — 谷嘀微英语和单词卡片
2012-10-23 19:10 1001谷嘀微英语和谷嘀单词卡片是一个用来每日学英语的工具,每天从最热 ... -
如何保证Android设备的安全性
2012-03-13 21:00 1213如何保证Android设备的安全性 电子设备(主要指电 ... -
如何使用APK扩展文件
2012-03-06 18:34 3248要在App中使用扩展文件,需要两个附加的Android库项 ... -
APK扩展文件
2012-03-06 18:33 2085Android平台每个APK文件 ... -
Android 购机须知
2012-02-22 21:20 920在介绍之前先说说自己的手机经验,在毕业后购买了一个Nok ... -
获取某一位置的经纬度信息
2012-02-17 21:27 1626在移动App程序中,有些情况下需要获取某一位置的经纬度信息 ... -
课程一 为各种屏幕尺寸做设计
2011-12-19 19:31 1011导言: 该系列文章是翻译Android官方培训中心的课程,供大 ...
相关推荐
做工程设计时经常要知道显示器或者电视机大概尺寸,该工具可根据我们所说的XX寸计算出显示面的宽X高.更具体数据需查询相关资料得出实际XX寸. 需 .net 2.0 支持.
编码UTF-8;我们在ZOL上可以通过“参数”查看知名设备的信息,但如果客户寄给你一个他们自己定制的平板,通过“设置”也看不到你想要的信息, ...此Demo提供了获取设备的分辨率、屏幕尺寸和屏幕像素密度(PPL)的方式。
屏幕刻度尺可以用来测量屏幕上的物体尺寸,支持物理尺寸测量。在使用物理尺寸前,通过校正来实现真实的刻度尺。 挺不错的,大家可以下来用用。
源码参考,欢迎下载
自适应 适配各种大小尺寸屏幕(大概 表情功能 应该是目前所有用心主题的标配了 回复可见功能 文章内设置后,游客或者其他用户需要评论才能看到隐藏内容,文章作者则可以直接观看 代码高亮 支持常见语法的高亮,并...
AutoLayout-Android, 支持多个屏幕的简单方法 面向Android的自动...自动调整大小:每次使用屏幕尺寸时,写入。。自定义自适应策略。支持的纵横比。这里项目是来自 hongyangandroid/androidautolayout的分支,但不同。
支持单词自动完成,当你键入每个单词时,程序可为你提供以这些字母开头的已知单字清单。可以编辑键盘类型,你可以在键盘类型设置窗口中建立任何类型的键盘。 研究已有的键盘类型以便理解设置原理。 你可以通过在按...
有流行CRTTelnet客户机的所有特点,包括:自动注册、对不同主机保持不同的特性、打印功能、颜色设置、可变屏幕尺寸、用户定义的键位图和优良的VT100,VT102,VT220和ANSI竞争.能从命令行中运行或从浏览器中运行.其它特点...
常用的网页制作小工具,取色器可以获取任意点的颜色,屏幕像素测量尺可以测量网页中的元素像素大小,截图支持滚动截图并且支持编辑修改等简单的图像编辑,这些都是常用的网页制作工具,很实用哦~
靖源屏幕录像机是一款用来录制屏幕为avi动画的软件,支持录制正在播放的声音、麦克风,支持捕捉正在播放的视频,您甚至可以当作一个录音机来使用。输出为avi格式,支持mpeg4压缩。在有些机器上可能会有些问题,解决办法...
FastStone Capture (FSCapture) 是经典好用的屏幕截图软件,还具有图像编辑和屏幕录制两大功能,可以捕捉全屏图像,或者活动窗口、窗口内的控件对象截图、支持手绘区域自由截图,或者滚动窗口等等,支持所有主流图片...
示例 Android 项目,用于学习如何支持具有不同屏幕尺寸、密度和方向的设备。 如果 Android Studio 布局预览默认显示错误,则按如下方式编辑res/values/styles.xml :将:<style name="AppTheme" parent="Theme....
PowerStrip 是一款功能非常强悍的显示卡/屏幕功能配置工具,它提供诸如调整桌面尺寸、屏幕更新频率、放大缩小桌面、屏幕位置调整、桌面字型调整、鼠标游标放大缩小、图形与显卡系统信息、显卡运行性能调整等功能。...
计算屏幕尺寸和分辨率。 屏幕尺寸是UI设计人员或工程师的便捷工具。以像素为单位输入屏幕尺寸,以英寸为单位输入对角线,以英寸/厘米为单位输入屏幕尺寸,以ppi为单位输入分辨率。包括常见的屏幕尺寸。 支持语言:...
Android 屏幕自适应方向尺寸与分辨率,包括屏幕界面布局、多分辨率支持、获取屏幕尺寸、屏幕横屏与竖屏等,android 模拟器横屏,android 虚拟机横屏,android 判断横屏,android 禁止横屏,android 强制横屏,...
WinCam 设计尽可能简单,功能齐全,几乎可用于任何用途:录制视频教程,保存 Skype 电话,实时捕捉各种媒体,只需按一下按钮即可创建视觉内容。 选择所需的视频源和效果,单击“录制”按钮并照常进行:在任何应用...
PowerStrip(显卡屏幕配置)功能非常强大的显示卡/屏幕功能配置工具,诸如调整桌面尺寸、屏幕更新频率、放大缩小桌面、屏幕位置调整、桌面字型调整、鼠标游标放大缩小、图形与显示卡系统资讯、显示卡执行效能调整等;...
您可以直接在大多数 Windows 桌面应用程序上绘制,...与绘图板和其他压力输入设备一起使用时,笔刷尺寸具有完整的笔压力支持。 触摸兼容 多点触控输入 支持触摸的设备的最终伴侣,包括交互式白板和 Windows 平板电脑。
首先,我们的安卓项目源码提供了丰富的功能和模块,可以满足各种类型的安卓应用需求。无论是社交、娱乐、教育还是商务,我们的项目源码都提供了相应的功能和界面设计,使得开发人员可以快速构建符合需求的安卓应用。...
以及四分屏幕的尺寸位置编辑 根据实际屏幕重构布局8K视频硬解码 支持硬解码,充分利用显卡GPU硬件解码,释放CPU占有率,播控更大分辨率更多数量的媒体素材主备/主从同步 两台笔记本网线连接,主备模式实时同步播控...