1 page.title=Table 2 parent.title=Layouts 3 parent.link=layout-objects.html 4 @jd:body 5 6 <div id="qv-wrapper"> 7 <div id="qv"> 8 <h2>In this document</h2> 9 <ol> 10 <li><a href="#example">Example</a></li> 11 </ol> 12 <h2>Key classes</h2> 13 <ol> 14 <li>{@link android.widget.TableLayout}</li> 15 <li>{@link android.widget.TableRow}</li> 16 <li>{@link android.widget.TextView}</li> 17 </ol> 18 </div> 19 </div> 20 <p>{@link android.widget.TableLayout} is a {@link android.view.ViewGroup} that 21 displays child {@link android.view.View} elements in rows and columns.</p> 22 23 24 <img src="{@docRoot}images/ui/gridlayout.png" alt="" /> 25 26 <p>{@link android.widget.TableLayout} positions its children into rows 27 and columns. TableLayout containers do not display border lines for their rows, columns, 28 or cells. The table will have as many columns as the row with the most cells. A table can leave 29 cells empty, but cells cannot span columns, as they can in HTML.</p> 30 <p>{@link android.widget.TableRow} objects are the child views of a TableLayout 31 (each TableRow defines a single row in the table). 32 Each row has zero or more cells, each of which is defined by any kind of other View. So, the cells of a row may be 33 composed of a variety of View objects, like ImageView or TextView objects. 34 A cell may also be a ViewGroup object (for example, you can nest another TableLayout as a cell).</p> 35 <p>The following sample layout has two rows and two cells in each. The accompanying screenshot shows the 36 result, with cell borders displayed as dotted lines (added for visual effect). </p> 37 38 <table class="columns"> 39 <tr> 40 <td> 41 <pre> 42 <?xml version="1.0" encoding="utf-8"?> 43 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 44 android:layout_width="match_parent" 45 android:layout_height="match_parent" 46 android:stretchColumns="1"> 47 <TableRow> 48 <TextView 49 android:text="@string/table_layout_4_open" 50 android:padding="3dip" /> 51 <TextView 52 android:text="@string/table_layout_4_open_shortcut" 53 android:gravity="right" 54 android:padding="3dip" /> 55 </TableRow> 56 57 <TableRow> 58 <TextView 59 android:text="@string/table_layout_4_save" 60 android:padding="3dip" /> 61 <TextView 62 android:text="@string/table_layout_4_save_shortcut" 63 android:gravity="right" 64 android:padding="3dip" /> 65 </TableRow> 66 </TableLayout> 67 </pre></td> 68 <td><img src="{@docRoot}images/table_layout.png" alt="" style="margin:0" /></td> 69 </tr> 70 </table> 71 72 <p>Columns can be hidden, marked to stretch and fill the available screen space, 73 or can be marked as shrinkable to force the column to shrink until the table 74 fits the screen. See the {@link android.widget.TableLayout TableLayout reference} 75 documentation for more details. </p> 76 77 78 <h2 id="example">Example</h2> 79 <ol> 80 <li>Start a new project named <em>HelloTableLayout</em>.</li> 81 <li>Open the <code>res/layout/main.xml</code> file and insert the following: 82 <pre> 83 <?xml version="1.0" encoding="utf-8"?> 84 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 85 android:layout_width="match_parent" 86 android:layout_height="match_parent" 87 android:stretchColumns="1"> 88 89 <TableRow> 90 <TextView 91 android:layout_column="1" 92 android:text="Open..." 93 android:padding="3dip" /> 94 <TextView 95 android:text="Ctrl-O" 96 android:gravity="right" 97 android:padding="3dip" /> 98 </TableRow> 99 100 <TableRow> 101 <TextView 102 android:layout_column="1" 103 android:text="Save..." 104 android:padding="3dip" /> 105 <TextView 106 android:text="Ctrl-S" 107 android:gravity="right" 108 android:padding="3dip" /> 109 </TableRow> 110 111 <TableRow> 112 <TextView 113 android:layout_column="1" 114 android:text="Save As..." 115 android:padding="3dip" /> 116 <TextView 117 android:text="Ctrl-Shift-S" 118 android:gravity="right" 119 android:padding="3dip" /> 120 </TableRow> 121 122 <View 123 android:layout_height="2dip" 124 android:background="#FF909090" /> 125 126 <TableRow> 127 <TextView 128 android:text="X" 129 android:padding="3dip" /> 130 <TextView 131 android:text="Import..." 132 android:padding="3dip" /> 133 </TableRow> 134 135 <TableRow> 136 <TextView 137 android:text="X" 138 android:padding="3dip" /> 139 <TextView 140 android:text="Export..." 141 android:padding="3dip" /> 142 <TextView 143 android:text="Ctrl-E" 144 android:gravity="right" 145 android:padding="3dip" /> 146 </TableRow> 147 148 <View 149 android:layout_height="2dip" 150 android:background="#FF909090" /> 151 152 <TableRow> 153 <TextView 154 android:layout_column="1" 155 android:text="Quit" 156 android:padding="3dip" /> 157 </TableRow> 158 </TableLayout> 159 </pre> 160 <p>Notice how this resembles the structure of an HTML table. The {@link android.widget.TableLayout} 161 element is like the HTML <code><table></code> element; {@link android.widget.TableRow} is like 162 a <code>><tr>></code> element; 163 but for the cells, you can use any kind of {@link android.view.View} element. In this example, a 164 {@link android.widget.TextView} is used for each cell. In between some of the rows, there is also a 165 basic {@link android.view.View}, which is used to draw a horizontal line.</p> 166 167 </li> 168 <li>Make sure your <em>HelloTableLayout</em> Activity loads this layout in the 169 {@link android.app.Activity#onCreate(Bundle) onCreate()} method: 170 <pre> 171 public void onCreate(Bundle savedInstanceState) { 172 super.onCreate(savedInstanceState); 173 setContentView(R.layout.main); 174 } 175 </pre> 176 <p>The {@link android.app.Activity#setContentView(int)} method loads the 177 layout file for the {@link android.app.Activity}, specified by the resource 178 ID — <code>R.layout.main</code> refers to the <code>res/layout/main.xml</code> layout 179 file.</p> 180 </li> 181 <li>Run the application.</li> 182 </ol> 183 <p>You should see the following:</p> 184 <img src="images/hello-tablelayout.png" width="150px" /> 185 186 187 188
