本文为Android用户界面设计教程——布局基础。在这个教程里,我们提供一个关于布局如何适应Android应用程序架构的概述。

理解布局对于好的Android应用设计来说是非常重要的。在这个教程里,我们提供一个关于布局如何适应Android应用程序架构的概述。我们还探讨了一些特定的可用布局控件,用它们来以各种各样的方式组织应用程序屏幕内容。

什么是布局?

Android开发者使用术语“布局”,指的是两种含意中的一种。两种定义在这篇教程中都会用到,而且很不幸的是在Android开发社区它们被混着使用。布局的两种定义如下:

一种资源,它定义了在屏幕上画什么。布局资源存储在应用程序的/res/layout资源目录下的XML文件中。布局资源简单的说就是一个用于用户界面屏幕,或屏幕的一部分,以及内容的模板。

一种视图类,它的主要是组织其它控件。这些布局类(LinearLayout,,RelativeLayout,TableLayout等)用于在屏幕上显示子控件,如文本控件或按钮或图片。

Android用户界面可以定义为XML中的布局资源或程序动态创建。

使用Eclipse设计布局资源

Eclipse的Android开发插件包含了一个很方便的用于设计和预览布局资源的布局资源设计器。这个工具包括两个标签视图:布局视图允许你预览在不同的屏幕下以及对于每一个方向控件会如何展现;XML视图告诉你资源的XML定义。布局资源设计器如下图:

这里有一些关于在Eclipse中使用布局资源编辑器的技巧:

◆使用概要(Outline)窗格来在你的布局资源中添加和删除控件。

◆选择特定的控件(在预览或概要窗口)并使用属性窗格来调整特定控件的属性。

◆使用XML标签来直接编辑XML定义。

很重要的是要记住一点,Eclipse布局资源编辑器不能完全精确的模拟出布局在最终用户那的展现。对此,你必须在适当配置的模拟器中测试,更重要的是在目标设备上测试。而且一些“复杂”控件,包括标签或视频查看器,也不能在Eclipse中预览。

定义XML布局资源

设计程序用户界面最方便且可维护的方式是创建XML布局资源。这个访法极大地简化了UI设计过程,将许多用户界面控件的静态产物和布局,以及控件属性定义移动XML中,代替了写代码。它适应了UI设计师(更关心布局)和开发者(了解Java和实现应用程序功能)潜在的区别。开发者依然可以在必要的时候动态的改变屏幕内容。复杂控件,像ListView或GridView,通常用程序动态地处理数据。

XML布局资源必须存放在项目目录的/res/layout下。对于每一屏(与某个活动紧密关联)都创建一个XML布局资源是一个通用的做法,但这并不是必须的。理论上来说,你可以创建一个XML布局资源并在不同的活动中使用它,为屏幕提供不同的数据。如果需要的话,你也可以分散你的布局资源并用另外一个文件包含它们。

下面是一个简单的XML布局资源,一个LinearLayout模板包含一个TextView和一个ImageView,定义在XML中:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent"
  6. android:gravity="center">
  7. <TextView
  8. android:layout_width="fill_parent"
  9. android:id="@+id/PhotoLabel"
  10. android:layout_height="wrap_content"
  11. android:text="@string/my_text_label"
  12. android:gravity="center_horizontal"
  13. android:textSize="20dp" />
  14. <ImageView
  15. android:layout_width="wrap_content"
  16. android:layout_height="wrap_content"
  17. android:src="@drawable/matterhorn"
  18. android:adjustViewBounds="true"
  19. android:scaleType="fitXY"
  20. android:maxHeight="250dp"
  21. android:maxWidth="250dp"
  22. android:id="@+id/Photo" />
  23. </LinearLayout>

这个布局资源表示屏幕包含两个控件:首先有一些文字,然后在它下面有一个图片。这些控件组织在一个垂直方向的LinearLayout中。下面两幅图片展示了这个布局在横屏和竖屏下可能的样式:

在屏幕上显示一个布局资源只需要有包括onCreate()的一行代码就可以搞定。如果布局资源存放在/res/layout/main.xml文件,代码可能是:

  1. setContentView(R.layout.main);

用程序动态定义布局

你也可以用程序创建用户界面组件。为了易组织和可维护性,仅在特殊时候这样做,而不是在一般情况下。不是直接使用setContentView()方法来加载布局资源,你必须创建屏幕内容然后向setContentView()方法提供包含所有要显示的子控件内容的父布局对象。

例如,下面的代码展示了如何用程序实例化一个LinearLayout视图并向里面放置两个TextView。没有使用任何资源。

  1. public void onCreate(Bundle savedInstanceState) {
  2. super.onCreate(savedInstanceState);
  3. // setContentView(R.layout.main);
  4. TextView label = new TextView(this);
  5. label.setText(R.string.my_text_label);
  6. label.setTextSize(20);
  7. label.setGravity(Gravity.CENTER_HORIZONTAL);
  8. ImageView pic = new ImageView(this);
  9. pic.setImageResource(R.drawable.matterhorn);
  10. pic.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
  11. pic.setAdjustViewBounds(true);
  12. pic.setScaleType(ScaleType.FIT_XY);
  13. pic.setMaxHeight(250);
  14. pic.setMaxWidth(250);
  15. LinearLayout ll = new LinearLayout(this);
  16. ll.setOrientation(LinearLayout.VERTICAL);
  17. ll.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
  18. ll.setGravity(Gravity.CENTER);
  19. ll.addView(label);
  20. ll.addView(pic);
  21. setContentView(ll);
  22. }

如你所见,这些代码的大小将随着更多的控制添加到屏幕而迅速增加,使得屏幕内容更加难以维护和重用。

探索不同的布局类型

现在让我们把注意力转向对组织其它控件很有用的布局控件。最常用的布局类是:

◆FrameLayout – 用于显示一堆子视图控件。多视图控件可以添加到这个布局中。它可以用来在相同的屏幕空间展示多个控件。

◆LinearLayout – 用于在单行或单列中显示子视图控件。这对于创建表单来说是非常方便的布局方法。

◆RelativeLayout – 用于相对彼此地显示子视图控件。比如,你可以设置一个控件相对另一个控件“在上方”或“在下方”或“在左边”或“在右边”。你也可以相对于父级元素的边界来放置子视图控件。

◆TableLayout – 用于将子视图控件组织到行或列。对于表格的每一行,单个视图控件使用TableRow布局视图被添加到表格的每一行。

用复合布局来组织控件

布局(LinearLayout,TableLayout,RelativeLayout等)像其它控件一样也是一个控件。这意味着布局控件可以被嵌套。比如,为了组织屏幕上的控件你可以在一个LinearLayout中使用一个RelativeLayout,反过来也行。下面的图展示了一个屏幕,它有一个LinearLayout(父级),一个TableLayout(顶部子节点)以及一个FrameLayout(底部子节点)。

但是小心!保证你的屏幕相对简单,复杂布局加载很慢并且可能引起性能问题。

提供可选布局资源

在你设计你的程序布局资源时考虑设备的差异性。通常情况下是可能设计出在各种不同设备上看着都不错的灵活布局的,不管是竖屏还是模屏模式。必要的时候,你可以引入可选布局资源来处理特殊情况。例如,你可以根据设备的方向或设备是不是有超大屏幕(如网络平板)来提供不同的布局供加载。

想了解更多的关于如何使用可选资源的信息,查看Android SDK的Android资源方面的文档.

布局工具和优化

Android SDK包括几个可以帮助我们设计,调试和优化布局资源的工具。除了Eclipse的Android插件中内置的布局资源设计器,你可以使用Android SDK提供的Hierarchy Viewer(层次结构查看器)和layoutopt。这些工具在你的Android SDK的/tools目录下可以找到。

你可以使用Hierarchy Viewer来查看布局运行时的详细情况。可以在Android开发者网站的Hierarchy Viewer部分了解更多信息。

你可以使用layoutopt(布局优化)命令行工具来优化你的布局文件。优化布局非常重要,因为复杂的布局文件加载很慢。layoutopt工具简单地扫描XML布局文件并找出不必要的控件。在Android开发者网站的layoutopt部分查看更多信息。

总结

Android应用程序用户界面使用布局来定义。有许多不同类型的布局类型可以用来组织屏幕上的控件。布局可以使用XML资源定义,也可以通过Java程序在运行时来定义。可选布局可以在特殊情况下被加载,比如在横屏和竖屏模式下提供一个可选用户界面。最后,设计良好的布局对于应用程序性能很重要;使用像Hierarchy Viewer和layoutopt之类的Android SDK工具来调试和优化你的应用程序布局。

from:http://mobile.51cto.com/design-254913_all.htm

Android用户界面设计:布局基础相关推荐

  1. Android用户界面设计

    Android用户界面设计 用户界面设计是Android应用开发的一项重要内容.在进行开发的过程中,我们需要了解UI元素如何呈现给用户,也就是如何控制UI界面.andorid提供了4种控制UI的方法. ...

  2. Android用户界面设计:框架布局

    框架布局是将控件组织在Android程序的用户界面中最简单的布局类型之一. 理解布局对于良好的Android程序设计来说是非常重要的.在这个教程里,你将学到所以关于框架布局的知识,它们主要用来在屏幕上 ...

  3. Android用户界面设计“.NET研究”:框架布局

    框架布局是将控件组织在Android程序的用户界面中最简单的布局类型之一. 理解布局对于良好的Android程序设计来说是非常重要的.在这个教程里,你将学到所以关于框架布局的知识,它们主要用来在屏幕上 ...

  4. Android用户界面设计学习之旅-第三站

    通过上一篇文章,知道了如何创建一个应用程序来显示一个静态的View.然而,在大多数情况下仅仅显示是不够的,应该还需要与用户的交互行为.现在完成一个简单的和用户交互的示例. 这个小程序的需求是: 画面上 ...

  5. Android用户界面设计学习之旅-第二站

    通过上一篇文章,大概了解了Android用户界面的设计方式,以及如何通过XML来设计界面.并且完成了一个非常简单的示例. 在上一篇文章中,涉及到了一些资源文件,直观点说,就是res目录下的那些目录和文 ...

  6. android用户界面设计:基本按钮,Android用戶界面設計:基本按鈕

    本文向你展示了在你的android應用程序中創建一個簡單的Button或ImageButton控件的步驟.首先,你會學到如何向你的布局文件中添加按鈕控件.然後你會學習如何用兩種方法處理用戶對按鈕的點擊 ...

  7. 用户界面设计的一些方法和基本原则

    文/ openself 什么是用户界面? 用户界面(UI,User Interface)也称人机界面,是人机交互.操作逻辑和界面表现的整体设计.每一种设计都有其对应的职业角色,其中,人机交互的设计人员 ...

  8. android java与界面的关联_Android Studio安卓学习笔记(三)Android用户界面的设计布局与组件(一)用户界面布局设计(1)...

    当我们创建了一个安卓项目后,我们会发现真正建立一个完善的安卓项目并不是想象的那么容易.其实和设计GUI可视化界面一样,开发安卓也需要考虑很多方面,主要考虑的还是界面布局和需要的组件. 一:Androi ...

  9. Android Studio安卓学习笔记(三)Android用户界面的设计布局与组件(一)用户界面布局设计(1)...

    当我们创建了一个安卓项目后,我们会发现真正建立一个完善的安卓项目并不是想象的那么容易.其实和设计GUI可视化界面一样,开发安卓也需要考虑很多方面,主要考虑的还是界面布局和需要的组件. 一:Androi ...

  10. android 平台 列表布局,Android 设计指南 - 风格

    构建在任何设备上都引人注目的应用. Android 驱动了数百万计的手机.平板和其他设备,囊括了各种不同的屏幕尺寸和比例.利用 Android 灵活的布局系统,你可以创造出在各种设备上看起来都很优雅的 ...

最新文章

  1. 【深度学习】基于深度神经网络进行权重剪枝的算法(二)
  2. Python编程基础:第三十五节 文件删除Delete a File
  3. java-两数倒置后求和
  4. PyCharm集成Anaconda3环境下安装 腾讯优图报错 ERROR: Could not install packages due to an EnvironmentError
  5. C++ STL简介(转)
  6. 华为鸿蒙系统学习笔记4-方舟编译器源码下载及安装
  7. python向量化编程技巧_Python学习(六)向量化
  8. mmseg 同义词分析器 SolrSynonymParser
  9. Exchange Server 2007迁移Exchange Server 2010 (15)---启用Outlook anywhere
  10. 联想计算机usb驱动程序,联想笔记本USB3.0驱动
  11. Ant Design介绍
  12. wps垂直排列标题与文本_如何垂直设置wps文本
  13. codevs 1329 东风谷早苗
  14. IMAX Enhanced:让沉浸式家庭影音娱乐体验不再抽象
  15. 蓝筹股票会退市吗?什么是白马蓝筹股票?
  16. 服务器选云主机还是VPS主机呢?
  17. 获取当前格林威治时间
  18. 超爽的对战游戏3.0版本来了 非常有趣
  19. 1月15日科技资讯|微信可直接转账到 QQ;小米联合中国联通推出当前最便宜 5G 套餐;Git 2.25.0 发布
  20. 开发微信公众平台的基本功能

热门文章

  1. Android依赖注入:Dagger、RoboGuice和ButterKnife
  2. 浅析Thinkphp框架中运用phprpc扩展模式
  3. centos6.5安装sublime text 2
  4. C#判断一个string是否为数字 --zt
  5. 【JOURNAL】Salles de SV Toulouse
  6. 第二十三篇 玩转数据结构——栈(Stack)
  7. 面向接口的开发到面向对象的编程
  8. Merge Two Sorted Lists Leetcode
  9. [转载]linux+nginx+python+mysql安装文档
  10. ZooKeeper(3.4.5) - 配置伪集群模式