单击以编辑母片 Content 标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 2

Size: px

Start display at page:

Download "单击以编辑母片 Content 标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 2"

钝奕
7 years ago
Views:

1 单击以编辑母片标题样式安卓系统 Android 的排版授课老师 : 谢兆贤 2016/4/18 1

2 单击以编辑母片 Content 标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 2

3 单击以编辑母片知识点ㄧ标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 3

4 单击以编辑母片 LinearLayout 排标题样式版模式 q LinearLayout 范例 LinearLayout 标签是一种接口组件的编排方式, 顾名思义它就是依照线性次序由上往下逐一排列接口组件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" android:layout_width= match_parent" android:layout_height= match_parent > <TextView android:text=" 姓名 :" /> <EditText android:text=" 输入姓名 " /> <Button android:text=" 确定 " /> </LinearLayout>??? 4

5 单击以编辑母片 LinearLayout 排标题样式版模式 q 水平排列的 LinearLayout <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="horizontal" android:layout_width= match_parent" android:layout_height= match_parent" > <TextView android:layout_width="wrap_content" android:text=" 姓名 :" /> <EditText android:layout_width="wrap_content" android:text=" 输入姓名 " /> <Button android:layout_width="wrap_content" android:text=" 确定 " /> </LinearLayout>??? 5

6 单击以编辑母片 LinearLayout 排标题样式版模式 q 二层 LinearLayout <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:orientation="vertical" > <LinearLayout android:orientation="horizontal android:background="#ffffff" > <TextView android:textcolor="#000000" android:text=" 姓名 :" /> <EditText android:text=" 输入姓名 " /> </LinearLayout> <Button android:text=" 确定 " /> </LinearLayout> 6

7 单击以编辑母片 LinearLayout 排标题样式版模式 q 使用二层 LinearLayout 的婚姻建议程序 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android= " android:orientation="vertical" android:layout_width= match_parent" android:layout_height="match_parent" android:gravity="center_horizontal" > <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/promptsex" /> <Spinner android:id="@+id/spnsex" android:layout_width="match_parent" android:layout_height="wrap_content" android:drawselectorontop="true" android:prompt="@string/spnsexprompt" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/promptage" /> <Spinner android:id="@+id/spnage" android:layout_width="match_parent " android:layout_height="wrap_content" android:drawselectorontop="true" android:prompt="@string/spnageprompt" /> </LinearLayout> ( 接下页 ) 7

8 单击以编辑母片 LinearLayout 排标题样式版模式 q 使用二层 LinearLayout 的婚姻建议程序 ( 接上页 ) <Button android:id="@+id/btndosug" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/promptbtndosug" android:paddingleft="20dp" android:paddingright="20dp" /> <TextView android:id="@+id/txtresult" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/sugresult" /> </LinearLayout> 8

9 单击以编辑母片知识点二标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 9

10 单击以编辑母片 TableLayout 排标题样式版模式 q TableLayout 范例 TableLayout 就是把接口组件依照表格的方式排列, 也就是由上往下一列接着一列, 而且前后每一个字段依序对齐 <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android=" android:layout_width="400dp" android:layout_height="match_parent" android:layout_gravity="center_horizontal" > <TableRow> <TextView android:text=" 姓名 :"/> <TextView android:text=" 性别 :"/> <TextView android:text=" 生日 :"/> </TableRow> <TableRow> <EditText android:text=" 输入姓名 "/> <EditText android:text=" 输入性别 "/> <EditText android:text=" 输入生日 "/> </TableRow> <Button android:text=" 确定 "/> </TableLayout> 10

11 单击以编辑母片 TableLayout 排标题样式版模式 q 使用 TableLayout 的注意事项 1. 包裹在 TableRow 标签中的接口组件它的 android:layout_width 和 android:layout_height 属性都没有作用, 也就是说不管把它们的值设定为 match_parent 或是 wrap_content, 都一律使用 wrap_content 模式, 因此可以直接把这二个属性省略 2. 像是 android:backgroud 设定底色的属性 android:gravity 设定对齐方式的属性和 android:layout_margin 设定组件的距离等类似功能的属性都可以用于 TableLayout 和 TableRow 卷标中, 例如可以在上面范例的第一个 TableRow 标签中加入 android:gravity= center_horizontal 就可以将第一列的接口组件做水平置中对齐 11

12 单击以编辑母片 TableLayout 排标题样式版模式 3. 如果 TableLayout 标签中的接口组件没有被包含在 TableRow 标签中, 则该组件会自成一列如上面范例的 Button 组件 4. 如果要让 TableRow 标签中的组件依比例使用整个 Table 的宽度, 可以藉助 android:layout_weight 属性, 它会将同一列组件所有的 weight 值加总后, 再依照每一个组件的 weight 值的比例计算所占的宽度 12

13 单击以编辑母片 TableLayout 排标题样式版模式 <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android=" roid" android:layout_width="400dp" android:layout_height="match_parent" android:layout_gravity="center_horizontal" > <TableRow> <TextView android:text=" 姓名 :" </TableRow> android:layout_weight="1"/> <TextView android:text=" 性別 :" android:layout_weight="1"/> <TextView android:text=" 生日 :" android:layout_weight="1"/> 13

14 单击以编辑母片 TableLayout 排标题样式版模式 5. 如果希望 TableLayout 标签中的 TableRow 内组件可以错开如下的画面, 可以在 TableLayout 标签中再增加一个 TableLayout 标签 14

15 单击以编辑母片 TableLayout 排标题样式版模式 <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android=" > <TableLayout > <TableRow> <TextView android:text=" 姓名 :"/> </TableRow> <TableRow> <EditText android:text=" 输入姓名 "/> </TableRow> </TableLayout> <TableRow> </TableRow> <TableRow> </TableRow> <Button android:text=" 确定 "/> </TableLayout> 15

16 单击以编辑母片 TableLayout 排 <TableLayout 标题样式版模式 <?xml version="1.0" encoding="utf-8"?> > <TableRow> <TextView android:layout_width= match_parent" android:layout_height="wrap_content" /> <RadioGroup <RadioButton /> </RadioGroup> </TableRow> <RadioButton /> <TableRow> <TextView android:layout_width= match_parent" android:layout_height="wrap_content" /> <RadioGroup <RadioButton /> <RadioButton /> <RadioButton /> </RadioGroup> </TableRow> <Button android:layout_width= match_parent" android:layout_height="wrap_content" /> <TextView android:layout_width= match_parent" android:layout_height="wrap_content" /> </TableLayout> 16

17 单击以编辑母片 TableLayout 排标题样式版模式 17

18 单击以编辑母片知识点三标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 18

19 单击以编辑母片 RelativeLayout 标题样式排版模式 q RelativeLayout 范例 RelativeLayout 是靠指定接口组件之间的相对位置关系来决定它们的排列方式, 为了能够辨识每一个组件, 我们必须指定每一个组件的 id 名称 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout > <TextView android:id="@+id/txt1 /> <TextView android:id="@+id/txt2" android:layout_torightof="@id/txt1"/> <EditText android:id="@+id/edt1" android:layout_below="@id/txt1"/> <EditText android:id="@+id/edt2" android:layout_torightof="@id/edt1"/> <Button android:id="@+id/btn1" android:layout_below="@id/edt1"/> </RelativeLayout> 19?????

20 单击以编辑母片 RelativeLayout 标题样式排版模式 q RelativeLayout 范例 ( 加上 align 属性 ) <?xml version="1.0" encoding="utf-8"?> <RelativeLayout > <TextView android:id="@+id/txt1" /> <TextView android:id="@+id/txt2 android:layout_torightof="@id/txt1"/> <EditText android:id="@+id/edt1" android:layout_below="@id/txt1"/> <EditText android:id="@+id/edt2" android:layout_torightof="@id/edt1 android:layout_aligntop="@id/edt1"/> <Button android:id="@+id/btn1" android:layout_below="@id/edt1"/> </RelativeLayout> 20???

21 单击以编辑母片 RelativeLayout 标题样式排版模式 q RelativeLayout 相关属性属性类别属性名称属性值说明指定相对位置指定对齐方式 layout_toleftof id/ 某一个接口组件 id 名称将接口组件置于指定接口组件的左边 layout_torightof id/ 某一个接口组件 id 名称将接口组件置于指定接口组件的右边 layout_above id/ 某一个接口组件 id 名称将接口组件置于指定接口组件的上方 layout_below id/ 某一个接口组件 id 名称将接口组件置于指定接口组件的下方 layout_alignleft id/ 某一个接口组件 id 名称将接口组件和指定接口组件的左边对齐 layout_alignright id/ 某一个接口组件 id 名称将接口组件和指定接口组件的右边对齐 layout_aligntop id/ 某一个接口组件 id 名称将接口组件和指定接口组件的上缘对齐 layout_alignbottom id/ 某一个接口组件 id 名称将接口组件和指定接口组件的下缘对齐 layout_alignbaseline id/ 某一个接口组件 id 名称将接口组件和指定接口组件的中心线对齐 layout_alignparentleft true 或 false 将接口组件对齐它所在的外框左边 layout_alignparentright true 或 false 将接口组件对齐它所在的外框右边 layout_alignparenttop true 或 false 将接口组件对齐它所在的外框上缘 layout_alignparentbottom true 或 false 21 将接口组件对齐它所在的外框下缘

22 单击以编辑母片 RelativeLayout 标题样式排版模式 q 使用 RelativeLayout 的注意事项最先宣告的接口组件会放在屏幕的左上方, 如果后面宣告的接口组件指定的位置是在第一个接口组件的左边或是上方, 那么就会看不到这个接口组件例如以下范例将看不到 edt1 组件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout > <TextView android:id="@+id/txt1 /> <EditText android:id="@+id/edt1 android:layout_above="@id/txt1"/>... </RelativeLayout> 22

23 单击以编辑母片 RelativeLayout 标题样式排版模式 q 使用 RelativeLayout 的注意事项这个问题有二种解决方法可以利用 android:layout_center 相关的属性把第一个宣告的组件往屏幕的右下方移动调整接口组件宣告的次序, 例如 : 把范例中的 edt1 组件放到前面宣告, 然后指定 txt1 组件置于 edt1 的下方 23

24 单击以编辑母片 RelativeLayout 标题样式排版模式 q RelativeLayout 的成果 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout > <TextView android:id="@+id/txt1" /> <EditText android:id="@+id/edt1" android:layout_below="@id/txt1"/> <EditText android:id="@+id/edt2" android:layout_torightof="@id/edt1" android:layout_aligntop="@id/edt1"/> <TextView android:id="@+id/txt2" android:layout_above="@id/edt2" android:layout_alignleft="@id/edt2"/> <Button android:id="@+id/btn1" android:layout_below="@id/edt1"/> </RelativeLayout> 24???

25 单击以编辑母片 RelativeLayout 标题样式排版模式 q 使用 RelativeLayout 的计算机猜拳游戏程序这个电脑猜拳游戏, 必须考虑下列几件事我们必须设计一个简单清楚的接口, 让玩家可以任意选择出剪刀石头或是布电脑必须能够自行决定出拳, 而且没有规则性, 否则玩家便有可能破解游戏进行的画面必须简单, 而且易于了解 25

26 单击以编辑母片 RelativeLayout 标题样式排版模式 q 使用随机数功能所谓随机数是一群出现次序不规则的数, 也就是随机产生的数字随机数经常用来模拟一些随机的结果, 像是游戏常用的丢骰子在 Java 程序中可以呼叫 Math.random() 方法产生一个介于 0 和 1 之间的小数 ( 可能是 0, 但是永远小于 1) 我们可以利用乘法把这个小数放大再转换成整数型态, 例如 : int iran = (int)(math.random()*6 + 1); iran 的值永远是 1 ~ 6 的整数其中之一, 在猜拳游戏中, 我们可以用分别表示剪刀石头和布, 因此我们需要的是 1 ~ 3 之间的整数, 那么只要将上面公式中的 6 改成 3 即可 26

27 单击以编辑母片知识点四标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 27

28 单击以编辑母片 AbsoluteLayout 标题样式排版模式 q 显示范例 28

29 单击以编辑母片 AbsoluteLayout 标题样式排版模式 q 绝对布局或坐标布局优点弹性大缺点复杂不同尺寸手机显示不同结果维护困难 q 注意事项原点为屏幕坐上角精确计算视图像素大小 q 布局设置可视化软件 (DroidDraw) Android:layout_x Android:layout_y 29

30 单击以编辑母片 AbsoluteLayout 标题样式排版模式 q 范例 Ch2_5 的 main.xml <?xml version="1.0" encoding="utf-8"?>  <AbsoluteLayout android:id="@+id/widget27" android:layout_width="fill_parent android:layout_height="fill_parent xmlns:android=" apk/res/android"> <!-- ImageButton 图片按钮, 其中 android:layout_x, android:layout_y 表示在屏幕 x,y 上的坐标值 -- > <ImageButton android:id="@+id/imgbutton" android:layout_width="wrap_content android:layout_height="wrap_content" android:layout_x="130px" android:layout_y="92px" android:src="@drawable/icon"> </ImageButton> <TextView android:layout_width="wrap_content android:layout_height="wrap_content" android:text=" 这是绝对布局的演示 " android:layout_x="120px" android:layout_y="192px"> </TextView> <AnalogClock android:id="@+id/analogclock" android:layout_width="wrap_content android:layout_height="wrap_content" android:layout_x="80px" android:layout_y="272px"> </AnalogClock> </AbsoluteLayout> 30

31 单击以编辑母片知识点五标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 31

32 单击以编辑母片 FrameLayout 排标题样式版模式 q 显示范例 32

33 单击以编辑母片 FrameLayout 排标题样式版模式 q 单祯布局或框架布局固定到屏幕左上角一层覆盖一层, 後者覆蓋前者 33

34 单击以编辑母片 FrameLayout 排标题样式版模式 <?xml version="1.0" encoding="utf-8"?>  q 范例 Ch2_4 的 main.xml <FrameLayout xmlns:android=" apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" >  <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/big"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/medium"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/small"/> </FrameLayout> 34

35 单击以编辑母片知识点六标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 35

36 单击以编辑母片 GridLayout 排版标题样式模式 q 显示范例 36

37 单击以编辑母片 GridLayout 排版标题样式模式 q 网格布局网格方式布局子组件子组件 X 和 Y 轴自动对齐 37

38 单击以编辑母片 GridLayout 排版标题样式模式 q 范例 ch03_3d7_gridlayout 的 activity_main.xml <LinearLayout xmlns:android=" apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#ededed" > <GridLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#ededed" android:columncount="4" android:orientation="horizontal" android:rowcount="3" > <Button android:layout_columnspan="2" android:layout_gravity="fill" android:text="1.1" /> <Button android:text="1.2" /> <Button android:layout_gravity="fill" android:layout_rowspan="2" android:text="1.3" /> <Button android:layout_columnspan="3" android:layout_gravity="fill" android:text="2.1" /> <Button android:text="3.1" /> <Button android:text="3.2" /> <Button android:text="3.3" /> <Button android:text="3.4" /> </GridLayout> </LinearLayout> 38

39 单击以编辑母片知识点七标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 39

40 单击以编辑母片 TabWidget 切換标题样式卡 q 显示范例 40

41 单击以编辑母片 TabWidget 切換标题样式卡 q 何谓切换卡通过多个卷标切换已显示不同的内容 q 何谓 TabHost 存放多个 Tab 标签的容器, 每个 Tab 都可以对应自己的布局 q TabHost 做法 gettabhost() 方法获取 TabHost 的对象 addtab() 方法向 TabHost 添加 Tab setontabchangedlistener() 监听捕获的信息 41

42 单击以编辑母片 TabWidget 切換标题样式卡 q TabHost 使用的方法有以下两种系统自带写好的 TabHost 以及继承 TabActivity 类 TabHost 的 ID TabWidget 的 ID FrameLayout 的 ID 定义自己的 TabHost, 不用继承 TabActivity TabHost 的 ID 可以自己定义 TabWidget 的 ID FrameLayout 的 ID 42

43 单击以编辑母片知识点八标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 43

44 单击以编辑母片 Lab 5 标题样式 q 电脑猜拳游戏程序的档案说明单元 19 的程序码界面布局檔字串资源文件程序檔完成本题, 可得 1% 改成简体字改成简体字改成简体字改成简体字改成简体字 44 改成简体字

45 单击以编辑母片 Lab 5 标题样式 q 修改计算机猜拳游戏修改后需要考虑下列几件事设计一个简单清楚的接口, 让玩家可以任意选择出将士象车马炮或卒计算机 / 玩家猜拳失败后将不能在出该拳, 直到一方全部都不能在出拳后宣布最后的胜利电脑必须能够自行决定出拳, 而且没有规则性, 否则玩家便有可能破解完成本题, 可得 4% 卒将车马士象马炮 45

46 单击以编辑母片标题样式 46

PowerPoint Presentation

PowerPoint Presentation Part 4 使用不同的操作介面版面型態單元 19 LinearLayout 版面型態單元 20 TableLayout 版面型態單元 21 RelativeLayout 版面型態單元 22 FrameLayout 版面型態單元 23 版面型態的應用 1 單元 19 LinearLayout 版面型態 2 LinearLayout