An example analysis of tabwidget tab usage in Android programming _android

This example describes the Tabwidget tab usage of Android programming. Share to everyone for your reference, specific as follows:

1 overview

Tabwidget and Tabhost. tab components generally include tabhost and Tabwidget, Framelayout, and Tabwidget, framelayout belong to Tabhost.

Whether to inherit tabactivity issues

Implementation steps. Two implementations, one is the layout of each tab embedded in the Tabhost in the Framelayout, each tab's content layout and display in the Framelayout, the disadvantage is that the layout will appear very bloated; one is that each tab is separate from the Framelayout To the activity rendering, which allows each tab to have a separate layout.

2 Effect Chart

The case at the top of the widget:

3 main Layouts

3.1 Tabmain Layout

Mode one:

<?xml version= "1.0" encoding= "Utf-8"?> <tabhost xmlns:android= "Http://schemas.android.com/apk/res/android" "Android:id=" @+id/tabhost "android:layout_width=" match_parent "android:layout_height=" Match_parent "Android:orien" 
    tation= "vertical" > <relativelayout android:layout_width= "fill_parent" android:layout_height= "Fill_parent" android:orientation= "vertical" > <tabwidget android:id= "@android: Id/tabs" android:layout_width= "Fill_parent" android:layout_height= "60dip" android:layout_alignparentbottom= "true" android:background= " #424242 "> </TabWidget> <framelayout android:id=" @android: Id/tabcontent "Android:layout_wi
        Dth= "Fill_parent" android:layout_height= "fill_parent" > <linearlayout android:id= "@+id/theme" Android:layout_width= "Fill_parent" android:layout_height= "fill_parent" android:orientation= "vertical"
   "> <textview       Android:id= "@+id/theme_title" android:layout_width= "wrap_content" android:layout_height= "Wrap_c" Ontent "android:text=" Tab1 "/> </LinearLayout> <linearlayout android:id=" @+id/wa Llpaper "android:layout_width=" fill_parent "android:layout_height=" Fill_parent "Android:orientatio" n= "vertical" > <textview android:id= "@+id/wallpaper_title" android:layout_width= "Wrap_co"
      Ntent "android:layout_height=" wrap_content "android:text=" Tab2 "/> </LinearLayout> <linearlayout android:id= "@+id/iconbg" android:layout_width= "Fill_parent" Android:layout_heig 
          ht= "fill_parent" android:orientation= "vertical" > <textview android:id= "@+id/iconbg_title" Android:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:text= "TAB3" "/> </linearlayout> <linearlayout android:id= "@+id/screenlock" android:layout_width= "Fill_parent" android:layout_height= "fill_parent" android:orientation= "vertical" > <textview android:id
          = "@+id/screenlock_title" android:layout_width= "wrap_content" android:layout_height= "Wrap_content"
        android:text= "Tab4"/> </LinearLayout> <linearlayout android:id= "@+id/effect" Android:layout_width= "Fill_parent" android:layout_height= "fill_parent" android:orientation= "vertical" &G
        T <textview android:id= "@+id/effect_title" android:layout_width= "Wrap_content" Android:layo ut_height= "Wrap_content" android:text= "Tab5"/> </LinearLayout> </FrameLayout> </r

 Elativelayout> </TabHost>

Mode two:

<?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"
   android:background= "@color/wcity_normal_bg" >
  <linearlayout
     android:layout_ Width= "Fill_parent"
     android:layout_height= "fill_parent"
     android:orientation= "vertical" >
  < Framelayout
     android:id= "@android: id/tabcontent"
     android:layout_width= "Fill_parent"
     android: layout_height= "Fill_parent"
     android:layout_weight= "1" >
  </FrameLayout>
  <tabwidget
     android:id= "@android: Id/tabs"
     android:layout_width= "fill_parent"
     android:layout_height= "Wrap_ Content "
     android:background=" @drawable/tab "
     />
   </LinearLayout>
</TabHost>

3.2 TabItem Layout

There is no difference between mode one and mode two in this part, only the difference of representation form. For example, on demand, TAB can

is rendered only in text,

Can only be presented as a picture,

You can have pictures and text at the same time

The layout of the text and pictures is as follows:

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android=
"http://schemas.android.com/apk/" Res/android "
  android:layout_width=" fill_parent "
  android:layout_height=" Fill_parent "
  android: Gravity= "center_horizontal|center_vertical"
  android:orientation= "vertical" >
  <linearlayout
    Android:id= "@+id/tabitem
    android:layout_width=" wrap_content
    android:layout_height= "Wrap_content"
    android:background= "@drawable/bg_ispressed"
    android:gravity= "center_horizontal|center_vertical"
    android:orientation= "vertical" >
    <imageview
      android:id= "@+id/icon"
      android:layout_ Width= "Wrap_content"
      android:layout_height= "wrap_content"/> <textview android:id=
      "@+id/" Name "
      android:layout_width=" wrap_content "
      android:layout_height=" wrap_content "/>
  </ Linearlayout>
</LinearLayout>

3.3 Click state

tab-click the state after the problem, if clicked, no status hint to the user is unfriendly. The realization of the click State is to set the android:background of the TabItem layout. For example:

Properties of LinearLayout Android:background settings in the above TabItem: @drawable/bg_ispressed

The bg_ispressed files are as follows:

<?xml version= "1.0" encoding= "Utf-8"?> <selector xmlns:android= 
"http://schemas.android.com/apk/res/" Android "> 
  <item android:drawable=" "@drawable/tab_selected_bg" android:state_pressed= "false" Android: State_selected= "true"/> 
</selector> 

The TAB_SELECTED_BG is the image effect after the click Change.

3.4 Questions about the tab position

Whether the Tab tab is displayed at the top or bottom is often a problem.

Usually in the Tabmain layout tabwidget on the framelayout above the default is shown at the top, if changed to at the bottom of the display, the first thing you will think of is the direct Exchange order, the Tabwidget placed behind the framelayout.

Case one:

The problem is, the tab bar just disappears (I tried), and then the solution is: Add the attribute in Framelayout: android:layout_weight= "1". This situation can be solved by the condition that Tabwidget and framelayout are nested within the linearlayout layout, and if they are not, they will not work.

Scenario Two:

Tabwidget and Framelayout in any order, add attributes to Tabwidget

Copy Code code as follows:

Android:layout_alignparentbottom= "true"

Of course, this situation is suitable for tabwidget and framelayout to be nested in the relativelayout layout, the same, if the other is not feasible.

Note: The above two situations are not absolute, only to practice the above two situations, as for the other layout is not clear, specific problems specific analysis.

4 inheriting tabactivity?

4.1 Inheritance tabactivity and the problem of not inheriting

Inheritance does not inherit tabactivity, look at their habits, can be correctly implemented, no difference, as far as the code is the only difference is:

The need to inherit an activity without inheriting tabactivity is added to the code:

Copy Code code as follows:

Mtabhost.setup ();

4.2 Main Code

Code that inherits from activity directly

Import java.util.ArrayList;
Import java.util.List;
Import android.app.Activity;
Import Android.content.Context;
Import Android.os.Bundle;
Import Android.view.LayoutInflater;
Import Android.view.View;
Import Android.widget.ImageView;
Import Android.widget.LinearLayout;
Import Android.widget.TabHost;
Import Android.widget.TextView;
  public class Tabdesignactivity extends activity{the private context Mcontex = this;
  Private Tabhost Mtabhost;
  Private String TAB1 = "TAB1";
  Private String TAB2 = "TAB2";
  Private String TAB3 = "TAB3";
  Private String TAB4 = "TAB4";
  Private String TAB5 = "TAB5";
  Private list<linearlayout> menuitemlist; @Override protected void OnCreate (Bundle savedinstancestate) {//TODO auto-generated method stub super.oncreate
    (savedinstancestate);
    Setcontentview (R.layout.tab_main);
    Menuitemlist = new arraylist<linearlayout> ();
    Mtabhost = (tabhost) Findviewbyid (r.id.tabhost);
    Mtabhost.setup (); Mtabhost.addtab (mtabhost.neWtabspec ("Tab1"). Setindicator (Getmenuitem (r.drawable.tab1_ispressed, TAB1)). SetContent (R.ID.TAB1)); Mtabhost.addtab (Mtabhost.newtabspec ("TaB2"). Setindicator (Getmenuitem (r.drawable.tab2_ispressed, TAB2)).
    SetContent (R.ID.TAB2)); Mtabhost.addtab (Mtabhost.newtabspec ("Tab3"). Setindicator (Getmenuitem (r.drawable.tab3_ispressed, TAB3)).
    SetContent (R.ID.TAB3)); Mtabhost.addtab (Mtabhost.newtabspec ("Tab4"). Setindicator (Getmenuitem (r.drawable.tab4_ispressed, TAB4)).
    SetContent (R.ID.TAB4)); Mtabhost.addtab (Mtabhost.newtabspec ("Tab5"). Setindicator (Getmenuitem (r.drawable.tab5_ispressed, TAB5)).
  SetContent (R.ID.TAB5)); Public View getmenuitem (int imgid, String textid) {linearlayout ll = (linearlayout) layoutinflater.from (Mcontex). In
    Flate (R.layout.tab_item, NULL);
    ImageView Imgview = (imageview) Ll.findviewbyid (R.id.icon);
    Imgview.setbackgroundresource (Imgid);
    TextView TextView = (TextView) Ll.findviewbyid (r.id.name);
    Textview.settext (Textid); Menuitemlist.add (LL);
  return ll;

 }
}

Inherit from tabactivity implementation

/** * @author Aaron * * * Package com.aaron.activity;
Import java.util.ArrayList;
Import java.util.List;
Import Android.annotation.SuppressLint;
Import android.app.TabActivity;
Import Android.content.Context;
Import android.content.Intent;
Import Android.os.Bundle;
Import Android.view.LayoutInflater;
Import Android.widget.ImageView;
Import Android.widget.LinearLayout;
Import Android.widget.TabHost;
Import Android.widget.TextView;
Import Android.widget.TabHost.TabSpec;
Import COM.AARON.UTIL.R;
  /** * @author Aaron * * */public class Tabwidget extends Tabactivity {//Declare Tabhost object private Tabhost mtabhost;
  Private Layoutinflater Minflater;
  Private list<textview> Mtext;
  Private list<imageview> mimage;
  Private list<tabspec> Mtabspec;
  Private list<linearlayout> LinearLayout;
  Private list<intent> Intent;
  Private context Mcontext;
  private static final string[] Tabtitle = {"Tab1", "Tab2", "Tab3", "Tab4", "TAB5"}; private static final int[] TabiMage = {r.drawable.main1, r.drawable.main2, r.drawable.main3, r.drawable.main4,r.drawable.main5}; /** called the activity is a.
    * * @Override public void onCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
    Setcontentview (R.layout.tab_main);
    Mcontext = this;
    Minflater = Layoutinflater.from (this); Mtabhost = (tabhost) Findviewbyid (Android.
    R.id.tabhost);
    Mtabspec = new arraylist<tabspec> ();
    LinearLayout = new arraylist<linearlayout> ();
    Mtext = new arraylist<textview> ();
    Intent = new arraylist<intent> (); If you refer to the layout of a picture mimage = new Arraylist<imagevie
    W> ();
  Creattab (); @SuppressLint ("Newapi") public void Creattab () {for (int i = 0; i < tabtitle.length; i++) {MTABSPEC.A
     DD (Mtabhost.newtabspec (tabtitle[i])); Choose which layout to use//***************************** Linearlayout.add ((linearlayout) minflater.inflate (R.layout.tabwidget2, NULL)) 
      ;
      Mtext.add ((TextView) linearlayout.get (i). Findviewbyid (R.id.tab_text_name));
      Mtext.get (i). SetText (Tabtitle[i]); If you refer to the layout of the picture, add it to the picture Mimage.add (ImageView)
      Linearlayout.get (i). Findviewbyid (R.id.tab_image_name));
      Mimage.get (i). Setimageresource (Tabimage[i]); The activity switch (i) that joins each tab in turn (i) {CA
        Se 0:intent.add (new Intent (). SetClass (Tabwidget.this, Udoactivity.class));
      Break
        Case 1:intent.add (New Intent (). SetClass (Tabwidget.this, Udoactivity.class));
      Break Case 2:intent.add (New Intent (). SetClass (Tabwidget. This, udoactivity.class));
      Break
        Case 3:intent.add (New Intent (). SetClass (Tabwidget.this, Udoactivity.class));
      Break
        Case 4:intent.add (New Intent (). SetClass (Tabwidget.this, Udoactivity.class));
      Break
      Mtabspec.get (i). Setindicator (Linearlayout.get (i));
      Mtabspec.get (i). SetContent (Intent.get (i));
    Mtabhost.addtab (Mtabspec.get (i));

 }
}

4.3 Key code detailed

1) mtabhost.newtabspec ("Tab1") is used to new tab and tag for this tab.
2) SetContent () is used to process the action after clicking this tab, it can be a component under this activity, such as SetContent (R.ID.TAB1), can also be a intent, for example: SetContent ( This, Subtab.class)).
3) Setindicator () is used to mark the name of this tab, either Setindicator ("Tab1") or other attributes, such as Picture: Setindicator ("Name", Getresources (). Getdrawable (Android. R.TAB1)).
4) Tabs.addtab (spec) adds this tab to the Tabhost.
5) Getmenuitem (R.DRAWABLE.TAB_ISPRESSED,TAB1) sets the state in which a tab is pressed to change, and the r.drawable.tab_ispressed layout is as follows:

<?xml version= "1.0" encoding= "Utf-8"?> <selector xmlns:android=
"http://schemas.android.com/apk/res/" Android ">
  <item android:drawable=" "@drawable/tab1_menu_effect_selected" android:state_pressed= "false" Android:state_selected= "true"/>
  <item android:drawable= "@drawable/tab1_menu_effect"/>
</ Selector>

I hope this article will help you with the Android program.