TableLayout大全

今天要实现的就是以下图片的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>