Android的UI设计原理

f7mm 贡献于2013-04-30

作者 SUN  创建于2010-12-16 07:48:00   修改者WesLon  修改于2013-03-20 03:32:00字数3292

文档摘要:Android的UI设计原理
关键词:

 Android的UI设计原理 Android的UI设计原理 版本:1.0 发布日期:2010-12-16 实施日期:2010-12-16 修订记录 日期 版次 描述 作者 审核 批准 第 页 Android的UI设计原理 2010-12-16 1.0 初版发布 SUN 目 录 修订记录 2 1. Android的布局 4 1.1. 基本架构 4 1.2. 看线性布局 4 1.2.1. LinearLayout线性布局 4 第 页 Android的UI设计原理 1.2.2. LinearLayout属性 5 1.2.3. RelativeLayout布局: 6 1.2.4. Widget 6 1.3. 特别说明: 7 1.4. 常见的单位的介绍 8 1. Android的布局 基本架构 第 页 Android的UI设计原理 Android总共分为五种布局,分别是FrameLayout(框架布局)、LinearLayout(线性布局)、RelativeLayout(相对布局)、AbsoluteLayout(绝对布局)、TableLayout(表格布局), 我们经常用到的有三种:FrameLayout、LinearLayout、RelativeLayout。 我们从中选取两个简单介绍一下:LinearLayout、RelativeLayout来介绍一下 看线性布局 LinearLayout线性布局 在线性布局中,有四个及其重要的参数,直接决定元素的布局和位置,分别是: Android:orientation(线性布局以列和行来显示内部子元素); Android:layout_gravity(是本元素相对于父元素的重力方向); Android:gravity(是本元素所有子元素的重力方向); Android:layout_weight(线性布局内子元素对为占用的空间分配权重值); 所谓线性布局就是指在该标签下的所有子元素会根据 android:orientation的值来决定是按行还是按列逐个显示: Vertical 列 Horizontal 行 xmlns:android="http://schemas.android.com/apk/res/android " 1. xmlns:android 1) 属性指定命名空间,顶级元素必须指定命名空间。而在该命名空间中的控件的属性如layout_width,使用时必须加上 “android:”做前缀; 2. layout_width指宽度,layout_height 指高度。 1) 其可选值有“fill_parent”、“wrap_content”、具体数字(单位为px)。其中“fill_parent”代表填满其父元素。对于顶级元素来说,其父元素就是整个手机屏幕。 第 页 Android的UI设计原理 “wrap_content”代表该元素的大小仅包裹其自身内容,而数字则代表其占相应的px; LinearLayout属性 1. 对齐方式 1) android:gravity(组件对齐方式); 2) android:layout_gravity(布局对齐方式); 2. 页边距 1) android:layout_margin; 2) android:layout_marginTop; 3) android:layout_marginLeft; 4) android:layout_marginTop; 5) android:layout_marginBottom; 3. 设置背景 1) android:backgroundweight; 所有的组件都是以TextView作为父类。 RelativeLayout布局 相对布局顾名思义是一个组件相对于另一个组件的布局 其除去width ,height的基本属性外的重要属性有: 1. layout_above(在某个组件上方); 2. layout_below(在某个组件下方); 同理toRightOf指右边,toLeftOf左边。  1. android:layout_alignBaseline(相当于水平中心线对齐); 2. android:layout_alignBottom(相对某个组件底部对齐); 3. android:layout_alignLeft(相对某个组件左边); 4. android:layout_alignRight(相对某个组件右边对齐); 5. android:layout_alignTop(相对某个组件上边对齐); 以下是指相对于父布局。值为“true”or“false” 1. aandroid:layout_alignParentBottom 2. android:layout_alignParentLeft 3. android:layout_alignParentRight 4. android:layout_alignParentTop 5. android:layout_centerHorizontal 6. android:layout_centerInParentc 7. android:layout_centerVertical Widget 第 页 Android的UI设计原理 所有的组件都是以TextView作为父类。 而在布局当中,肯定会用到许多的组件,我们从中选取TextView来简单介绍一下: 1) android:text(设置显示文本); 2) android:textSize(设置显示文本字体大小); 3) android:textColor(设置文本颜色 ); 4) android:height(设置文本区域高度,支持度量单位:px(像素)/dp/sp/in/mm(毫米)); 5) android:width(设置文本区域的宽度,支持度量单位:px(像素)/dp/sp/in/mm(毫米)); 6) android:password(以小点”.”显示文本); 7) android:phoneNumber(设置为电话号码的输入方式); 8) android:hint--Text为空时显示的文字提示信息,可通过textColorHint设置提示信息的颜色。此属性在EditView中使用,但是这里也可以用, 9) android:gravity(设置文本对齐方式,如设置成“center”,文本将居中显示); 10) android:autoLink(设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接。可选值(none/web/email/phone/map/all)); 11) android(background--设定背景); 特别说明 1. LinearLayout中layout_weight属性表示组件在布局中的权重。及各组件的重要度比。 如: 有三个组件其各自layout_weight值设为:1,2,2.那么空间分配时就把组件父空间分为5 等份,其中第一个组件占据1/5的空间。其余两个分别占据2/5的空间。也就是说组件之间按 照比例分配。如果其中有一个没有设置layout_weight的值那么这个组件就按照其自身设定的width,height显示。其余组件按比例分配余下空间。 有个例外是:如果三个组件线性横向布局。其所有的width均设为fill_parent,那么设置的比重会倒过来。以上面设定的值为例,其结果为第一个组件占据空间4/5,其余两个一起占据空间的1/5,及各为1/10。 2. 很多人可能发现在Android的layout文件中layout_width或layout_hei 有时候可能会指定具体的单位,比如有时候为px、dip或者sp等等。 常见的单位的介绍 1. px (pixels)(像素):屏幕上的点 -- 一般我们HVGA代表320x480像素,这个用的比较多。 2. dip或dp (device independent pixels)(与密度无关的像素)设备独立像素 -- 这个和设备硬件有关,一般我们为了支持WVGA、HVGA和QVGA cwj推荐使用这个,不依赖像素。一种基于屏幕密度的抽象单位。在每英寸160点的显示器上,1dp = 1px。 3. sp (scaled pixels — best for text size)(与刻度无关的像素)放大像素-- 主要处理字体的大小。可以根据用户的字体大小首选项进行缩放。 第 页 Android的UI设计原理 4. in(英寸):长度单位。 5. mm(毫米):长度单位。 6. pt(磅):1/72英寸。 12) 为了使用户界面能够在现在和将来的显示器类型上正常显示,建议你始终使用sp作为文字大小的单位,将dip作为其他元素的单位。当然,也可以考虑使用矢量图形,而不是用位图。 第 页

下载文档到电脑,查找使用更方便

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 6 金币 [ 分享文档获得金币 ] 1 人已下载

下载文档