第四讲 常见布局方式
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
例子2
自定义视图
在主Activity中直接重写View类，对View类（包含 View类的子类）进行实例化即可。
例子3
自定义视图
单独定义View类，在主Activity中引用
public class My2D extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(new MyView(this)); } }
andriod:gravity：设置内部元素的对齐方式等。
线性布局（LINEARLAYOUT）
例子
嵌套线 性布局1
线性布局
嵌套线 性布局2
垂直布局 此视图占去 屏幕的1/(1+3)
水平布局
此按钮占去 子布局的 2/(2+3)
想一想：
如果要想让嵌套的两个 线性布局，均分屏幕， 应该怎么设置？
<!-- 子组件 -->
</FrameLayout>
✓帧布局的结束标记
帧布局（FRAMELAYOUT）
例子
① 新建一个项目 ② 在res/layout文件夹中
删除原有的布局文件 ③ 在该文件夹下新建一
个andriod XML layout 文件
帧布局（FRAMELAYOUT）
例子
⑤ 向布局中拖拽3个文本 控件
android:layout_width="match_parent" android:layout_height=“match_parent”> <!-- 子组件 --> </FrameLayout>
帧布局（FRAMELAYOUT）
XML文档结构如下：
<?xml version="1.0" encoding="utf-8"?>
layout_alignParentLeft 取值true时，水平居左
layout_toRightOf
id,在id组件的右侧
layout_alignTop
取值id,上边界与id组件上边界对齐
layout_marginBottom
int值，单位dp，底端间距
列表布局（LISTVIEW）
ListView可以显示多条内容，当内容超出屏幕高度时，可 以上下滚动显示
常见布局方式
回顾
上一节我们学习了以下几个内容： 活动生命周期，活动定义及使用方法 意图的定义及使用 服务生命周期，服务的使用 内容提供者的基本含义
引入
每个活动都有一个界面，手机屏幕的不同，界面布局 不同。设计时，该如何考虑界面布局呢？
本章主要知识
View类及ViewGroup类 帧布局（FrameLayout） 线性布局（LinearLayout） 表格布局（TableLayout） 相对布局（RelativeLayout） 列表布局（ListView） 自定义视图 事件控制方法
列表布局（LISTVIEW）
类中自定义数据，在listView中显示
想一想： 在活动中把视图加载
的方法是什么呢？
setContentView(R.layout.main); setContentView(view); 上一个例子使用的是那种方法？为
什么？
自定义视图
自定义视图的三种方法
自定义视图
单独定义View类，在布局文件中引用。 创建项目如下：
自定义视图
MyView.java代码如下：
自定义视图
布局文件main.xml代码如下：
运行效果
作业：
1、简述自定义视图的三种方法及其操作步骤 2、如何在一个界面里布局4个按钮
要求：4个按钮分为两行、两列，与屏幕上下、水平居中对齐， 请写出布局代码
android:layout_width="match_parent"
android:layout_height=“match_parent”>
<!-- 子组件 --> </FrameLayout>
✓Android支持的各种组件，在下 一章将详细阐述
帧布局（FRAMELAYOUT）
XML文档结构如下：
⑥ 改变文本控件属性， 具体代码如右图
线性布局（LINEARLAYOUT）
LinearLayout（线性布局）
是最常用的布局方式。
以水平或垂直的方式排列子对象。
一个方向只能有一个对象。
可以嵌套：一个线性布局内还可以定义线性布局。
垂直排列
LinearLayout 常用属性（布局参数）：
表格布局（TABLELAYOUT）
以多行多列的方式显示子对象。
每一行为一个TableRow 。
每一行可以拥有0个或多个的单元格（cell）。
每个单元格内是一个View对象。
TableLayout 容器不会显示行 、列 或单元格的边框线。
列的属性
Shrinkable：设置列的宽度是否可收缩，收缩指表格能够适应其 父容器的大小。
VIEW类及VIEWGROUP类
View类是屏幕元素的基类。所有界面元素都是其子类。 View类的属性如下：
属性 android:background android:clickable android:visible android:focusable
含义 设置背景，可以是drawable，也可以是色彩 是否响应单击事件 控制View的可见性 控件View是否可以获取焦点
相对布局（RELATIVELAYOUT）
相对于其他对象的位置显示子对象，常用于表单中。 是设计UI的有力工具，通常用于比较复杂的布局。
相对布局（RELATIVELAYOUT）
XML属性如下：
属性
含义
layout_centerHorizontal 取值true时，水平居中
layout_centerInParent 取值true时，居中显示
在主Activity中直接重写View类 单独定义View类，在主Activity中引用 单独定义View类，在布局文件中引用
自定义视图
在主Activity中直接重写View类，对View类（包含 View类的子类）进行实例化即可。
例子1
自定义视图
在主Activity中直接重写View类，对View类（包含 View类的子类）进行实例化即可。
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height=“match_parent”>
填充整个屏幕宽度
andriod:orientation：设置排列方向
android:layout_width：设置宽
wenku.baidu.com
按控件大小填充
android:layout_height：设置高
android:layout_weight：设置控件的重要程度。默认为零，根 据weight值分配控件暂用屏幕大小。
✓定义该布局大小 ✓ match_parent与父控件相同 ✓wrap_content与内容大小相同
✓可以给定具体的数值，单位最 好为dp
帧布局（FRAMELAYOUT）
XML文档结构如下：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
ListView也继承View类
列表布局（LISTVIEW）
listView要显示数据，数据一般有以下几个来源： 自定义的array，需要预先定义array，在listview中使用 android:entries="@array/xxx“ 数据库，需要先查询数据库，再操作 在类中自定义的数组，直接使用adapter即可
<FrameLayout
✓帧布局开始
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height=“match_parent”>
<!-- 子组件 -->
View ViewGroup
FrameLayout LinearLayout RalativeLayout AbsoluteLayout
TableLayout
帧布局（FRAMELAYOUT）
分层显示，每层一个组件 最后放入的组件在顶层 默认组件左上角对齐（如右上图） 如果想更改组件对齐方式，每个子组件内添加
android:layout_width="match_parent"
android:layout_height=“match_parent”>
<!-- 子组件 -->
</FrameLayout>
帧布局（FRAMELAYOUT）
XML文档结构如下：
<?xml version="1.0" encoding="utf-8"?>
</FrameLayout>
帧布局（FRAMELAYOUT）
XML文档结构如下：
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" ✓XML命名空间
Stretchable：设置列的宽度是否可拉伸，拉伸指可填满表格中空 余的空间。
Collapsed：设置列是否被隐藏。
表格布局（TABLELAYOUT）
XML文档格式
行 列，每个组件为一列
表格布局
想一想： 一行里能放多列吗？
动手验证： 多列组件，超过屏幕宽
度怎么办？超出的还显 示吗？实验课上，请你 自己实验验证一下
列表布局（LISTVIEW）
自定义的array
列表布局（LISTVIEW）
要显示数据库和自定义的数组时，一般需要使用适配 器（Adapter）。
使用listview.setAdapter(ListAdapter)方法来加载数据资 源。
listView 中常用的适配器有ArrayAdapter，SimpleAdapter 和SimpleCursorAdapter等。
android:id
View标识符，可通过findViewById方法获取
VIEW类及VIEWGROUP类
ViewGroup类是View的子类 是布局对象的父类 布局常以XML的形式出现 XML布局文件定义在res/layout文件夹下
布局类之间的关系如下： 子类继承父类属性
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height=“match_parent”> <!-- 子组件 --> </FrameLayout>
layout_gravity属性（右下图的子组件属性为center）
帧布局（FRAMELAYOUT）
XML文档结构如下：
<?xml version="1.0" encoding="utf-8"?> <FrameLayout
✓XML编码的固定格式
xmlns:android="http://schemas.android.com/apk/res/android"
自定义视图
在主Activity中直接重写View类，对View类（包含 View类的子类）进行实例化即可。
例子3
自定义视图
单独定义View类，在主Activity中引用
public class My2D extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(new MyView(this)); } }
andriod:gravity：设置内部元素的对齐方式等。
线性布局（LINEARLAYOUT）
例子
嵌套线 性布局1
线性布局
嵌套线 性布局2
垂直布局 此视图占去 屏幕的1/(1+3)
水平布局
此按钮占去 子布局的 2/(2+3)
想一想：
如果要想让嵌套的两个 线性布局，均分屏幕， 应该怎么设置？
<!-- 子组件 -->
</FrameLayout>
✓帧布局的结束标记
帧布局（FRAMELAYOUT）
例子
① 新建一个项目 ② 在res/layout文件夹中
删除原有的布局文件 ③ 在该文件夹下新建一
个andriod XML layout 文件
帧布局（FRAMELAYOUT）
例子
⑤ 向布局中拖拽3个文本 控件
android:layout_width="match_parent" android:layout_height=“match_parent”> <!-- 子组件 --> </FrameLayout>
帧布局（FRAMELAYOUT）
XML文档结构如下：
<?xml version="1.0" encoding="utf-8"?>
layout_alignParentLeft 取值true时，水平居左
layout_toRightOf
id,在id组件的右侧
layout_alignTop
取值id,上边界与id组件上边界对齐
layout_marginBottom
int值，单位dp，底端间距
列表布局（LISTVIEW）
ListView可以显示多条内容，当内容超出屏幕高度时，可 以上下滚动显示
常见布局方式
回顾
上一节我们学习了以下几个内容： 活动生命周期，活动定义及使用方法 意图的定义及使用 服务生命周期，服务的使用 内容提供者的基本含义
引入
每个活动都有一个界面，手机屏幕的不同，界面布局 不同。设计时，该如何考虑界面布局呢？
本章主要知识
View类及ViewGroup类 帧布局（FrameLayout） 线性布局（LinearLayout） 表格布局（TableLayout） 相对布局（RelativeLayout） 列表布局（ListView） 自定义视图 事件控制方法
列表布局（LISTVIEW）
类中自定义数据，在listView中显示
想一想： 在活动中把视图加载
的方法是什么呢？
setContentView(R.layout.main); setContentView(view); 上一个例子使用的是那种方法？为
什么？
自定义视图
自定义视图的三种方法
自定义视图
单独定义View类，在布局文件中引用。 创建项目如下：
自定义视图
MyView.java代码如下：
自定义视图
布局文件main.xml代码如下：
运行效果
作业：
1、简述自定义视图的三种方法及其操作步骤 2、如何在一个界面里布局4个按钮
要求：4个按钮分为两行、两列，与屏幕上下、水平居中对齐， 请写出布局代码
android:layout_width="match_parent"
android:layout_height=“match_parent”>
<!-- 子组件 --> </FrameLayout>
✓Android支持的各种组件，在下 一章将详细阐述
帧布局（FRAMELAYOUT）
XML文档结构如下：
⑥ 改变文本控件属性， 具体代码如右图
线性布局（LINEARLAYOUT）
LinearLayout（线性布局）
是最常用的布局方式。
以水平或垂直的方式排列子对象。
一个方向只能有一个对象。
可以嵌套：一个线性布局内还可以定义线性布局。
垂直排列
LinearLayout 常用属性（布局参数）：
表格布局（TABLELAYOUT）
以多行多列的方式显示子对象。
每一行为一个TableRow 。
每一行可以拥有0个或多个的单元格（cell）。
每个单元格内是一个View对象。
TableLayout 容器不会显示行 、列 或单元格的边框线。
列的属性
Shrinkable：设置列的宽度是否可收缩，收缩指表格能够适应其 父容器的大小。
VIEW类及VIEWGROUP类
View类是屏幕元素的基类。所有界面元素都是其子类。 View类的属性如下：
属性 android:background android:clickable android:visible android:focusable
含义 设置背景，可以是drawable，也可以是色彩 是否响应单击事件 控制View的可见性 控件View是否可以获取焦点
相对布局（RELATIVELAYOUT）
相对于其他对象的位置显示子对象，常用于表单中。 是设计UI的有力工具，通常用于比较复杂的布局。
相对布局（RELATIVELAYOUT）
XML属性如下：
属性
含义
layout_centerHorizontal 取值true时，水平居中
layout_centerInParent 取值true时，居中显示
在主Activity中直接重写View类 单独定义View类，在主Activity中引用 单独定义View类，在布局文件中引用
自定义视图
在主Activity中直接重写View类，对View类（包含 View类的子类）进行实例化即可。
例子1
自定义视图
在主Activity中直接重写View类，对View类（包含 View类的子类）进行实例化即可。
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height=“match_parent”>
填充整个屏幕宽度
andriod:orientation：设置排列方向
android:layout_width：设置宽
wenku.baidu.com
按控件大小填充
android:layout_height：设置高
android:layout_weight：设置控件的重要程度。默认为零，根 据weight值分配控件暂用屏幕大小。
✓定义该布局大小 ✓ match_parent与父控件相同 ✓wrap_content与内容大小相同
✓可以给定具体的数值，单位最 好为dp
帧布局（FRAMELAYOUT）
XML文档结构如下：
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
ListView也继承View类
列表布局（LISTVIEW）
listView要显示数据，数据一般有以下几个来源： 自定义的array，需要预先定义array，在listview中使用 android:entries="@array/xxx“ 数据库，需要先查询数据库，再操作 在类中自定义的数组，直接使用adapter即可
<FrameLayout
✓帧布局开始
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height=“match_parent”>
<!-- 子组件 -->
View ViewGroup
FrameLayout LinearLayout RalativeLayout AbsoluteLayout
TableLayout
帧布局（FRAMELAYOUT）
分层显示，每层一个组件 最后放入的组件在顶层 默认组件左上角对齐（如右上图） 如果想更改组件对齐方式，每个子组件内添加
android:layout_width="match_parent"
android:layout_height=“match_parent”>
<!-- 子组件 -->
</FrameLayout>
帧布局（FRAMELAYOUT）
XML文档结构如下：
<?xml version="1.0" encoding="utf-8"?>
</FrameLayout>
帧布局（FRAMELAYOUT）
XML文档结构如下：
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" ✓XML命名空间
Stretchable：设置列的宽度是否可拉伸，拉伸指可填满表格中空 余的空间。
Collapsed：设置列是否被隐藏。
表格布局（TABLELAYOUT）
XML文档格式
行 列，每个组件为一列
表格布局
想一想： 一行里能放多列吗？
动手验证： 多列组件，超过屏幕宽
度怎么办？超出的还显 示吗？实验课上，请你 自己实验验证一下
列表布局（LISTVIEW）
自定义的array
列表布局（LISTVIEW）
要显示数据库和自定义的数组时，一般需要使用适配 器（Adapter）。
使用listview.setAdapter(ListAdapter)方法来加载数据资 源。
listView 中常用的适配器有ArrayAdapter，SimpleAdapter 和SimpleCursorAdapter等。
android:id
View标识符，可通过findViewById方法获取
VIEW类及VIEWGROUP类
ViewGroup类是View的子类 是布局对象的父类 布局常以XML的形式出现 XML布局文件定义在res/layout文件夹下
布局类之间的关系如下： 子类继承父类属性
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height=“match_parent”> <!-- 子组件 --> </FrameLayout>
layout_gravity属性（右下图的子组件属性为center）
帧布局（FRAMELAYOUT）
XML文档结构如下：
<?xml version="1.0" encoding="utf-8"?> <FrameLayout
✓XML编码的固定格式
xmlns:android="http://schemas.android.com/apk/res/android"