ASP教程 ASP.NET教程 PHP教程 JSP教程 CGI/Perl教程其他WEB语言 数据库编程 编程杂谈
返回首页
当前位置: 主页 > 网络编程 > 其他WEB语言 >

Android用户界面:关于布局如何适应Android应用程序架构

时间:2012-03-24 03:41来源:RockUX–WEB前端  作者: 点击:
Android用户界面:关于布局如何适应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中:

 

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 
android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 
android:gravity="center">
 <TextView
 
android:layout_width="fill_parent"
 android:id="@+id/PhotoLabel"
 
android:layout_height="wrap_content"
 android:text="@string/my_text_label"
 
android:gravity="center_horizontal"
 android:textSize="20dp" />
 
<ImageView
 android:layout_width="wrap_content"
 
android:layout_height="wrap_content"
 android:src="@drawable/matterhorn"
 
android:adjustViewBounds="true"
 android:scaleType="fitXY"
 
android:maxHeight="250dp"
 android:maxWidth="250dp"
 
android:id="@+id/Photo" />
 </LinearLayout>
爱设计教学网(www.2sheji.com)——为您所需,替您所想!
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
推荐内容