Android UI Control Series: Tab layout (tab layouts)

Source: Internet
Author: User
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)!

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.