设计兼容不同的屏幕尺寸的Android界面

Android的屏幕类型有几百种不同的尺寸,从小型的手机到大型的电视机。因此要使我们的应用程序兼容不同屏幕尺寸,同一个应用就可以提供给更多的用户使用。

一、支持不同的屏幕尺寸

1、使用“wrap_content"和”match_parent"

为了确保布局的灵活性,来适应不同尺寸的屏幕,我们应该使用“wrap_content"来匹配组件的最小尺寸和使用”match_parent"来设置某些视图来匹配父视图的大小。这样设置和直接设置视图大小(如48dip)不同的是该视图的空间可以随着屏幕尺寸(父视图的大小)随意扩展。例如如下布局:

<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>

当我们翻转手机屏幕可以看到横向和竖向的屏幕适配如下:

2、使用Relative_layout

我们可以使用LinearLayout通过“wrap_content"和”match_parent"来实现很多复杂的布局,但是LinearLayout擅长控制的是线性的关系,如果是要精确控制平面关系,使用Relative_layout比较合适,它可以指定两个组件之间的空间关系。例如下面代码:

<?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手机上显示如下:

在大屏幕的WSVGA屏幕上显示如下:

3、使用尺寸限定符

上面我们通过“wrap_content"、”match_parent"、“relative_layout"的方法来实现不同屏幕尺寸的视图伸展,有效的解决了屏幕尺寸问题,除了这些方法外我们还可以使用尺寸限定符来针对不同的屏幕来做特殊的界面布局。

第一列是屏幕的特征,有尺寸、密度、方向、长宽比

第二列是限定符的写法(如large,我们就需要建立一个文件夹名称为layout-large)

第三列是相关解释和描述

例如我们现在在我们的res下建立两个文件夹通过不同的限定符文件夹名称来匹配不同尺寸的屏幕

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-large/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>

上面布局中在大屏幕中我们将两个大视图放到了整个屏幕,二小屏幕中我们只放置了一个视图。我们的设备会根据屏幕尺寸来自动寻找自己的布局。

4、使用最小宽度限定符

上面根据屏幕尺寸来匹配不同的布局文件,但是很多时候我们可能在不同的大屏手机中需要分别显示不同的布局(例如Galaxy Tab显示5个还是7个),在Android3.2以后就有了最小宽度限定符来解决这个问题。

假设sw600dp来表示我们的最小宽度,则布局文件就可以有如下表示:

小屏幕手机适配的布局  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>

设备宽度大于或等于600dp的布局 res/layout/layout-sw600dp.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>

要注意的是这种限定符在3.2以前的版本手机上是不支持的。在3.2之前还必须用尺寸限定符large来代替。

5、使用layout别名

综合上面的分析,如果我们要支持一个包含大屏幕尺寸的设备必须包含例如下面几个布局来匹配

res/layout/main.xml

res/layout/layout-large

res/layout/layout-sw600dp

最后这两个文件的作用是相同的,是为了支持3.2以下和以上版本,为了避免混淆和维护难度,我们可以给这些布局起别名,比如下面的布局名:

res/layout/main.xml 单面板布局

res/layout/main_twopanes.xml 双面板布局

并添加这两个文件

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和mian_twospanes的联系,可以通过屏幕尺寸来分别获取不同的value文件下所对应的布局文件别名。

6、使用方向限定符

有的时候我们的应用可能需要翻转手机能获得更好的效果,此时的布局也需要做相应的改变,也可以分别做出对应的布局文件。请参照上面的表格(land  和 port)。

7、使用Nine-Patch图

对于不同的屏幕尺寸通常我们需要使用不同尺寸的图片资源,所以在设计可变大小的组件时,一定要使用Nine-Patch图。

如上图的Nine-Patch图在不同尺寸手机上的拉伸效果如下:

有关Nine-Patch的制作方法请参考我的另一篇博文:http://blog.csdn.net/dawanganban/article/details/17379193

二、支持不同的屏幕密度

我们在设计布局的时候不能使用绝对的像素尺寸,而应该使用dp和sp.不同设备具有不同的屏幕密度,1英寸的不同密度手机上的像素个数是不同的。为了让大家搞清楚这些基本概念,我逐一解释一下:

dpi 像素密度:像素密度,即每英寸屏幕所拥有的像素数,像素密度越大,显示画面细节就越丰富。

我们可以用这个公式表示  1dpi = 1pix / 1in

dp (dip)设备独立像素:在屏幕密度为160的显示屏上,1dip=1px

有了这些概念,我们来算一下,1dip是多长(是多少英寸)

result = in / dip

result = in / px  (根据dp的定义)

result = 1 / (px / in)

result = 1 / dpi

result = 1 / 160

从上面的推导可以看出在屏幕密度为160的显示屏上 1dip其实就是 1 / 160 英寸,是一个屏幕尺寸上的绝对单位。

Android中为我们提供了适配不同分辨率的资源包,我们只需要做一套资源就可以自动帮我们换算成相应dpi(分辨率)下的尺寸,放大及缩小比例如上图所示。

三、不同UI的代码逻辑适配

1、确定当前布局

public  class  NewsReaderActivity  extends  FragmentActivity  {
    boolean mIsDualPane ; 

    @Override
    public  void onCreate ( Bundle savedInstanceState )  {
        super . onCreate ( savedInstanceState );
        setContentView ( R . layout . main_layout ); 

        View articleView = findViewById ( R . id . article );
        mIsDualPane = articleView !=  null  &&
                        articleView . getVisibility ()  ==  View . VISIBLE ;
    }
}

如上面代码,我们可以通过某些View的可见性来判断选用的布局文件。

2、根据不同的布局,做出不同的逻辑

@Override
public void onHeadlineSelected(int index) {
    mArtIndex = index;
    if (mIsDualPane) {
        /* display article on the right pane */
        mArticleFragment.displayArticle(mCurrentCat.getArticle(index));
    } else {
        /* start a separate activity */
        Intent intent = new Intent(this, ArticleActivity.class);
        intent.putExtra("catIndex", mCatIndex);
        intent.putExtra("artIndex", index);
        startActivity(intent);
    }
}

3、使用代码片段实现重用

<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>
时间: 2024-08-06 04:33:07

设计兼容不同的屏幕尺寸的Android界面的相关文章

创办支持多种屏幕尺寸的Android应用

创建支持多种屏幕尺寸的Android应用 Android涉及各种各样的支持不同屏幕尺寸和密度的设备.对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的用户界面到它显示的屏上.与此同时,系统提供APIs允许你控制应用界面为特定的屏幕尺寸和密度,为不同屏幕的配置提供最优化的用户界面设计.例如,你可能会要一个平板电脑的用户界面,这不同于手机的用户界面. 虽然系统能缩放,调整其尺寸,以使应用软件工作在不同屏上,但是应该尽量优化应用软件适应不同的屏幕尺寸和

[转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因此,Ethan Marcotte提出一种响应式web设计的概念. 响应式web设计的英文为Responsive Web Design,简写为RWD. 在图书馆借到一本O'REILLY的<Head First Moblie Web>,里面讲到了一些做RWD的技巧. 今天学到的两招是: 1.使用med

Supporting Multiple Screens(支持Android各种屏幕尺寸)

原文链接 本文翻译自Supporting Multiple Screens. 目前我这篇翻译应该是最全,最完整的官方文档翻译,转载我的翻译请联系本人,标明出处. Supporting Multiple Screens Android runs on a variety of devices that offer different screen sizes and densities. For applications, the Android system provides a consist

目前主流的智能手机屏幕分辨率和屏幕尺寸

分辨率: Android: 主流机型主要为 480x800, 480x854, 540x960, 720x1280, 800x1280 这五种. (非主流机型还包括:240x320, 320x480, 640x960 这三种,其中两种都与 iPhone 一致.) iOS: 主流机型主要为 320x480, 640x960, 640x1136, 1024x768, 2048x1536, 这五种. WP: 主流机型主要为 480x800,720x1280, 768x1280 这三种. 屏幕尺寸:an

Android界面设计适配不同屏幕的尺寸和密度解读

Android是运行在各种提供不同的屏幕尺寸和密度的设备.Android系统提供跨设备的统一开发环境和处理大部分的工作,以调整每个应用程序的用户界面,以在其上显示的画面. 同时,该系统提供了API,允许您控制您的应用程序的UI特定的屏幕尺寸和密度,以优化你的用户界面设计,不同的屏幕配置.作为设计师也要最大程度地为所有设备的体现良好的用户体验或是方便使用阅读,而不是简单地拉伸以适应屏幕上的设备. 25学堂跟大家分享这篇Android界面设计适配不同屏幕的尺寸和密度的问题.有几个知识点需要解读下.

android为每个屏幕尺寸和分辨率做设计(一)

一.分辨率无关 1.使用dp(dpi) Android使用密度无关的像素(dp)来指定屏幕尺寸,它允许在具有不同像素密度而屏幕大小相同的设备上通过缩放达到相同的效果.(还没解决不同屏幕尺寸的问题?) 2.像素密度的资源限定符 当使用不能很好地动态缩放的Drawable资源时,应该创建和包含针对每种像素密度类别进行优化的图像资源. 就是drawable-hdpi.m.l 感觉这个也好麻烦....哎,我都是只用一个hdpi偷懒,不过这样小屏幕也加载了大图片... 二.为不同的屏幕大小提供支持和优化

Android官方开发文档Training系列课程中文版:多样屏幕之支持不同的屏幕尺寸

原文地址:http://android.xsoftlab.net/training/multiscreen/index.html 引言 Android运行于数以百计不同尺寸的设备上.范围小到手持移动电话,大到电视设备.因此,在设计APP时应当兼顾到尽可能多的屏幕尺寸.这样才能照顾到较多的潜在用户. 但是仅仅考虑不同的设备类型还不够.每一种尺寸为用户提供了不同的可能性与挑战,所以为了使用户感到满意,应用程序需要做的不单单是支持多样的屏幕:它还必须对每种屏幕结构将用户体验优化到最佳. 这节课将会学习

Android获取屏幕尺寸

有些时候,我们需要获取Android手机或Pad的屏幕的物理尺寸,以便于界面的设计或是其他功能的实现.下面就介绍讲一讲如何获取屏幕的物理尺寸:从网上找过不少资料,发现获取屏幕尺寸并不是很复杂的编程操作,下面的代码即可获取屏幕的尺寸.在一个Activity的onCreate方法中,写入如下代码: DisplayMetrics metric = new DisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(metric)

【文章内容来自《Android 应用程序开发权威指南》(第四版)】如何设计兼容的用户界面的一些建议(有删改)

最近一直在看的一本书是<Android 应用程序开发权威指南>(第四版),十分推荐.书中讲到了一些用户界面设计的规范,对于初学者我认为十分有必要,在这里码给大家,希望对我们都有用. 在我们设计用户界面的时候,我们总是很多时候通过提供自定义应用资源和代码的方法来支持特定设备配置,但有一点特别需要注意的,那就是我们必须保证我们的设计方案有足够的灵活性来应对各种变化,让他们变得简单,而不是过度的挤压他们,一下是我的一些建议: 设计正常尺寸屏幕和中等分辨率的app.随着时间的推移,设备有着向更大尺寸,