Go to the tab layout of Android-Preliminary section

Tab layout is one of the common layout methods in mobile apps. Using tabs, You can visually scale up a relatively narrow cell phone screen several times, leaving clues to attract users to click. It is indeed a classic design (more classic than PC !). On Android, the General tab Layout looks like this --

It is easy to implement tabs. The layout code 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">
<Tabhost 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"/>
</Linearlayout>
<Framelayout Android: Id = "@ Android: ID/tabcontent"
Android: layout_width = "fill_parent" Android: layout_height = "wrap_content">
<Textview Android: Id = "@ + ID/TV1" Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"/>
<Textview Android: Id = "@ + ID/TV2" Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"/>
<Textview Android: Id = "@ + ID/TV3" Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"/>
<Textview Android: Id = "@ + ID/TV4" Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"/>
</Framelayout>
</Tabhost>
</Linearlayout>

You don't need to worry too much about the gray font part. Its function is to put several textviews in the layout. When you click the tab, a corresponding one is displayed on the interface. The topic of textview will be retained later. Continue to "tab. Java code --

Package com. ghstudio. samples;

Import Android. App. tabactivity;
Import Android. OS. Bundle;
Import Android. widget. tabhost;

Public class tabactivity extends tabactivity {
/** Called when the activity is first created .*/
@ Override
Public void oncreate (bundle savedinstancestate ){
Super. oncreate (savedinstancestate );
Setcontentview (R. layout. Main );
Setuptabs ();
}

Private void setuptabs (){
Tabhost mtabhost = gettabhost ();
Mtabhost. addtab (mtabhost. newtabspec ("tab_1"). setindicator (
"Tab 1"). setcontent (R. Id. list_1 ));
Mtabhost. addtab (mtabhost. newtabspec ("tab_2"). setindicator (
"Tab 2"). setcontent (R. Id. list_2 ));
Mtabhost. addtab (mtabhost. newtabspec ("tab_3"). setindicator (
"Tab 3"). setcontent (
R. Id. list_3 ));
Mtabhost. addtab (mtabhost. newtabspec ("tab_4"). setindicator (
"Tab 4"). setcontent (
R. Id. list_4 ));
}

}

The setuptabs () method simply adds four tabs to the tabhost. Remember that the text on the first tab is tab_1. For beginners, after using addtab to add a tab, they can only listen to it and cannot modify it at runtime. However, it is too rigid. Let's take a bit deeper. Modify the display of the tab at runtime!

Application Scenario: When you click a tab, not only the corresponding tab is switched, but the text on the selected tab is changed to "Hello !", The font color is red, and the text on other non-selected tabs becomes "Bye !", The font color is white.

Background: First, you need to understand the layers in the layout XML file. We can see that there is a linearlayout under the tabhost, And the next layer is the tabwidget used to display the four tabs. At the same level as linearlayout, there is a framelayout. Below are four textviews. The heap is nothing more than a description. To turn to tabhost, you must find the tabwidget, and the layout file provides a level clue for finding it.

Background Knowledge 2: tabwidget is an encapsulated widget with Qian Kun in it. After reading the code, you will know that the tabwidget contains a relativelayout, and then two views of the same level: An imageview, used to put the icon, and a textview, used to display text. All we need to do is find the textview and modify its attributes in the code.

Okay, the code is coming --

Package com. ghstudio. samples;

Import Android. App. tabactivity;
Import Android. Graphics. color;
Import Android. OS. Bundle;
Import Android. widget. linearlayout;
Import Android. widget. relativelayout;
Import Android. widget. tabhost;
Import Android. widget. tabwidget;
Import Android. widget. textview;
Import Android. widget. tabhost. ontabchangelistener;

Public class tabactivity extends tabactivity {

Tabhost mtabhost;

/** Called when the activity is first created .*/
@ Override
Public void oncreate (bundle savedinstancestate ){
Super. oncreate (savedinstancestate );
Setcontentview (R. layout. Main );
Setuptabs ();
}

Private void setuptabs (){

Mtabhost = gettabhost ();

Mtabhost. addtab (mtabhost. newtabspec ("tab_1"). setindicator (
"Tab 1"). setcontent (R. Id. TV1 ));
Mtabhost. addtab (mtabhost. newtabspec ("tab_2"). setindicator (
"Tab 2"). setcontent (R. Id. TV2 ));
Mtabhost. addtab (mtabhost. newtabspec ("tab_3"). setindicator (
"Tab 3"). setcontent (
R. Id. TV3 ));
Mtabhost. addtab (mtabhost. newtabspec ("tab_4"). setindicator (
"Tab 4"). setcontent (
R. Id. TV4 ));

Mtabhost. setontabchangedlistener (New ontabchangelistener (){

@ Override
Public void ontabchanged (string tabtag) {// when the Selected tab status changes

Int Tabid = mtabhost. getcurrenttab ();
Changetab (Tabid );
}
});
}

Private void changetab (INT Tabid ){
Linearlayout LL = (linearlayout) mtabhost. getchildat (0 );
Tabwidget Tw = (tabwidget) ll. getchildat (0 );
// The above two lines of code, find tabwidget

Int tabcount = TW. getchildcount ();

For (INT I = 0; I relativelayout RL = (relativelayout) TW. getchildat (I );
Textview TV = (textview) RL. getchildat (1 );
// The above two lines of code, find the textview to modify the attribute

String tablabel = "Bye! ";
Int color = color. White;

If (I = Tabid) {// If the tab is selected, modify it
Tablabel = "Hello! ";
Color = color. Red;
}

TV. settext (tablabel );
TV. settextcolor (color );
// The above two lines of code modify the attributes of textview

}
}
}

Run --

Of course, you can continue to play tabhost. After you understand hierarchical relationships and get various views layer by layer, you have no idea how to play them. For example, modify the background image of each tab (actually a relativelayout) (using the setbackground method) or do other things. About tabhost, I will continue to provide more in-depth Gameplay in the future. Let's start with this article.