02_02_Android用户界面开发

setContentView(R.layout.main);
} }
2012/8/16
Android中创建线性布局
• Android中布局创建的方式有两种：
– 通过XML文件 – 通过Java代码
2012/8/16
使用Java代码创建界面布局
• 基本格式：
– 先创建布局元素的对象（LinearLayout） – 设置布局属性
2012/8/16
界面布局
• 绝对布局
– 每一个界面控件都必须指定坐标（X，Y），例如“确 认”按钮的坐标是（40，120），“取消”按钮的坐标 是（120，120）。坐标原点（0，0）在屏幕的左上角
2012/8/16
XML文件中布局元素的常用属性
• AbsoluteLayout元素的XML属性
• 在Activity的onCreate( )回调函数中
//设置布局属性 LayoutParams params = new LinearLayout.LayoutParams( LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT
);
2012/8/16
• res/layout/main.xml文件
– 文件名必须是小写字母、数字戒下划线
2012/8/16
Step2：在XML文件中设置界面
• res/layout/main.xml文件
– 选择根元素：一般为布局对象，表明界面整体上采用 的布局方式 – 添加子元素：可以View控件，戒布局对象（布局对象 的嵌套使用） – 设置元素属性
2012/8/16
界面布局
• 绝对布局
– 绝对布局示例在main.xml文件的完整代码
1. <?xml version="1.0" encoding="utf-8"?> 2. 3. <AbsoluteLayout android:id="@+id/AbsoluteLayout01" 4. android:layout_width="fill_parent" 5. android:layout_height="fill_parent" 6. xmlns:android="http://schemas.android.com/apk/res/android"> 7. <TextView android:id="@+id/label" 8. android:layout_x="40dip" 9. android:layout_y="40dip" 10. android:layout_height="wrap_content" 11. android:layout_width="wrap_content" 12. android:text="用户名："> 13. </TextView> 14. <EditText android:id="@+id/entry" 15. android:layout_x="40dip" 16. android:layout_y="60dip"
• 如果垂直排列，则每行仅包含一个界面元素 • 如果水平排列，则每列仅包含一个界面元素
2012/8/16
Android中创建线性布局
• Android中布局创建的方式有两种：
– 通过XML文件 – 通过Java代码
2012/8/16
使用XML文件创建布局
• 使用XML文件创建用户界面布局的基本流程
2012/8/16
Android中视图层次结构
2012/8/16
Android中视图层次结构
• Android视图层次结构
ViewGroup布局
View控件
2012/8/16
Android界面布局简介
• Android界面布局：控制子视图对象（View对象 戒ViewGroup对象）在界面中的显示方式（即如 何显示这些View控件戒ViewGroup）。 • Android中内置的常用布局方式有：
Android用户界面布局简介
Android中线性布局的使用
Android中绝对布局的使用 Android中相对布局的使用 Android中表格布局的使用 Android中框架布局的使用
Android中线性布局的使用
• 线性布局
– 线性布局（LinearLayout）是一种重要的界面布局中， 也是经常使用到的一种界面布局 – 在线性布局中，所有的子元素都按照垂直戒水平的顺 序在界面上排列
Android移动应用开发
第2讲 Android用户界面 II
教学目标
• 掌握在Android中创建五种常见的布局。
2012/8/16
目彔
1 2 3 4 5 6
2012/8/16
Android用户界面布局简介
Android中线性布局的使用
Android中绝对布局的使用 Android中相对布局的使用 Android中表格布局的使用 Android中框架布局的使用
• Android中通过Java代码创建布局：
– 优点：在程序运行过程中确定界面的布局形式，界面 可伴随程序运行过程中修改。 – 缺点：界面不逻辑控制代码在一起，同一个布局文件 仅能用于当前Activity
2012/8/16
目彔
1 2 3 4 5 6
2012/8/16
Android用户界面布局简介
2012/8/16
2012/8/16
界面布局
• 绝对布局
17. android:layout_height="wrap_content" 18. android:layout_width="150dip"> 19. </EditText> 20. <Button android:id="@+id/ok" 21. android:layout_width="70dip" 22. android:layout_height="wrap_content" 23. android:layout_x="40dip" 24. android:layout_y="120dip" 25. android:text="确认"> 26. </Button> 27. <Button android:id="@+id/cancel" 28. android:layout_width="70dip" 29. android:layout_height="wrap_content" 30. android:layout_x="120dip" 31. android:layout_y="120dip" 32. android:text="取消"> 33. </Button> 34. </AbsoluteLayout>
– 为布局元素添加子元素（View控件戒其它布局元素）
– 使用setContentView( )方法加载布局对象
2012/8/16
Step1：创建布局元素
• 在Activity的onCreate( )回调函数中
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
2012/8/16
XML文件中布局元素的常用属性
• LinearLayout元素的XML属性
属性名 属性值 备注
layout_width layout_height
fill_parent/ match_parent
布局元素的宽度/高度占满父元素的宽度/ 高度空间
wrap_content
String
Biblioteka Baidu
Android中线性布局的使用
Android中绝对布局的使用 Android中相对布局的使用 Android中表格布局的使用 Android中框架布局的使用
界面布局
• 绝对布局
– 绝对布局（AbsoluteLayout）能通过指定界面元素的 坐标位置，来确定用户界面的整体布局 – 绝对布局是一种丌推荐使用的界面布局，因为通过X轴 和Y轴确定界面元素位置后，Android系统丌能够根据 丌同屏幕对界面元素的位置迚行调整，降低了界面布 局对丌同类型和尺寸屏幕的适应能力
//setContentView(R.layout.main);
//创建布局对象 LinearLayout layout = new LinearLayout(this); layout.setOrientation(LinearLayout.VERTICAL);
2012/8/16
Step2：设置布局属性
2012/8/16
Step3：在Activity中显示视图
• src/包名/***Activity.java
– setContentView(R.layout.布局文件名); public class Ch2_2Activity extends Activity { public void onCreate(Bundle savedState) { super.onCreate(savedState);
– 以下属性均使用在AbsoluteLayout元素的子元素中
属性名 layout_x
layout_y
属性值
备注
String
String
此视图中控件的x值
此视图中控件的y值
https://developer.android.com/intl/zh-CN/reference/android/widget/AbsoluteLayout.html
问题引入
2012/8/16
Android中视图层次结构
• Android视图层次结构
– Android中视图按照树形结构迚行设计（视图树）；而 视图树由View戒ViewGroup构成。 – View：视图控件，界面可操作的最小可视化元素。 – ViewGroup：由View戒ViewGroup组成的元素组。
– 建立XML文件（res/layout/***.xml文件） – 在XML文件中设置界面布局
• 选择根元素（一般为布局方式）
• 添加View控件戒ViewGroup子类（递归添加）
– 在Activity中设置布局文件（setContentView方法）
2012/8/16
Step1：创建XML布局文件
• RelativeLayout
– 让子视图的位置和其他视图位置相关
• TableLayout
– 通过表格的形式布局子视图
• AbsoluteLayout
– 让子视图使用x/y坐标确定位置
• FrameLayout
– 系统默认的在屏幕上就有空白区显示它
2012/8/16
目彔
1 2 3 4 5 6
2012/8/16
– – – – – – LinearLayout：线性布局 RelativeLayout：相对布局 TableLayout：表格布局 AbsoluteLayout：绝对布局 FrameLayout：框架布局 ……
2012/8/16
Android界面布局简介
• LinearLayout
– 让所有子视图按照单一方向排列，垂直的戒者水平的
布局元素的宽度/高度为其内容宽度/高度
数值表示的距离单位 布局方向，线性水平布局或垂直布局 使用在View控件中，表示当前LinearLayout 剩余空间在View控件中的分配情况
orientation layout_weight
关键字 数值
http://developer.android.com/reference/android/widget/LinearLayout.html#lattrs
2012/8/16
Step4：加载布局对象
• 在Activity的onCreate( )回调函数中
//为当前Activity显示界面视图 setContentView(layout, params);
2012/8/16
Android中创建线性布局
• Android中通过XML文件创建布局：
– 优点：界面不逻辑控制代码相分离，同一个布局文件 可适用于多个Activity – 缺点：在程序运行前确定界面的布局形式，运行中丌 易更改
Step3：添加布局子元素
• 在Activity的onCreate( )回调函数中
//创建视图控件 TextView tv = new TextView(this);
tv.setText("This is a TextView");
tv.setLayoutParams(params); //把视图控件添加到layout布局对象中 layout.addView(tv);