【移动应用开发技术】怎么在Android中自适应不同大小的屏幕_第1页
【移动应用开发技术】怎么在Android中自适应不同大小的屏幕_第2页
【移动应用开发技术】怎么在Android中自适应不同大小的屏幕_第3页
【移动应用开发技术】怎么在Android中自适应不同大小的屏幕_第4页
【移动应用开发技术】怎么在Android中自适应不同大小的屏幕_第5页
已阅读5页,还剩10页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

【移动应用开发技术】怎么在Android中自适应不同大小的屏幕

怎么在Android中自适应不同大小的屏幕?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面在下将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。使用"wrap_content"和"match_parent"。

为了确保你的布局能够自适应各种不同屏幕大小,你应该在布局的视图中使用"wrap_content"和"match_parent"来确定它的宽和高。如果你使用了"wrap_content",相应视图的宽和高就会被设定成刚好能够包含视图中内容的最小值。而如果你使用了"match_parent"(在AndroidAPI8之前叫作"fill_parent"),就会让视图的宽和高延伸至充满整个父布局。通过使用"wrap_content"和"match_parent"来替代硬编码的方式定义视图大小,你的视图要么仅仅使用了需要的那边一点空间,要么就会充满所有可用的空间。例如:<LinearLayout

xmlns:android="/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"

/>

</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通过多层嵌套LinearLayout和组合使用"wrap_content"和"match_parent"已经可以构建出足够复杂的布局。但是LinearLayout无法允许你准确地控制子视图之前的位置关系,所有LinearLayout中的子视图只能简单的一个挨着一个地排列。如果你需要让子视图能够有更多的排列方式,而不是简单地排成一行或一列,使用RelativeLayout将会是更好的解决方案。RelativeLayout允许布局的子控件之间使用相对定位的方式控制控件的位置,比如你可以让一个子视图居屏幕左侧对齐,让另一个子视图居屏幕右侧对齐。例如:<?xml

version="1.0"

encoding="utf-8"?>

<RelativeLayout

xmlns:android="/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屏幕上显示的结果。下图展示了这个布局在一个更大的屏幕上显示的结果。可以注意到,即使屏幕的大小改变,视图之前的相对位置都没有改变。使用Size限定符虽然使用以上几种方式可以解决屏幕适配性的问题,但是那些通过伸缩控件来适应各种不同屏幕大小的布局,未必就是提供了最好的用户体验。你的应用程序应该不仅仅实现了可自适应的布局,还应该提供一些方案根据屏幕的配置来加载不同的布局,可以通过配置限定符(configurationqualifiers)来实现。配置限定符允许程序在运行时根据当前设备的配置自动加载合适的资源(比如为不同尺寸屏幕设计不同的布局)。现在有很多的应用程序为了支持大屏设备,都会实现“twopane”模式(程序会在左侧的面板上展示一个包含子项的List,在右侧面板上展示内容)。平板和电视设备的屏幕都很大,足够同时显示两个面板,而手机屏幕一次只能显示一个面板,两个面板需要分开显示。所以,为了实现这种布局,你可能需要以下文件:res/layout/main.xml,single-pane(默认)布局:<LinearLayout

xmlns:android="/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-large/main.xml,two-pane布局:<LinearLayout

xmlns:android="/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>请注意第二个布局的目录名中包含了large限定符,那些被定义为大屏的设备(比如7寸以上的平板)会自动加载此布局,而小屏设备会加载另一个默认的布局。使用Smallest-width限定符使用Size限定符有一个问题会让很多程序员感到头疼,large到底是指多大呢?很多应用程序都希望能够更自由地为不同屏幕设备加载不同的布局,不管它们是不是被系统认定为"large"。这就是Android为什么在3.2以后引入了"Smallest-width"限定符。Smallest-width限定符允许你设定一个具体的最小值(以dp为单位)来指定屏幕。例如,7寸的平板最小宽度是600dp,所以如果你想让你的UI在这种屏幕上显示twopane,在更小的屏幕上显示singlepane,你可以使用sw600dp来表示你想在600dp以上宽度的屏幕上使用twopane模式。res/layout/main.xml,single-pane(默认)布局:<LinearLayout

xmlns:android="/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,two-pane布局:<LinearLayout

xmlns:android="/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(two-pane)布局,而更小屏幕的设备将会选择layout/main.xml(single-pane)布局。然而,使用早于Android3.2系统的设备将无法识别sw600dp这个限定符,所以你还是同时需要使用large限定符。这样你就需要在res/layout-large和res/layout-sw600dp目录下都添加一个相同的main.xml。下节你将会看到如何避免重复定义这种布局的技巧。使用布局别名Smallest-width限定符仅在Android3.2及之后的系统中有效。因而,你也需要同时使用Size限定符(small,normal,large和xlarge)来兼容更早的系统。例如,你想手机上显示single-pane界面,而在7寸平板和更大屏的设备上显示multi-pane界面,你需要提供以下文件:res/layout/main.xml:single-pane布局res/layout-large:multi-pane布局res/layout-sw600dp:multi-pane布局最后的两个文件是完全相同的,为了要解决这种重复,你需要使用别名技巧。例如,你可以定义以下布局:res/layout/main.xml,single-pane布局res/layout/main_twopanes.xml,two-pane布局加入以下两个文件:res/values-large/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。这样两个layout.xml都只是引用了@layout/main_twopanes,就避免了重复定义布局文件的情况。使用Orientation限定符

有些布局会在横屏和竖屏的情况下都显示的很好,但是多数情况下这些布局都可以再调整的。在NewsReader示例程序中,布局在不同屏幕尺寸和不同屏幕方向中是这样显示的:小屏幕,竖屏:单面板,显示logo;小屏幕,横屏:单面板,显示logo;7寸平板,竖屏:单面板,显示actionbar;7寸平板,横屏:双面板,宽,显示actionbar;10寸平板,竖屏:双面板,窄,显示actionbar;10寸平板,横屏:双面板,宽,显示actionbar;电视,横屏:双面板,宽,显示actionbar;所有这些布局都是定义在res/layout/这个目录下,为了要让设备根据屏幕配置来加载正确的布局,程序需要使用布局别名来实现。res/layout/onepane.xml:<LinearLayout

xmlns:android="/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="/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"

/>

</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="/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:<LinearLayout

xmlns:android="/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="200dp"

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/values/layouts.xml:<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=

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论