重庆邮电大学移动互联网项目开发组指南资料【3.1】用户界面基础认识

1重庆邮电大学移动互联工作室智能校园项目开发组指南第三期用户界面基础认识目录类型名称代码界面布局FramelayoutCODERelativelayoutCODETablelayoutCODELinerlayoutCODETabwigetCODE基本控件TextViewCODEEditViewCODEButtonCODE2引言一个好的界面有助于提高用户体验，一个好的界面是用户享受软件的开始，一个好界面的包括：清楚的内容、明确的指示、合理的布局和友好的操作。界面的设计包括图形和文字的合理安排，对控件的适当取舍及功能的选择和处理。在程序设计中，需要对设计的方法反复推敲、琢磨，才能使其达到完美的境界，获得高质量的用户体验。在第二期指南里，我们介绍了如何用虚拟机运行一个简单的HelloWorld程序，现在，让我们一起来学习用户界面的简单开发。本期指南，将分类介绍Android的常用基本控件，并给出部分实例，方便初学者的学习。一、界面的布局Android提供了一个简单的方法来创建位于/res/layout工程目录下的布局文件，它以xml的形式被定义为应用程序的资源。通常情况下，我们都使用AndroidSDK的内建布局进行设计，自定义布局在这里我们暂不做讨论，Eclipse中虽然对界面布局配置了预览功能，但存在一定的误差，如需获取准确的效果，最好布局到模拟器上进行查看。下面的讲解中，我们将分别对Android的常用控件功能做一个简单介绍，随后给出例子和效果图，供大家直观的学习，下面我们就开始吧。1.FrameLayout框架布局FrameLayout视图被设计用来显示一堆子View项。我们可以向布局内加入若干个视图，但每一个View均以布局的左上角作为参照点进行绘制。结构示意图：3XML代码：?xmlversion=1.0encoding=utf-8?FrameLayoutxmlns:android=:id=@+id/frameLayout_android:layout_width=fill_parentandroid:layout_height=fill_parentImageViewandroid:id=@+id/photoandroid:src=@drawable/bg//此处引用了图片资源bg，在/res/drawable中android:layout_width=wrap_contentandroid:layout_height=wrap_content//FrameLayout效果图：2.LinearLayout线性布局LinearLayout视图将它的子View对象排列在一行或一列中，这取决于它的方向属性设置为水平还是垂直。结构示意图：4垂直线性布局：XML代码：?xmlversion=1.0encoding=UTF-8?LinearLayoutxmlns:android=:orientation=verticalandroid:layout_width=fill_parentandroid:layout_height=fill_parentTextViewandroid:layout_width=fill_parentandroid:layout_height=wrap_contentandroid:text=第一行android:gravity=center_verticalandroid:textSize=15ptandroid:background=#ff0000android:layout_weight=1/TextViewandroid:layout_width=fill_parentandroid:layout_height=wrap_contentandroid:text=第二行android:gravity=center_verticalandroid:textSize=15ptandroid:background=#0000ffandroid:layout_weight=15/TextViewandroid:layout_width=fill_parentandroid:layout_height=wrap_contentandroid:text=第三行android:gravity=center_verticalandroid:textSize=15ptandroid:background=#ff0000android:layout_weight=1/TextViewandroid:layout_width=fill_parentandroid:layout_height=wrap_contentandroid:text=第四行android:gravity=center_verticalandroid:textSize=15ptandroid:background=#0000ffandroid:layout_weight=1//LinearLayout效果图：6水平线性布局：XML代码：?xmlversion=1.0encoding=UTF-8?LinearLayoutxmlns:android=:orientation=horizontalandroid:layout_width=fill_parentandroid:layout_height=fill_parentTextViewandroid:layout_width=fill_parentandroid:layout_height=fill_parentandroid:text=第一列android:gravity=center_verticalandroid:textSize=10ptandroid:background=#ff0000android:layout_weight=1/TextViewandroid:layout_width=fill_parentandroid:text=第二列android:gravity=center_verticalandroid:textSize=10ptandroid:background=#0000ffandroid:layout_weight=1/TextViewandroid:layout_width=fill_parentandroid:layout_height=fill_parentandroid:text=第三列android:gravity=center_verticalandroid:textSize=10ptandroid:background=#ff0000android:layout_weight=1/TextViewandroid:layout_width=fill_parentandroid:layout_height=fill_parentandroid:text=第四列android:gravity=center_verticalandroid:textSize=10ptandroid:background=#0000ffandroid:layout_weight=1/7/LinearLayout效果图：3.RelativeLayout相对布局RelativeLayout视图允许你通过子View的相对关系来指定其位置。结构示意图：8XML代码：?xmlversion=1.0encoding=utf-8?RelativeLayoutxmlns:android=:layout_width=fill_parentandroid:layout_height=wrap_contentandroid:padding=10dipTextViewandroid:id=@+id/labelandroid:layout_width=fill_parentandroid:layout_height=wrap_contentandroid:text=请输入用户名：/!--这个EditText放置在上边id为label的TextView的下边--EditTextandroid:id=@+id/entryandroid:layout_width=fill_parentandroid:layout_height=wrap_contentandroid:background=@android:drawable/editbox_backgroundandroid:layout_below=@id/label/!--取消按钮和容器的右边齐平，并且设置左边的边距为10dip--Buttonandroid:id=@+id/cancelandroid:layout_width=wrap_contentandroid:layout_height=wrap_contentandroid:layout_below=@id/entryandroid:layout_alignParentRight=trueandroid:layout_marginLeft=10dipandroid:text=取消/!--确定按钮在取消按钮的左侧，并且和取消按钮的高度齐平--Buttonandroid:id=@+id/okandroid:layout_width=wrap_contentandroid:layout_height=wrap_content9android:layout_toLeftOf=@id/cancelandroid:layout_alignTop=@id/cancelandroid:text=确定//RelativeLayout效果图：4.TableLayout表格布局TableLayout将其子视图排列成若干行，每一行内单独的View对象需要使用TableRow布局View来添加到表格中。TableRow的每一列能够容纳一个View。添加到TableRow中的View项按照其加入的先后顺序逐列放置。结构示意图：XML代码：10?xmlversion=1.0encoding=utf-8?TableLayoutxmlns:android=:layout_width=fill_parentandroid:layout_height=fill_parentandroid:stretchColumns=1TableRowTextViewandroid:text=用户名：android:textStyle=boldandroid:gravity=rightandroid:padding=3dip/EditTextandroid:id=@+id/usernameandroid:padding=3dipandroid:scrollHorizontally=true//TableRowTableRowTextViewandroid:text=密码：android:textStyle=boldandroid:gravity=rightandroid:padding=3dip/EditTextandroid:id=@+id/passwordandroid:password=trueandroid:padding=3dipandroid:scrollHorizontally=true//Ta