第3章android图形用户界面设计

主讲人：温春水1用户界面设计原则2用户界面设计核心概念RelativeLayout…3LinearLayout课程目录45创建View的2种方式UIStyle指交互设计风格，是当用户与操作系统、界面进行交互的时候所得到的直观体验UI

Style的目的UI

Style使用方式StyleGuide影响范围迎合用户的心理模型界面设计简单可操作减少用户的学习负担

整个系统具有自适应性Android应用中的每个界面都是一个ActivtyActivity上展现的都是Android系统中的可视化组件Android中的任何可视化组件都是从

android.view.View继承View类有很多子类，分为三种布局类（Layout）：继承于ViewGroup类视图容器类（View

Container）：继承于ViewGroup类视图类：继承于View类ViewViewGroupTextView视视视视视GridViewListView布布视可以使用XML创建ViewXML文件放置在res/layout下使用XML可以在Activity类中使用代码创建View使用代码Android图形用户界面上的组件可以使用XML文件创建XML文件中使用属性指定组件的属性，如id等。XML文件放置在res/layout下<?xml

version="1.0"

encoding="UTF-8"?><LinearLayout

android:gravity="center_horizontal"android:layout_height="fill_parent"android:layout_width="fill_parent"android:orientation="vertical"

xmlns:android="

"><Button

android:id="@+id/button1"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="确定"/></LinearLayout>每一个视图组件都是一个View类型的对象可以在代码中，使用视图类的构造方法，创建View对象可以调用View对象的setXXX方法，设置其属性public

void

onCreate(Bundle

savedInstanceState){

super.onCreate(savedInstanceState);TextView

tv=new

TextView(this);

tv.setText("您好！Android!");setContentView(tv);}实际应用中，常常需要在代码中获得XML中创建的View对象，进一步对其进行操作可以使用Activity类的findViewById获得XML中的View对象Button

button=(Button)this.findViewById(R.id.button1);button.setText("我以前是确定按钮");Android系统中提供了几种常用的布局方式，每种布局方式都对应API中一个类LinearLayout：线性布局（较多）FrameLayout：层叠布局RelativeLayout：相对布局（较多）TableLayout：表格布局AbsoluteLayout：坐标布局LinearLayout为线性布局，将组件按照属性设置的水平

或垂直方向按顺序排列,排列方式，从左到右，从上到下。平均分配<LinearLayout

android:gravity="center_horizontal"android:layout_height="fill_parent"android:layout_width=“fill_parent”android:orientation=“vertical”

xmlns:android=“

”></LinearLayout><LinearLayout

xmlns:android=""android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="horizontal"

><TextViewandroid:id="@+id/textView2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="TextView"

/><TextViewandroid:id="@+id/textView3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="TextView"

/></LinearLayout>线性布局可以分为水平和垂直方向的布局，可以通过android:orientation来定义方向：android:orientation=“horizontal”表示水平方向，

android:orientation=“vertical”表示垂直方向。android:layout_width表示控件的宽度，android_layout_height表示控件的高度，其属性值有wrap_content、fill_parent、match_parent三种。其中，wrap_content表示填满父控件的空白，fill_parent表示大小刚好足够显示当前控件里的内容，match_parent与fill_parent作用是相同的。android:layout_weight表示控件的权重，描述了控件所占的比例有多大。所有的视图都有layout_weight值，layout_weight值中所占的比率而定。RelativeLayout是相对布局，相对布局指的是某个组件的位置是相对于它所对应的组件的位置与LinearLayout比较：无权重，无方向<RelativeLayout

android:gravity="center_horizontal"android:layout_height="fill_parent"android:layout_width="fill_parent"xmlns:android="

"><Button

android:id="@+id/button1"android:gravity="center_vertical"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text=“按钮1”/></RelativeLayout>默认top/left对齐:android:layout_alignParentLeft=“true”android:layout_alignParentRight="true“与父元素的的左边对齐TextView父元素是RelativeLayout水平居中垂直居中相对于父元素完全居中贴紧父元素的下边缘贴紧父元素的左边缘贴紧父元素的右边缘第一类:属性值为true或falseandroid:layout_centerHorizontalandroid:layout_centerVerticalandroid:layout_centerInparentandroid:layout_alignParentBottomandroid:layout_alignParentLeftandroid:layout_alignParentRightandroid:layout_alignParentTop贴紧父元素的上边缘android:layout_alignWithParentIfMissing如果对应的兄弟元素找不到的话就以父元素做参照物第二类：属性值必须为id的引用名“@id/id-name”android:layout_belowandroid:layout_aboveandroid:layout_toLeftOfandroid:layout_toRightOf在某元素的下方

在某元素的的上方在某元素的左边

在某元素的右边android:layout_alignTopandroid:layout_alignLeftandroid:layout_alignBottomandroid:layout_alignRight本元素的上边缘和某元素的的上边缘对齐本元素的左边缘和某元素的的左边缘对齐本元素的下边缘和某元素的的下边缘对齐本元素的右边缘和某元素的的右边缘对齐第三类：属性值为具体的像素值，如30dip，40pxandroid:layout_marginBottomandroid:layout_marginLeftandroid:layout_marginRightandroid:layout_marginTop离某元素底边缘的距离离某元素左边缘的距离离某元素右边缘的距离离某元素上边缘的距离FrameLayout称为层布局，将组件显示在屏幕的左上角，后面的组件覆盖前面的组件<FrameLayout

android:gravity="center_horizontal"android:layout_height="fill_parent"android:layout_width="fill_parent"android:orientation="vertical"

xmlns:android="

"><Button

android:id="@+id/button1"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="按钮1"/><Button

android:id="@+id/button2"android:layout_height="wrap_content"android:layout_width=“wrap_content”android:text=“按钮2”/>/FrameLayout>TableLayout是表格布局，使用TableRow指定一行，每个组件表示一列<TableLayout

android:layout_height="fill_parent"android:layout_width="fill_parent"

xmlns:android="

"><TableRow><Button

android:id="@+id/button1"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="按钮1"/><Button

android:id="@+id/button2"android:layout_height="wrap_content"android:layout_width="wrap_content"android:text="按钮2"/></TableRow></TableLayout>AbsoluteLayout是绝对布局管理器，指的是指定组件的左上角绝对坐标来指定组件的布局<AbsoluteLayout

android:gravity="center_horizontal"android:layout_height="fill_parent"android:layout_width="fill_parent"android:orientation="vertical"

xmlns:android="

"><Button

android:id="@+id/button1"android:layout_height="wrap_content"android:layout_width="wrap_content"android:layout_x="0px"android:layout_y=“0px”android:text=