重拾Android的快乐-TableLayout布局

说明 TableLayout 是一个用来以行或者列方式来显示子View的视图组。TableLayout不显示行、列或者单元格的边框线。一个表可以留空多个单元格,也可以跨越多列,这个与html类似 TableRow TabRow是 TableLayout 的子View,用来表示一行,此元素下可以定义多个单元格来包含其它元素,单元格又可以嵌套 TableLayout 约束 列的宽度由该列中最宽单元格的行定义 TableLayout 子类不能指定 layout_width 属性,宽度值一直为 MATCH_PARENT layout_height 属性可以由子类进行设置,默认值为 WRAP_CONTENT ;如果子类是 TableRow ,则其高度值一直为 WRAP_CONTENT 常用属性 android:collapseColumns 基于索引0来隐藏列,多个值用英文逗号分隔,例如配置为1,则隐藏第2列 table中的列索引从0开始计数,如果不指定,则自动增加 android:shrinkColumns 基于索引0来收缩列 android:stretchColumns 基于索引0来拉升列 示例 效果图 代码 <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:stretchColumns="1"> <TableRow> <TextView android:layout_column="1" android:text="Open..." android:padding="3dip" /> <TextView android:text="Ctrl-O" android:gravity="right" android:padding="3dip" /> </TableRow> <TableRow> <TextView android:layout_column="1" android:text="Save..." android:padding="3dip" /> <TextView android:text="Ctrl-S" android:gravity="right" android:padding="3dip" /> </TableRow> <TableRow> <TextView android:layout_column="1" android:text="Save As..." android:padding="3dip" /> <TextView android:text="Ctrl-Shift-S" android:gravity="right" android:padding="3dip" /> </TableRow> <View android:layout_height="2dip" android:background="#FF909090" /> <TableRow> <TextView android:text="X" android:padding="3dip" /> <TextView android:text="Import..." android:padding="3dip" /> </TableRow> <TableRow> <TextView android:text="X" android:padding="3dip" /> <TextView android:text="Export..." android:padding="3dip" /> <TextView android:text="Ctrl-E" android:gravity="right" android:padding="3dip" /> </TableRow> <View android:layout_height="2dip" android:background="#FF909090" /> <TableRow> <TextView android:layout_column="1" android:text="Quit" android:padding="3dip" /> </TableRow> </TableLayout> 因为在 TableLayout 中设置了 android:stretchColumns="1" 属性来拉升第一列,可以看到第一列的宽度最宽

2025-07-17 · 1 min · 124 words · tomyli

重拾Android的快乐-RelativeLayout布局

说明 RelativeLayout 是一个提供子View相对位置的View组,可以指定相邻同级节点的位置(上下左右)或相对于父区域的位置。RelativeLayout主要是用来消除嵌套布局来保持布局层级扁平来提升性能。 布局方向 Android中的布局方向有两种: LTR 从左到右 RTL 从右到左 可以通过 android:layoutDirection 进行设置 常用属性配置 对齐相关 android:layout_alignParentTop 此视图顶部边缘与父视图顶部边缘对齐,忽略布局方向,对应的有 android:layout_alignParentBottom android:layout_alignParentLeft 此视图顶部边缘与父视图左侧对齐,只支持LTR,对应的有 android:layout_alignParentRight android:layout_alignParentStart 此视图顶部边缘与父视图左侧对齐,支持LTR与RTL,对应的有 android:layout_alignParentEnd android:layout_alignTop 此视图顶部边缘与给定视图顶部边缘对齐,忽略布局方向,对应的有 android:layout_alignParentBottom android:layout_alignLeft 此视图顶部边缘与给定视图左侧对齐,只支持LTR,对应的有 android:layout_alignRight android:layout_alignStart 此视图顶部边缘与给定视图左侧对齐,支持LTR与RTL,对应的有 android:layout_alignEnd android:layout_alignWithParentIfMissing 如果没有设置 layout_toLeftOf 或者 layout_toRightOf 属性则使用父view做为锚点 居中相关 android:layout_centerHorizontal 子视图在父视图中垂直居中 android:layout_centerVertical 子视图在父视图中水平居中 android:layout_centerInParent 子视图在父视图中水平和垂直居中 android:layout_below 用于控制垂直方向,此视图定位于指定资源id的下方,对应的还有 android:layout_above android:layout_toRightOf 用于左右(LTR)布局并忽略右左布局,此视图的左边缘定位于指定资源的右方,其它的还有 android:layout_toLeftOf android:layout_toEndOf 支持LTR与RTL两种布局,对于LTR表示位于指定资源id的右侧,对于RTL则相反 示例 这里引用一个官方提供的样例 效果图 代码 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="16dp" android:paddingRight="16dp" > <EditText android:id="@+id/name" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/reminder" /> <Spinner android:id="@+id/dates" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_below="@id/name" android:layout_alignParentLeft="true" android:layout_toLeftOf="@+id/times" /> <Spinner android:id="@id/times" android:layout_width="96dp" android:layout_height="wrap_content" android:layout_below="@id/name" android:layout_alignParentRight="true" /> <Button android:layout_width="96dp" android:layout_height="wrap_content" android:layout_below="@id/times" android:layout_alignParentRight="true" android:text="@string/done" /> </RelativeLayout> 这里主要关注中间两个Spinner和Button ...

2025-07-10 · 1 min · 168 words · tomyli

重拾Android的快乐-LinearLayout布局

说明 LinearLayout 是一个视图组件,它可以将所有子视图按一个方向进行 垂直/水平 对齐 垂直方向(Vertical) 垂直方向会按每行一个元素排列,而不管设置的宽度 水平方向(Horizontal) 水平方向只有一行高,它的高度为最高的子元素+Padding值 常用属性配置 android:orientation 布局方向,可配置值: horizontal 水平 vertical 垂直 android:layout_width 元素宽度 android:layout_height 元素高度,可配置具体的数值,还支持常用的值如下: match_parent 与父元素同尺寸 wrap_content 只包含内容大小(+padding) android:layout_weight 布局权重,用于设置元素占据的空间值,值越大占的空间越大,默认值为0(匹配内容) android:gravity 指定视图内容在其自身边界内的对齐方式 实战案例 实现一个简单的邮件发送功能 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="16dp" android:paddingRight="16dp" android:orientation="vertical" > <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:autofillHints="" android:hint="@string/to" android:inputType="text" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:autofillHints="" android:hint="@string/subject" android:inputType="text" /> <EditText android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:autofillHints="" android:gravity="top" android:hint="@string/message" android:inputType="text" /> <Button android:layout_width="100dp" android:layout_height="wrap_content" android:layout_gravity="end" android:text="@string/send" /> </LinearLayout> 效果图 Jetpack Compose组件实现同样效果 Jetpack Compose 是google新推出并推荐使用的基于kotlin声明式UI组件库,可以用更少的代码来加速开发 ...

2025-07-01 · 1 min · 204 words · tomyli