Android UI Control Series: Tab layout (tab layouts)

In order to create a tabbed UI, you need to use a tabhost and a tabwidget,tabhost must be the root node of the layout file, which contains the Tabwidget to display the tabs and a framelayout for displaying the contents of the options

You can implement your tab content in one or two ways: Switch between views with tabs in an activity, or use tabs to change all of the detached activity. You use the methods you want in the program according to your needs, but if each tab provides a unique user activity, it is meaningful to have separate activity for each tab, and it is better to manage your application in your discrete group than with a large number of applications and layout files.

In this example, you can create a tab UI for creating a tab for each individual activity

1, began a new project, called Hellotabwidget

2. First, create three separate activity programs in your project: Artistsactivity,albumsactivity, and songsactivity, each of them represents a separate tab, Now, with TextView, no program displays a simple message, such as:

package org.hualang.tabwidget;  Import android.app.Activity;  Import Android.os.Bundle;    Import Android.widget.TextView;                  public class Albumsactivity extends Activity {public void onCreate (Bundle savedinstancestate) {                   Super.oncreate (savedinstancestate);                   TextView TextView = new TextView (this);                          Textview.settext ("This is the Albums tab");          Setcontentview (TextView); }  }

package org.hualang.tabwidget;  Import android.app.Activity;  Import Android.os.Bundle;    Import Android.widget.TextView;                  public class Songsactivity extends Activity {public void onCreate (Bundle savedinstancestate) {                   Super.oncreate (savedinstancestate);                   TextView TextView = new TextView (this);                   Textview.settext ("This is the Songs tab");          Setcontentview (TextView); }    }

Package org.hualang.tabwidget;    Import android.app.Activity;  Import Android.os.Bundle;  Import Android.widget.TextView;    public class Artistsactivity extends activity {      /** called, the activity is first created. */      @Override      PU Blic void OnCreate (Bundle savedinstancestate) {          super.oncreate (savedinstancestate);                   TextView TextView = new TextView (this);                   Textview.settext ("This is the Artists tab");           Setcontentview (TextView);      }  }

Note that the layout file is not required in this example, just create a textview and assign a value to the text. Repeat create three similar activity, and to register in the Androidmanifest.xml file, otherwise error

3, you need to set an icon for each tab, each icon, you can have two versions, one is the selection of the card is selected when the other is the time when the tab is not selected. In general, it is advisable to use a white color when the selection is not selected, such as

You can copy these two pictures for experimentation.

Now create a list of status pictures to make the specified picture when each tab is in a different state

① Save the diagram in the res/drawable/directory

② Create a file named Ic_tab_artists.xml under the res/drawable/directory, and insert the following information

<?xml version= "1.0" encoding= "Utf-8"?> <selector  xmlns:android= "http://schemas.android.com/apk/res/ Android >  <!--when Selected,use Grey-to          <item android:drawable= "@drawable/ic_tab_artists_grey "                  android:state_selected=" true "/>          <!--when not selected, with white-to-          <item android: drawable= "@drawable/ic_tab_artists_white"/>  </selector>

Above this file, when the status of the selected card changes, the tab will automatically switch between the two defined images

4. Open the Res/layout/main.xml file and insert the following information

<?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 "Andro id:layout_height= "Fill_parent" > <linearlayout android:orientation= "vertical" android:layout_width= " Fill_parent "android:layout_height=" fill_parent "android:padding=" 5DP "> <tabwidget A  Ndroid: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" android:padding= "5DP"/> </linearlayout></tabhos T> 

This layout file will show the tab weapon provides navigation between each activity

Tabhost requires a tabwidget and a framelayout layout, In order for the positions of the Tabwidget and framelayout to be vertically oriented, a linearlayout,framelayout is required where each tab content The content is empty because

is automatically embedded in tahhost for each activity, and the ID label and tabcontent element of the Tabwidget and framelayout elements must be used, Because Tahhost retrieves their references, it happens to expect these names

6, write Hellotabwidget. Inherit Tabwidget

Package Org.hualang.tabwidget;import Android.app.tabactivity;import Android.content.intent;import Android.content.res.resources;import Android.os.bundle;import Android.widget.tabhost;public class HelloTabWidget Extends tabactivity {public void onCreate (Bundle savedinstancestate) {super.oncreate (Savedinstancesta            TE);            Setcontentview (R.layout.main); Resources res = getresources ();  Resource object to get drawables tabhost tabhost = Gettabhost ();  The activity tabhost Tabhost.tabspec spec;  Resusable tabspec for each tab Intent Intent;            Reusable Intent for each tab//Create a Intent to launch a Activity for the tab (to be reused)            Intent = new Intent (). SetClass (this, artistsactivity.class); Initialize a tabspec for each tab and add it to the tabhost spec = Tabhost.newtabspec ("artists"). Setindicato R ("Artists", Res.getdrawable (R.Drawable.ic_tab_drawable). SetContent (Intent);            Tabhost.addtab (spec);            Do the same for the other tabs intent = new Intent (). SetClass (this, albumsactivity.class); Spec = Tabhost.newtabspec ("albums"). Setindicator ("albums", Res.getdrawable (r.drawable.ic_tab_            drawable). SetContent (Intent);            Tabhost.addtab (spec);            Intent = new Intent (). SetClass (this, songsactivity.class); Spec = Tabhost.newtabspec ("songs"). Setindicator ("Songs", Res.getdrawable (r.drawable.ic_tab_dr            awable). SetContent (Intent);            Tabhost.addtab (spec);        Tabhost.setcurrenttab (2); }}

Operation Result:

The above is the Android UI control family: Tab layout (tab layouts) content, more about topic.alibabacloud.com (www.php.cn)!

