Use of Android TabHost

Source: Internet
Author: User

There are two ways to implement the tab View in android. One is to define the <tabhost> label in the layout page, and the other is to inherit tabactivity. however, I prefer the second method. It should be because if the page is complex, your XML file will be written a lot, and the second method is more concise.

Use of the Tab First, design the page layout. After the paging design is complete, use the code to create Tab Tab, and add Logo and title Finally, determine the page layout displayed on each page.Create a "TabDemo" program, which contains three XML files: tab1.xml, tab2.xml, and tab3.xml. The three files use main in the linear layout, relative layout, and absolute layout examples respectively. and define the layout ID as layout01, layout02, and layout03tab1. xml file code

<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout android: id = "@ + id/layout01 "...... ...... </LinearLayout> tab2.xml File Code <? Xml version = "1.0" encoding = "UTF-8"?> <AbsoluteLayout android: id = "@ + id/layout02 "...... ...... </AbsoluteLayout> tab3.xml File Code <? Xml version = "1.0" encoding = "UTF-8"?> <RelativeLayout android: id = "@ + id/layout03 "...... ...... </RelativeLayout>

Import android. app. tabActivity; import android. OS. bundle; import android. widget. tabHost; import android. view. layoutInflater; public class TabDemo extends TabActivity {@ Overridepublic void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); TabHost tabHost = getTabHost (); LayoutInflater. from (this ). inflate (R. layout. tab1, tabHost. getTabContentView (), true); // associate the layout file with the TabHost LayoutInflater. from (this ). inflate (R. layout. tab2, tabHost. getTabContentView (), true); LayoutInflater. from (this ). inflate (R. layout. tab3, tabHost. getTabContentView (), true); tabHost. addTab (tabHost. newTabSpec ("TAB1 "). setIndicator ("linear layout "). setContent (R. id. layout01); // setContent () specifies the View tabHost contained in each Tab. addTab (tabHost. newTabSpec ("TAB2 "). setIndicator ("absolute layout "). setContent (R. id. layout02); tabHost. addTab (tabHost. newTabSpec ("TAB3 "). setIndicator ("relative layout "). setContent (R. id. layout03 ));}} The 8 Statement of line code TabDemo Class inheritance and TabActivity , Inherited from the past Activity Different, TabActivity Supports embedded multiple Activity Or View The 12 The line code passes GetTabHost () Function obtained Tab Tab container used Host clickable Tab Tab and page layout. The 13 The line code passes LayoutInflater Set Tab1.xml File layout Tab Tabs that can be used View Object The 16 Use line code AddTab () The function adds 1 Pages, TabHost. newTabSpec ("TAB1 ") Indicates that 12 The TabHost , Add an ID TAB1 Of Tab Paging The 17 Use line code SetIndicator () The function sets the title displayed by page. Use SetContent () Function sets the page layout associated with the page 

The second method does not inherit TabActivity. You can define TabHost in the layout file, but the id of TabWidget must be @ android: id/tabs. the id of FrameLayout must be @ android: id/tabcontent.

  1. <? Xml version = "1.0" encoding = "UTF-8"?>
  2. <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"
  3. Android: id = "@ + id/hometabs"
  4. Android: orientation = "vertical"
  5. Android: layout_width = "fill_parent"
  6. Android: layout_height = "fill_parent">
  7. <TabHost android: id = "@ + id/tabhost" // inherits from FrameLayout. Only one node can be displayed, and TabWidget and FrameLayout can be placed under LinearLayout.
  8. Android: layout_width = "fill_parent"
  9. Android: layout_height = "wrap_content">
  10. <LinearLayout
  11. Android: orientation = "vertical"
  12. Android: layout_width = "fill_parent"
  13. Android: layout_height = "fill_parent">
  14. <TabWidget android: id = "@ android: id/tabs"
  15. Android: orientation = "horizontal"
  16. Android: layout_width = "fill_parent"
  17. Android: layout_height = "wrap_content">
  18. </TabWidget>
  19. <FrameLayout android: id = "@ android: id/tabcontent"
  20. Android: layout_width = "wrap_content"
  21. Android: layout_height = "wrap_content">
    1. <LinearLayout android: id = "@ + id/ll01" android: layout_width = "fill_parent"
    2. Android: layout_height = "fill_parent" android: gravity = "center_horizontal"
    3. Android: orientation = "vertical">
    4. <EditText android: id = "@ + id/widget34" android: layout_width = "fill_parent"
    5. Android: layout_height = "wrap_content" android: text = "EditText"
    6. Android: textSize = "18sp">
    7. </EditText>
    8. <Button android: id = "@ + id/widget30" android: layout_width = "wrap_content"
    9. Android: layout_height = "wrap_content" android: text = "Button">
    10. </Button>
    11. </LinearLayout>
    12. <LinearLayout android: id = "@ + id/ll02" android: layout_width = "fill_parent"
    13. Android: layout_height = "fill_parent" android: gravity = "center_horizontal"
    14. Android: orientation = "vertical">
    15. <AnalogClock android: id = "@ + id/widget36"
    16. Android: layout_width = "wrap_content" android: layout_height = "wrap_content">
    17. </AnalogClock>
    18. </LinearLayout>
    19. <LinearLayout android: id = "@ + id/ll03" android: layout_width = "fill_parent"
    20. Android: layout_height = "fill_parent" android: gravity = "center_horizontal"
    21. Android: orientation = "vertical">
    22. <RadioGroup android: id = "@ + id/widget43"
    23. Android: layout_width = "166px" android: layout_height = "98px"
    24. Android: orientation = "vertical">
    25. <RadioButton android: id = "@ + id/widget44"
    26. Android: layout_width = "wrap_content" android: layout_height = "wrap_content"
    27. Android: text = "RadioButton">
    28. </RadioButton>
    29. <RadioButton android: id = "@ + id/widget45"
    30. Android: layout_width = "wrap_content" android: layout_height = "wrap_content"
    31. Android: text = "RadioButton">
    32. </RadioButton>
    33. </RadioGroup>
    34. </LinearLayout>
    35.  
  22. </FrameLayout>
  23. </LinearLayout>
  24. </TabHost>
  25. </LinearLayout>

 

  1. TabHost tabHost = (TabHost) findViewById (R. id. tabhost );
  2. TabHost. setup (); // complete Initialization
  3. TabWidget tabWidget = tabHost. getTabWidget ();
  4. TabHost. addTab (tabHost. newTabSpec ("tab1 "). setIndicator ("tab1", getResources (). getDrawable (R. drawable. img01 )). setContent (R. id.1101 ));
  5. TabHost. addTab (tabHost. newTabSpec ("tab2"). setIndicator ("tab2", getResources (). getDrawable (R. drawable. img02 ))
  6. . SetContent (R. id.1102 ));
  7. TabHost. addTab (tabHost. newTabSpec ("tab3"). setIndicator ("tab3", getResources (). getDrawable (R. drawable. img03 ))
  8. . SetContent (R. id.1103 ));

 

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.