单击以编辑母片标题样式 安卓系统 Android 的排版 授课老师 : 谢兆贤 2016/4/18 1
单击以编辑母片 Content 标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 2
单击以编辑母片知识点ㄧ标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 3
单击以编辑母片 LinearLayout 排标题样式版模式 q LinearLayout 范例 LinearLayout 标签是一种接口组件的编排方式, 顾名思义它就是依照线性次序由上往下逐一排列接口组件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/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
单击以编辑母片 LinearLayout 排标题样式版模式 q 水平排列的 LinearLayout <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/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
单击以编辑母片 LinearLayout 排标题样式版模式 q 二层 LinearLayout <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/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
单击以编辑母片 LinearLayout 排标题样式版模式 q 使用二层 LinearLayout 的 婚姻建议 程序 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android= "http://schemas.android.com/apk/res/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
单击以编辑母片 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
单击以编辑母片知识点二标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 9
单击以编辑母片 TableLayout 排标题样式版模式 q TableLayout 范例 TableLayout 就是把接口组件依照表格的方式排列, 也就是由上往下一列接着一列, 而且前后每一个字段依序对齐 <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/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
单击以编辑母片 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
单击以编辑母片 TableLayout 排标题样式版模式 3. 如果 TableLayout 标签中的接口组件没有被包含在 TableRow 标签中, 则该组件会自成一列如上面范例的 Button 组件 4. 如果要让 TableRow 标签中的组件依比例使用整个 Table 的宽度, 可以藉助 android:layout_weight 属性, 它会将同一列组件所有的 weight 值加总后, 再依照每一个组件的 weight 值的比例计算所占的宽度 12
单击以编辑母片 TableLayout 排标题样式版模式 <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/and 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
单击以编辑母片 TableLayout 排标题样式版模式 5. 如果希望 TableLayout 标签中的 TableRow 内组件可以错开如下的画面, 可以在 TableLayout 标签中再增加一个 TableLayout 标签 14
单击以编辑母片 TableLayout 排标题样式版模式 <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" > <TableLayout > <TableRow> <TextView android:text=" 姓名 :"/> </TableRow> <TableRow> <EditText android:text=" 输入姓名 "/> </TableRow> </TableLayout> <TableRow> </TableRow> <TableRow> </TableRow> <Button android:text=" 确定 "/> </TableLayout> 15
单击以编辑母片 TableLayout 排 <TableLayout 标题样式版模式 <?xml version="1.0" encoding="utf-8"?> > <TableRow> <TextView android:layout_width= match_parent" android:layout_height="wrap_content" android:text="@string/promptsex /> <RadioGroup <RadioButton android:id="@+id/radbtnmale" android:text="@string/male" /> </RadioGroup> </TableRow> <RadioButton android:id="@+id/radbtnfemale" android:text="@string/female" /> <TableRow> <TextView android:layout_width= match_parent" android:layout_height="wrap_content" android:text="@string/age" /> <RadioGroup <RadioButton android:id="@+id/radbtnagerange1 /> <RadioButton android:id="@+id/radbtnagerange2 /> <RadioButton android:id="@+id/radbtnagerange3 /> </RadioGroup> </TableRow> <Button android:id="@+id/btnok" android:layout_width= match_parent" android:layout_height="wrap_content" android:text="@string/btn_ok /> <TextView android:id="@+id/txtr" android:layout_width= match_parent" android:layout_height="wrap_content" /> </TableLayout> 16
单击以编辑母片 TableLayout 排标题样式版模式 17
单击以编辑母片知识点三标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 18
单击以编辑母片 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?????
单击以编辑母片 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???
单击以编辑母片 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 将接口组件对齐它所在的外框下 缘
单击以编辑母片 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
单击以编辑母片 RelativeLayout 标题样式排版模式 q 使用 RelativeLayout 的注意事项 这个问题有二种解决方法 可以利用 android:layout_center 相关的属性把第一个宣告的组件往屏幕的右下方移动 调整接口组件宣告的次序, 例如 : 把范例中的 edt1 组件放到前面宣告, 然后指定 txt1 组件置于 edt1 的下方 23
单击以编辑母片 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???
单击以编辑母片 RelativeLayout 标题样式排版模式 q 使用 RelativeLayout 的 计算机猜拳游戏 程序 这个电脑猜拳游戏, 必须考虑下列几件事 我们必须设计一个简单清楚的接口, 让玩家可以任意选择出剪刀 石头或是布 电脑必须能够自行决定出拳, 而且没有规则性, 否则玩家便有可能破解 游戏进行的画面必须简单, 而且易于了解 25
单击以编辑母片 RelativeLayout 标题样式排版模式 q 使用 随机数 功能 所谓 随机数 是一群出现次序不规则的数, 也就是随机产生的数字 随机数经常用来模拟一些随机的结果, 像是游戏常用的丢骰子 在 Java 程序中可以呼叫 Math.random() 方法产生一个介于 0 和 1 之间的小数 ( 可能是 0, 但是永远小于 1) 我们可以利用乘法把这个小数放大再转换成整数型态, 例如 : int iran = (int)(math.random()*6 + 1); iran 的值永远是 1 ~ 6 的整数其中之一, 在猜拳游戏中, 我们可以用 1 2 3 分别表示剪刀 石头 和布, 因此我们需要的是 1 ~ 3 之间的整数, 那么只要将上面公式中的 6 改成 3 即可 26
单击以编辑母片知识点四标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 27
单击以编辑母片 AbsoluteLayout 标题样式排版模式 q 显示范例 28
单击以编辑母片 AbsoluteLayout 标题样式排版模式 q 绝对布局或坐标布局 优点 弹性大 缺点 复杂 不同尺寸手机显示不同结果 维护困难 q 注意事项 原点为屏幕坐上角 精确计算视图像素大小 q 布局设置 可视化软件 (DroidDraw) Android:layout_x Android:layout_y 29
单击以编辑母片 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="http://schemas.android.com/ 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
单击以编辑母片知识点五标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 31
单击以编辑母片 FrameLayout 排标题样式版模式 q 显示范例 32
单击以编辑母片 FrameLayout 排标题样式版模式 q 单祯布局或框架布局 固定到屏幕左上角 一层覆盖一层, 後者覆蓋前者 33
单击以编辑母片 FrameLayout 排标题样式版模式 <?xml version="1.0" encoding="utf-8"?> <!-- 单帧布局 --> q 范例 Ch2_4 的 main.xml <FrameLayout xmlns:android="http://schemas.android.com/ apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <!-- 图片控件, 通过 android:src 属性设置图片控件中要显示的图片 图片一般位于 drawable 文件夹下 --> <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
单击以编辑母片知识点六标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 35
单击以编辑母片 GridLayout 排版标题样式模式 q 显示范例 36
单击以编辑母片 GridLayout 排版标题样式模式 q 网格布局 网格方式布局子组件 子组件 X 和 Y 轴自动对齐 37
单击以编辑母片 GridLayout 排版标题样式模式 q 范例 ch03_3d7_gridlayout 的 activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/ 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
单击以编辑母片知识点七标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 39
单击以编辑母片 TabWidget 切換标题样式卡 q 显示范例 40
单击以编辑母片 TabWidget 切換标题样式卡 q 何谓切换卡 通过多个卷标切换已显示不同的内容 q 何谓 TabHost 存放多个 Tab 标签的容器, 每个 Tab 都可以对应自己的布局 q TabHost 做法 gettabhost() 方法获取 TabHost 的对象 addtab() 方法向 TabHost 添加 Tab setontabchangedlistener() 监听捕获的信息 41
单击以编辑母片 TabWidget 切換标题样式卡 q TabHost 使用的方法有以下两种 系统自带写好的 TabHost 以及继承 TabActivity 类 TabHost 的 ID 为 @android:id/tabhost TabWidget 的 ID 为 @android:id/tabs FrameLayout 的 ID 为 @android:id/tabcontent 定义自己的 TabHost, 不用继承 TabActivity TabHost 的 ID 可以自己定义 TabWidget 的 ID 为 @android:id/tabs FrameLayout 的 ID 为 @android:id/tabcontent 42
单击以编辑母片知识点八标题样式 LinearLayout 排版模式 TableLayout 排版模式 RelativeLayout 排版模式 AbsoluteLayout 排版模式 FrameLayout 排版模式 GridLayout 排版模式 TabWidget 切換卡 Lab 5 43
单击以编辑母片 Lab 5 标题样式 q 电脑猜拳 游戏程序的档案说明 单元 19 的程序码 界面布局檔 字串资源文件 程序檔 完成本题, 可得 1% 改成简体字改成简体字改成简体字改成简体字改成简体字 44 改成简体字
单击以编辑母片 Lab 5 标题样式 q 修改 计算机猜拳游戏 修改后需要考虑下列几件事 设计一个简单清楚的接口, 让玩家可以任意选择出将 士 象 车 马 炮 或卒 计算机 / 玩家猜拳失败后将不能在出该拳, 直到一方全部都不能在出拳后宣布最后的胜利 电脑必须能够自行决定出拳, 而且没有规则性, 否则玩家便有可能破解 完成本题, 可得 4% 卒 将 车 马 士 象 马 炮 45
单击以编辑母片标题样式 46