1 page.title=Table Layout 2 parent.title=Hello, Views 3 parent.link=index.html 4 @jd:body 5 6 7 <p>{@link android.widget.TableLayout} is a {@link android.view.ViewGroup} that 8 displays child {@link android.view.View} elements in rows and columns.</p> 9 10 <ol> 11 <li>Start a new project named <em>HelloTableLayout</em>.</li> 12 <li>Open the <code>res/layout/main.xml</code> file and insert the following: 13 <pre> 14 <?xml version="1.0" encoding="utf-8"?> 15 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 16 android:layout_width="fill_parent" 17 android:layout_height="fill_parent" 18 android:stretchColumns="1"> 19 20 <TableRow> 21 <TextView 22 android:layout_column="1" 23 android:text="Open..." 24 android:padding="3dip" /> 25 <TextView 26 android:text="Ctrl-O" 27 android:gravity="right" 28 android:padding="3dip" /> 29 </TableRow> 30 31 <TableRow> 32 <TextView 33 android:layout_column="1" 34 android:text="Save..." 35 android:padding="3dip" /> 36 <TextView 37 android:text="Ctrl-S" 38 android:gravity="right" 39 android:padding="3dip" /> 40 </TableRow> 41 42 <TableRow> 43 <TextView 44 android:layout_column="1" 45 android:text="Save As..." 46 android:padding="3dip" /> 47 <TextView 48 android:text="Ctrl-Shift-S" 49 android:gravity="right" 50 android:padding="3dip" /> 51 </TableRow> 52 53 <View 54 android:layout_height="2dip" 55 android:background="#FF909090" /> 56 57 <TableRow> 58 <TextView 59 android:text="X" 60 android:padding="3dip" /> 61 <TextView 62 android:text="Import..." 63 android:padding="3dip" /> 64 </TableRow> 65 66 <TableRow> 67 <TextView 68 android:text="X" 69 android:padding="3dip" /> 70 <TextView 71 android:text="Export..." 72 android:padding="3dip" /> 73 <TextView 74 android:text="Ctrl-E" 75 android:gravity="right" 76 android:padding="3dip" /> 77 </TableRow> 78 79 <View 80 android:layout_height="2dip" 81 android:background="#FF909090" /> 82 83 <TableRow> 84 <TextView 85 android:layout_column="1" 86 android:text="Quit" 87 android:padding="3dip" /> 88 </TableRow> 89 </TableLayout> 90 </pre> 91 <p>Notice how this resembles the structure of an HTML table. The {@link android.widget.TableLayout} 92 element is like the HTML <code><table></code> element; {@link android.widget.TableRow} is like 93 a <code>><tr>></code> element; 94 but for the cells, you can use any kind of {@link android.view.View} element. In this example, a 95 {@link android.widget.TextView} is used for each cell. In between some of the rows, there is also a 96 basic {@link android.view.View}, which is used to draw a horizontal line.</p> 97 98 </li> 99 <li>Make sure your <em>HelloTableLayout</em> Activity loads this layout in the 100 {@link android.app.Activity#onCreate(Bundle) onCreate()} method: 101 <pre> 102 public void onCreate(Bundle savedInstanceState) { 103 super.onCreate(savedInstanceState); 104 setContentView(R.layout.main); 105 } 106 </pre> 107 <p>The {@link android.app.Activity#setContentView(int)} method loads the 108 layout file for the {@link android.app.Activity}, specified by the resource 109 ID — <code>R.layout.main</code> refers to the <code>res/layout/main.xml</code> layout 110 file.</p> 111 </li> 112 <li>Run the application.</li> 113 </ol> 114 <p>You should see the following:</p> 115 <img src="images/hello-tablelayout.png" width="150px" /> 116 117 <h3>References</h3> 118 <ul> 119 <li>{@link android.widget.TableLayout}</li> 120 <li>{@link android.widget.TableRow}</li> 121 <li>{@link android.widget.TextView}</li> 122 </ul> 123 124 125
