Test

Anroid开发总结一

                         Koupoo   2011-12-18

几条基本的准则

设计的 UI 应尽量适应各种的显示屏分辨率 ;

不要在非主线程中操作 UI 。

在非特殊情况下，应该避免使用 px 作为尺寸单位，而使用 dip 或 sp

 

 

尺寸单位

使用 Android 为系统的机器的屏幕大小尺寸有很多种，常见的有 240x320 ， 320x480 ， 480x800 。理想下，我们希望程序能适应各种屏幕分辨率，这就要求在设计 UI 时， UI 的大小相对的，而这可以通过使用 dip 或 sp 作为尺寸单位来实现。

UI 的尺寸单位一般选择用 dip ， dip 是 destiny independent pixel （与密度无关的像素）的缩写， dip 一般写作 dp 。

字符尺寸的单位一般选用 sp ， sp 是 scale independent pixel （与缩放无关的像素）的缩写。

使用 dip 或 sp 的作为尺寸单位的好处就是，当屏幕分辨率发生变化时， UI 或字符的尺寸回自动放大或缩小。

 

 

盒子模型

在 Android 中，可以一个标准控件看作是一个盒子。按照盒子模型，控件可拆分为以下几个部分： 内容 (content) 、填充 (padding) 、边框 (border) 、边界 (margin) 。对于这种盒子，我们能做的是设置内容、内容四周的填充大小、四周边界大小。

控件一般有一个默认的边框大小，这个是我们所不能设置的。以下图的 TextView 为例， content 就是文字， padding 就是文字与边框的距离，蓝色边框的四周便是边界（这个边界宽看作无穷小），而边界就是这个 TextView 周围的固有空白（透明）部分。

标准控件

Android 提供了不少精美的标准 UI ，下面介绍笔者到目前为止接触过的标准 UI 和一些值得特别注意的地方（待续）。

 

TextView

用于显示不可编辑的文本

为突出效果，这里吧 TextView 的背景设为蓝色。 TextView 不仅用于显示一行，文字，也可以用于显示多行文字：

如果想控制字符与边框之间的距离，可以设置 TextView 的 Padding 属性。将上图的 Padding 属性设为：

则会有这样的效果

对应的

 

 

EditView

EditView 继承于 TextView ，用户可以使用它输入信息。这个控件的突出特点是，它已经把各种数据格式的校验方法封装好了。可以通过设置该控件的 input style 属性来控制该控件允许接受的数据格式，如

input style 属性值            说明

text                   EditView 能输入任意的字符

textPassword            密码格式，输入的字符将被点号代替

textNumber             只允许输入数字     

textEmailAddress        输入的字符串的格式必须为电子右键的格式

TextView 的 input style 的类型很多，常用数据各式都有，这可让程序员轻松了 不少 (^_^) 。

 

ImageView

如果要显示图片，可以将 View 的 background 设置为想要显示的图片。但这样做有个明显的局限：图片会被拉伸或缩放到恰好充满整个 View ，而且不管你怎么修改 View 的属性，图片总是恰好充满整个 View 。想要更好的控制图片的显示方式（位置和大小），应该使用 ImageView 。关于如何使用 ImageView 控制图片的显示，打算在另写一篇文章详细介绍，所以这里就不多讲了。

 

 

不同的标准控件之间的一些共性

大部分标准控件都可以设置背景，而作为背景的可以是颜色，也可以是图片。

从布局上看，可以将控件看作盒子，具体参见前文。

 

布局

什么是布局？

一个 UI 控件的布局就是确定它的位置和大小。位置和大小不是完全孤立的，在相对布局中，控件位置可以影响控件的大小。

 

使用 Android 为系统的机器的屏幕大小尺寸有很多种，但 Android 系统提供了的好几种良好的 UI 布局机制，这使得  Android 程序的 UI 设计具有很高的灵活性。你可以很容易使用这些 UI 布局机制设计出心目中的界面，并让界面自动适应种个分辨。

 

在 Android 程序界面的设计中有多种 UI 布局方式，最常用的是线性布局（ LinearLayout ）和相对布局 相对布局（ RelativeLayout ）。下面将重点介绍常用的相对布局（ RelativeLayout ）。

 

一般我们希望程序能够在分辨率不同的机器上都能使用，

 

如果同一个方向上只有一个控件或两个两个控件，使用线性布局，否则使用相对布局。

 

LinearLayout 

线性布局，这中布局方式跟网页设计中使用的流式布局很相似。

 

RelativeLayout

相对布局。线性布局能做到的，相对布局也能做到；而相对布局能做到的，线性布局不一定能做到。一个线性布局不能做到的典型事情：将一个控件覆盖在另一个控件之上。下图将一个 Button 放到一个 ImageView 的正中间，这是线性布局所不能做到的。

上图的布局方式是：

imageView1 和 button1 放在一个相对布局之中，而 imageView 和 button1 的位置布局设置是： Layout center in parent = true;

 

相对布局的原理是：一个控件的位置是根据其他控件的位置来确定的。比如上图中。若问 button1 在哪？则回答是 button1 在 relativeLayout1 的正中间。

注意控件的位置可能决定控件的大小，下面你将看到这一点；另外，一个控件位置的参照对象可以是同一个 RelativeLayout 之中（包括 RelativeLayout 自身）的其他任意一个控件对象。

 

相对布局能结局好另外一个线性布局所不能解决的问题：两边要挨着，中间要充满。

上图中蓝色矩形中，“条码”要在最左边，而“选择”按钮和“扫描”按钮要在最右边，中间的 TextEdit 要充满剩余空间。并且如果手机屏幕的分辨率不同，这种摆放方式应该不变，而这是线性布局所不能实现的，只能使用使用相对布局：

让 TextView1 和 RelataiveLayout2 的左边对齐：

 

让 barCode 位于 TextView01 的右边：

 

让 barCode 位于 shopChoseBtn 的左边：

 

让 shopScanBtn 和 RelataiveLayout2 的右边对齐：

 

让 shopChoseBtn 位于 shopScanBtn 的左边：

在这个例子中，另外值得注意是，  TextView01 的宽是由它的位置所确定的。

 

 

再举个例子来证明下相对布局的优越之处。现在，有一系列的信息需要放在圆角矩形框中显示，并且信息和各边框之间有一个固定的空白距离；各个信息的长度不同，假设最长的信息等于下图第三个圆角框中的信息，而最短的信息等于下图第二个圆角框中的信息。对应这种情况，该怎么处理呢？

 

由于圆角矩形的大小变化不算太大，可以使用同一张大小适中的圆角矩形图片作为信息的边框，这样对于显示任何信息，作为背景的圆角矩形图片都不会放生太大的变形。

 

因为显示信息的 TextView 的 Layout Width 肯定要为 WRAP_CONTENT ，所以圆角矩形图片不能直接设为信息 TextView 的背景，否则 WRAP_CONTENT 的范围就是圆角矩形图片而不是信息。这样，只能在显示信息的 TextView 之后放一个显示圆角矩形图片的控件（这里选择了 ImageView ）作为背景。控件要重叠在一起，所以只能用 RelativeLayout 。

 

ImageView02 图片缩放方式：

 

ImageView02 的布局方式：

TextView02 的布局方式 : 

 

 

流式布局VS相对布局

 

流式布局使用起来十分简单，因为下一个控件的位置总是在前一个控件的右边或下边 ,  这使得流式布局在控件位置的控制上显得十分的古板；想法，相对布局使用起来麻烦的多，你要自己参照其他控件来控制每个控件的位置，但正是这种麻烦，使得控件位置的布局上相当灵活（你将把控件放哪呢？）。

 

 

限于笔者水平有限，如果文中有不妥之处，敬请读者批评指正。联系邮箱： [email protected] 。