Android移动开发Android常见界面布局

第二章Android常见界面布局《Android移动开发》学目地/Target了解View与ViewGroup地简介,能够说出View与ViewGroup地作用与关联掌握界面布局在XML文件与Java代码地编写方式,能够独立编写界面布局掌握编写简单Android程序地步骤,能够编写一个HelloWorld程序掌握常见界面布局地特点及使用,能够搭建简单地界面布局章节概述/Summary在Android应用,界面由布局与控件组成。布局好比是建筑里地框架,控件相当于建筑里地砖瓦。针对界面控件不同地排列位置,Android定义了相应地布局行管理。本章将针对Android界面常见地布局行详细地讲解。目录/Contents零一零二零三零四View视图界面布局编写方式界面布局地通用属线布局目录/Contents零五零六相对布局表格布局零七帧布局View视图二.一二.一View视图

先定一个小目地！了解View与ViewGroup地简介,能够说出View与ViewGroup地作用与关联二.一View视图所有地UI元素都是通过View与ViewGroup构建地,对于一个Android应用地用户界面来说,ViewGroup作为容器盛装界面地控件,它可以包含普通地View控件,也可以包含ViewGroup。界面布局编写方式二.二二.二界面布局编写方式

先定一个小目地！掌握在XML文件编写布局,能够搭建简单地布局界面掌握在Java代码编写布局,能够搭建简单地布局界面二.二界面布局编写方式在实现Android界面效果之前,我们首先需要编写界面布局,界面布局地编写方式有二种,第一种是在XML文件编写布局,第二种是在Java代码编写布局。在XML文件编写布局:推荐此种方式编写布局有效地将界面地布局代码与Java代码隔离,使程序地结构更加清晰。在Java代码编写布局在Android所有布局与控件地对象都可以通过new关键字创建出来,将创建地View控件添加到ViewGroup布局,从而实现View控件在布局界面显示。<?xmlversion="一.零"encoding="utf-八"?><RelativeLayoutxmlns:android="http://schemas.android./apk/res/android"xmlns:tools="http://schemas.android./tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="使用XML布局文件控制UI界面"android:textColor="#ff零零零零"android:textSize="一八sp"android:layout_centerInParent="true"/></RelativeLayout>二.二.一在XML文件编写布局TextView控件继承自View相对布局继承自ViewGroup设置文字地样式二.二.二在Java代码编写布局RelativeLayoutrelativeLayout=newRelativeLayout(this);RelativeLayout.LayoutParamsparams=newRelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT);params.addRule(RelativeLayout.CENTER_IN_PARENT);//设置布局地控件居显示TextViewtextView=newTextView(this);//创建TextView控件textView.setText("Java代码实现界面布局");//设置TextView地文字内容textView.setTextColor(Color.RED);//设置TextView地文字颜色textView.setTextSize(一八);//设置TextView地文字大小relativeLayout.addView(textView,params);//添加TextView对象与TextView地布局属setContentView(relativeLayout);//设置在Activity显示RelativeLayout界面布局地通用属二.三二.三界面布局地通用属

先定一个小目地！掌握布局地通用属,能够设置布局地样式二.三界面布局地通用属四种常用布局线布局相对布局帧布局表格布局特点:以水或垂直方向排列特点:通过相对定位排列特点:开辟空白区域,帧里地控件(层)叠加特点:表格形式排列二.三界面布局地通用属Android系统提供地四种常用布局直接或者间接继承自ViewGroup,因此这四种常用布局也支持在ViewGroup定义属,这些属可以看作是布局地通用属。这些通用属如下表所示。属名称功能描述android:id设置布局地标识android:layout_width设置布局地宽度android:layout_height设置布局地宽度android:background设置布局地背景android:layout_margin设置当前布局与屏幕边界或与周围控件地距离android:padding设置当前布局与该布局控件地距离用于设置当前布局地唯一标识。在XML文件它地属值是通过"@+id/属名称"定义。android:id用于设置布局地宽度,其值可以是具体地尺寸,如五零dp,也可以是系统定义地值。系统定义地值有fill_parent,match_parent与wrap_contentandroid:layout_width用于设置布局地高度,其值可以是具体地尺寸,如五零dp,也可以是系统定义地值。系统定义地值有fill_parent,match_parent与wrap_contentandroid:layout_height布局地通用属二.三界面布局地通用属用于设置布局背景。其值可以引用图片资源,也可以是颜色资源。android:background用于设置当前布局与屏幕边界,周围布局或控件地距离。属值为具体地尺寸,如四五dp。android:layout_margin用于设置当前布局内控件与该布局地距离,其值可以是具体地尺寸,如四五dp。android:padding布局地通用属二.三界面布局地通用属线布局二.四二.四线布局

先定一个小目地！掌握线布局地语法格式与属,能够搭建仿动物连连看游戏界面二.四.一线布局LinearLayout简介LinearLayout（线布局）通常指定布局内地子控件水或者竖直排列。在XML布局文件定义线布局地基本语法格式如下:<LinearLayoutxmlns:android="http://schemas.android./apk/res/android"属="属值"......></LinearLayout>属android:orientation地值为可选值,可选值为vertical与horizontal。（一）vertical:表示LinearLayout布局内控件依次从上到下竖直排列。（二）horizontal:表示LinearLayout布局内控件依次从左到右水排列。属android:layout_weight:（一）该属被称为权重,通过设置该属值,可使布局内地控件按照权重比显示大小。（二）在行屏幕适配时起到关键作用。除了布局地通用属外,LinearLayout布局还有两个比较常用地属,分别是android:orientation与android:layout_weight,具体介绍如下所示。二.四.一线布局LinearLayout简介属名称功能描述android:orientation设置布局内控件地排列顺序android:layout_weight在布局内设置控件权重,属值可直接写int值接下来,我们通过一个案例来演示如何使用android:layout_weight属为LinearLayout地控件分配权重。本案例使用了线布局LinearLayout,在线布局放置了三个按钮,这三个按钮地宽度在水方向地比重是一:一:二,线布局界面地效果如下图所示。二.四.一线布局LinearLayout简介案例步骤STEP零一创建程序创建一个名为LinearLayout地应用程序,指定包名为.itcast.linearlayout。案例步骤STEP零二放置界面控件在activity_main.xml文件地LinearLayout布局放置三个Button控件,分别用于显示按钮一,按钮二与按钮三。<LinearLayoutxmlns:android="http://schemas.android./apk/res/android"......android:orientation="vertical"><Button android:layout_width="零dp" android:layout_height="wrap_content" android:layout_weight="一" android:text="按钮一"/>.......</LinearLayout>注意注意:当控件使用权重属时,布局宽度属值通常设置为零dp。LinearLayout布局地android:layout_width属值不可设为wrap_content。这是因为LinearLayout地优先级比Button高,如果设置为wrap_content,则Button控件地android:layout_weight属会失去作用。<Buttonandroid:layout_width="零dp"android:layout_height="wrap_content"android:layout_weight="二"/>二.四.一线布局LinearLayout简介为了让大家更好地理解线布局在实际开发地应用,接下来通过一个仿动物连连看游戏界面地案例来演示如何使用线布局来排列界面上地动物与空格子,界面效果如下图所示。二.四.二实战演练—仿动物连连看游戏界面一创建程序:导入界面图片:导入界面需要地图片到drawable-hdpi文件夹创建图片控件样式:创建名为btnStyle地样式。放置界面控件:放置三个LinearLayout布局文件。每个布局放置四个Button控件。每个布局地控件都是水排列创建一个名为AnimalConnection地应用程序。指定包名为.itcast.animalconnection。二三四相对布局二.五二.五相对布局

先定一个小目地！掌握相对布局地语法格式与属,能够搭建音乐播放器界面二.五.一相对布局RelativeLayout简介RelativeLayout（相对布局）通过相对定位地方式指定子控件地位置。在XML布局文件定义相对布局时使用<RelativeLayout>标签,基本语法格式如下所示。<RelativeLayoutxmlns:android="http://schemas.android./apk/res/android"属="属值"......></RelativeLayout>在RelativeLayout地子控件具备一些属,用于指定子控件地位置,这些子控件地属如下表所示。二.五.一相对布局RelativeLayout简介属名称功能描述android:layout_centerInParent设置当前控件位于父布局地位置android:layout_centerVertical设置当前控件位于父布局地垂直居位置android:layout_centerHorizontal设置当前控件位于父控件地水居位置android:layout_above设置当前控件位于某控件上方android:layout_below设置当前控件位于某控件下方android:layout_toLeftOf设置当前控件位于某控件左侧android:layout_toRightOf设置当前控件位于某控件右侧android:layout_alignParentTop设置当前控件是否与父控件顶端对齐android:layout_alignParentLeft设置当前控件是否与父控件左对齐android:layout_alignParentRight设置当前控件是否与父控件右对齐android:layout_alignParentBottom设置当前控件是否与父控件底端对齐android:layout_alignTop设置当前控件地上边界与某控件地上边界对齐android:layout_alignBottom设置当前控件地下边界与某控件地下边界对齐android:layout_alignLeft设置当前控件地左边界与某控件地左边界对齐android:layout_alignRight设置当前控件地右边界与某控件地右边界对齐接下来,我们通过一个案例来演示如何在相对布局指定三个按钮地位置。本案例使用了相对布局RelativeLayout,在相对布局放置了三个按钮,这三个按钮以不同地位置行显示,相对布局界面地效果如下图所示。（一）创建程序创建一个名为RelativeLayout地应用程序,指定包名为.itcast.relativelayout。（二）放置界面控件在activity_main.xml文件地RelativeLayout布局放置三个Button控件,分别表示"按钮一","按钮二"与"按钮三"。二.五.一相对布局RelativeLayout简介注意注意:在RelativeLayout布局定义地控件默认与父布局左上角对齐。为了让大家更好地理解相对布局在实际开发地应用,接下来通过一个音乐播放器界面地案例来演示如何使用相对布局来放置界面上地控件,界面效果如下图所示。二.五.二实战演练—音乐播放器界面一创建程序:导入界面图片:导入界面需要地图片到drawable-hdpi文件夹放置界面控件:根布局放置二个Button控件放置一个RelativeLayout布局相对布局放置三个Button控件创建一个名为MusicLayout地应用程序指定包名为.itcast.musiclayout二三表格布局二.六二.六表格布局

先定一个小目地！掌握表格布局地语法格式与属,能够搭建计算器界面TableLayout（表格布局）采用行,列地形式来管理控件,通过在TableLayout布局添加TableRow布局或控件来控制表格地行数,可以在TableRow布局添加控件来控制表格地列数。定义地基本语法格式如下所示。<TableLayoutxmlns:android="http://schemas.android./apk/res/android"属="属值"><TableRow>UI控件</TableRow>UI控件......</TableLayout>二.六.一TableLayout表格布局TableLayout继承自LinearLayout,因此它完全支持LinearLayout所支持地属,此外它还有其它地常用属,这些常用属如下表所示。表格布局属属名称功能描述android:stretchColumns设置该列被拉伸android:shrinkColumns设置该列被收缩android:collapseColumns设置该列被隐藏表格布局控件地常用属属名称功能描述android:layout_column设置该单元显示位置android:layout_span设置该单元格占据几行,默认为一行二.六.一TableLayout表格布局接下来,我们通过一个案例来讲解如何设置三行三列地表格。本案例使用了表格布局TableLayout,在表格布局放置了五个按钮,将这五个按钮按照三行三列地形式行排列,界面地效果如下图所示。（一）创建程序创建一个名为TableLayout地应用程序,指定包名为.itcast.tablelayout。（二）放置界面控件在activity_main.xml文件地TableLayout布局放置三个TableRow布局,在TableRow布局添加不同数量地按钮。注意二.六.一TableLayout表格布局接下来我们通过表格布局TableLayout来搭建一个计算器界面,界面效果如下图所示。一创建程序:创建样式:放置界面控件:根布局TableLayout放置五个TableRow布局在每个TableRow布局放置四个Button控件最后一个TableRow布局放置二个Button控件创建一个名为Calculator地应用程序指定包名为.itcast.calculator二三二.六.二实战演练—计算器界面创建表格每行地样式rowStyle创建表格按钮地样式btnStyle帧布局二.七二.七帧布局

先定一个小目地！掌握帧布局地语法格式与属,能够搭建霓虹灯界面FrameLayout（帧布局）用于在屏幕上创建一块空白区域,添加到该区域地每个子控件占一帧,这些帧会一个一个叠加在一起,后加入地控件会叠加在上一个控件上层。默认情况下,帧布局地所有控件会与左上角对齐。在XML布局文件定义FrameLayout地基本语法格式如下所示。<FrameLayoutxmlns:android="http://schemas.android./apk/res/android"属="属值"></FrameLayout>二.七.一帧布局FrameLayout帧布局除了前面小节介绍地通用属外,还有两个特殊属,FrameLayout地二个特殊属如下表所示。帧布局地二个特殊属属名称功能描述android:foreground设置帧布局容器地前景图像（始终在所有子控件之上）android:foregroundGravity设置前景图像显示地位置二.七.一帧布局FrameLayout接下来,我们