今天要实现的就是以下图片的TableLayout内容
图1的实现:把第三行的Button的可见度设置为invisible 即android:visibility="invisible"
图2的实现:把第2,3列或第3列设置为可收缩,即 android:shrinkColumns="2,3"
图3的实现:把第0或列第1列设置为可扩展,即 android:stretchColumns="0"
图4的实现:在图3的基础上加了两条下划线,下划线是用设置好背景色和高度的内容为空的 TextView实现的。关键代码如下所示:
<TextView android:background="#FF00FF" android:height="2dip" />
图5的实现:把可扩展列改为1,给第一条下划线的上面每一行的第一个组件指定列为1,即给 “open...,save...,save as...”这三个TextView指定列为一,如:
<TextView android:layout_column="1" android:gravity="left" android:padding="3dip" android:text="save..." />
图6,图6.1,图6.2的实现:(说明):点击图6左边的按钮效果如图6.1所示,再点击一下变回原样--多出的最左边的一列隐藏,点击图6右边的按钮效果如图6.2所示,再点击一下多出的最右边的一列隐藏。实效这样的效果关键是用了塌陷collapseColumns,该属性可以使相应的列隐藏,点击左边的按钮使第0列隐藏,再点击使其可见,点击右边的按钮使第2列隐藏,再点击使其可见即android:collapseColumns="0,2" table.setColumnCollapsed(2, flag);其中flag为Boolean类型。-------》
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); table = (TableLayout) findViewById(R.id.table); toggle1 = (Button) findViewById(R.id.toggle1); toggle2 = (Button) findViewById(R.id.toggle2); //下面这两句很关键!! mCheckmarksCollapsed = table.isColumnCollapsed(0); mShortcutsCollapsed = table.isColumnCollapsed(2); toggle1.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { mCheckmarksCollapsed = !mCheckmarksCollapsed; table.setColumnCollapsed(0, mCheckmarksCollapsed); } }); toggle2.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { mShortcutsCollapsed = !mShortcutsCollapsed; table.setColumnCollapsed(2, mShortcutsCollapsed); } }); }
图7、图8的实现:跟图6的实现差不多,用到的是
mToggleStreched = table.isColumnStretchable(2);
table.setColumnStretchable(2, mToggleStreched);
isShrinkable = table.isColumnShrinkable(1);
table.setColumnShrinkable(1, isShrinkable);
图9的实现非常简单,只设置下子View对齐方式和可扩展列即可。xml文件代码如下所示:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/table" android:layout_width="match_parent" android:layout_height="match_parent" android:stretchColumns="1"> <TableRow > <TextView android:gravity="right" android:text="User"/> <EditText /> </TableRow> <TableRow > <TextView android:gravity="right" android:text="Password"/> <EditText /> </TableRow> <TableRow > <Button android:gravity="center" android:text="Cancel"/> <Button android:gravity="center" android:text="Login"/> </TableRow> </TableLayout>
图10的实现:第三行的“save as”是通过设置layout_gravity="center_horizontal",最后一行(非下划线),是通过设置View的高,"Export"与“Ctrl_E”的gravity实现。具体代码如下所示---------》
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/table" android:layout_width="match_parent" android:layout_height="match_parent" android:stretchColumns="1"> <TableRow > <TextView android:layout_column="1" android:text="open..." android:gravity="left" 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:background="#FF00FF00" android:gravity="left" android:padding="3dip" /> <TextView android:text="ctrl_O" android:gravity="right" android:padding="3dip" /> </TableRow> <TableRow > <TextView android:layout_column="1" android:text="save as..." android:background="#FF0000" android:layout_gravity="center_horizontal" android:padding="3dip" /> <TextView android:text="ctrl_O" android:background="#FFFF00FF" 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 > <View android:layout_height="68dip" android:background="#FF909090" /> <!-- Aligns the content of the cell to the bottom right --> <TextView android:text="table_layout" android:background="#FFFF0000" android:layout_gravity="right|bottom" android:padding="3dip" /> <TextView android:text="table_layout" android:background="#FF00FFFF" android:gravity="right" android:padding="3dip" /> </TableRow> <View android:layout_height="2dip" android:background="#FF909090" /> </TableLayout>
图11的实现:通过android:layout_span="2" (占两列)来实现的 关键代码如下所示: <TableRow > <TextView android:text="G" android:layout_span="3" android:gravity="center" android:background="#FFFFabcd" android:padding="3dip" /> </TableRow>