diff options
Diffstat (limited to 'docs/html/resources/tutorials/views/hello-tabwidget.jd')
| -rw-r--r-- | docs/html/resources/tutorials/views/hello-tabwidget.jd | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/docs/html/resources/tutorials/views/hello-tabwidget.jd b/docs/html/resources/tutorials/views/hello-tabwidget.jd new file mode 100644 index 0000000..8424616 --- /dev/null +++ b/docs/html/resources/tutorials/views/hello-tabwidget.jd @@ -0,0 +1,124 @@ +page.title=Hello, TabWidget +parent.title=Hello, Views +parent.link=index.html +@jd:body + +<p>A {@link android.widget.TabWidget} offers the ability to easily draw an interface that uses +tabs to navigate between different views.</p> + +<ol> + <li>Start a new project/Activity called HelloTabWidget.</li> + <li>Open the layout file and make it like so:</li> + <pre> +<?xml version="1.0" encoding="utf-8"?> +<TabHost xmlns:android="http://schemas.android.com/apk/res/android" + android:id="@android:id/tabhost" + android:layout_width="fill_parent" + android:layout_height="fill_parent"> + <LinearLayout + android:orientation="vertical" + android:layout_width="fill_parent" + android:layout_height="fill_parent"> + <TabWidget + android:id="@android:id/tabs" + android:layout_width="fill_parent" + android:layout_height="wrap_content" /> + <FrameLayout + android:id="@android:id/tabcontent" + android:layout_width="fill_parent" + android:layout_height="fill_parent"> + <TextView + android:id="@+id/textview1" + android:layout_width="fill_parent" + android:layout_height="fill_parent" + android:text="this is a tab" /> + <TextView + android:id="@+id/textview2" + android:layout_width="fill_parent" + android:layout_height="fill_parent" + android:text="this is another tab" /> + <TextView + android:id="@+id/textview3" + android:layout_width="fill_parent" + android:layout_height="fill_parent" + android:text="this is a third tab" /> + </FrameLayout> + </LinearLayout> +</TabHost> +</pre> + <p>Here, we've created a {@link android.widget.TabHost} that contains the entire layout of the Activity. + A TabHost requires two descendant elements: a {@link android.widget.TabWidget} and a {@link android.widget.FrameLayout}. + In order to properly layout these elements, we've put them inside a vertical {@link android.widget.LinearLayout}. + The FrameLayout is where we keep the content that will change with each tab. Each child in the FrameLayout will + be associated with a different tab. + In this case, each tab simply shows a different {@link android.widget.TextView} with some text. </p> + <p>Notice that the TabWidget and the FrameLayout elements have specific <code>android</code> namespace IDs. These are necessary + so that the TabHost can automatically retireve references to them, populate the TabWidget with the tabs that we'll define + in our code, and swap the views in the FrameLayout. We've also defined our own IDs for each TextView, which we'll use to + associate each tab with the view that it should reveal.</p> + <p>Of course, you can + make these child views as large as complex as you'd like — instead of the TextView elements, + you could start with other layout views and build a unique layout hierarchy for each tab.</p> + </li> + <li>Now we'll add our code. Open HelloTabWidget.java and make it a <code>TabActivity</code>. + <p>By default, Eclipse creates a class that extends <code>Activity</code>. Change it to + extend <code>TabActivity</code>:</p> + <pre> +public class HelloTabWidget extends TabActivity { +</pre> + </li> + <li>Now fill in the the <code>onCreate</code> method like this: + <pre> +public void onCreate(Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + setContentView(R.layout.main); + + mTabHost = getTabHost(); + + mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("TAB 1").setContent(R.id.textview1)); + mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("TAB 2").setContent(R.id.textview2)); + mTabHost.addTab(mTabHost.newTabSpec("tab_test3").setIndicator("TAB 3").setContent(R.id.textview3)); + + mTabHost.setCurrentTab(0); +} +</pre> + <p>As usual, we start by setting our layout.</p> + <p>We then call the TabActivity method <code>getTabHost()</code>, + which returns us a reference to the TabHost we created in our layout. Upon our TabHost, we call <code>addTab()</code> + for each of the tabs that we want to add to the TabWidget. Each time we call this, we pass a + {@link android.widget.TabHost.TabSpec} that we build on the fly, and with it, chain together two necessary methods: + <code>setIndicator()</code> to set the text for the tab button, and <code>setContent()</code> to define + which View we want to associate with the tab and reveal when pressed. Our indicator is just a text string and + our content is an ID reference to the TextView elements we inserted in the FrameLayout.</p> + <p>At the end, we call <code>setCurrentTab()</code> to define which tab should be opened by default. The tabs + are saved like a zero-based array, so to open the first tab, we pass zero (<var>0</var>).</p> + </li> + <li>To clean-up the presentation a bit more, let's remove the window title that appears at the top of the layout. + Android includes a theme that removes that title for us. To add it, open the Android Manifest file and add + the <var>NoTitleBar</var> theme to the <code><application></code> tag. It should end up like this: + <pre> +<application android:icon="@drawable/icon" android:theme="@android:style/Theme.NoTitleBar"> +</pre> + </li> + <li>That's it. Run your application.</li> + +</ol> + + +<p>Your application should look like this:</p> +<img src="images/hello-tabwidget.png" width="150px" /> + +<div class="special"><p>You can include icons in your tabs by passing a +{@link android.graphics.drawable.Drawable} when you call <code>setIndicator()</code>. Here's an example +that uses a Drawable created from an image in the project resources:</p> +<pre>setIndicator("TAB 1", getResources().getDrawable(R.drawable.tab_icon))</pre> +</div> + +<h3>References</h3> +<ul> +<li>{@link android.widget.TabWidget}</li> +<li>{@link android.widget.TabHost}</li> +<li>{@link android.widget.TabHost.TabSpec}</li> +<li>{@link android.widget.FrameLayout}</li> +</ul> + |