Android development step by step 31: TabActivity usage Tab is displayed at the bottom, androidtabactivity

Source: Internet
Author: User

Android development step by step 31: TabActivity usage Tab is displayed at the bottom, androidtabactivity

The Tab is a very common control ,. net contains the multipage + tabstrip combination to implement page switching through tag switching. Similarly, we often use frameset in html. In android, we use FrameLayout + TabWidget, the xml page is loaded in FrameLayout, And the TabWidget displays the tag. Click the tag to jump to the related activity or view.
The detailed inheritance relationships of public class TabActivity extends ActivityGroup are as follows:
Java. lang. Object
Using android. content. Context
Using android. content. ContextWrapper
Using android. view. ContextThemeWrapper
Using android. app. Activity
Using android. app. ActivityGroup
Using android. app. TabActivity
As you can see, TabActivity inherits from Activity and contains a TabHost component. The TabHost component is the ViewGroup inherited from FrameLayout. The id of the TabHost component must be @ android: id/tabhost. It must contain a FrameLayout, And the id of the FrameLayout must be @ android: id/tabcontent. In addition, it must contain a TabWidget, the id is @ android: id/tabs. FrameLayout can be used to place each independent Activity, while TabWidget is used to display each Tab. By default, the Activity corresponding to the first tab is first displayed in FrameLayout. Then, each time you click another Tab, the corresponding Activity is displayed in FrameLayout. This is a bit similar to the frameset concept in html.
Well, we have introduced so much theoretical knowledge to start our practice. The effect we want to achieve is: Put A TabWidget at the bottom of the page, and a logo and text introduction are displayed in the page header, the page body displays the page corresponding to the specific activity. It is easy to set the tab to display at the bottom. You only need to set the attribute android: layout_alignParentBottom = "true" of TabWidget"
Android: layout_alignParentTop = "false"
In this way, you can reverse the setting to be displayed on the top.
Android: layout_alignParentBottom = "false"
Android: layout_alignParentTop = "true"
 
Step 1: Create a page
Home page: tabactivityview. xml contains the head_line page of the headers FrameLayout footer TabWidget.
<? Xml version = "1.0" encoding = "UTF-8"?>
<TabHost android: id = "@ android: id/tabhost" android: layout_width = "fill_parent"
Android: layout_height = "fill_parent" xmlns: android = "http://schemas.android.com/apk/res/android">
 
<RelativeLayout android: orientation = "vertical"
Android: layout_width = "fill_parent" android: layout_height = "fill_parent">
 
<Include android: id = "@ + id/head_line" layout = "@ layout/head_line"
Android: layout_width = "fill_parent" android: layout_height = "wrap_content"/>
 
<FrameLayout android: id = "@ android: id/tabcontent"
Android: layout_below = "@ id/head_line" android: layout_width = "fill_parent"
Android: layout_height = "fill_parent" android: layout_weight = "1.0"/>
 
<TabWidget android: id = "@ android: id/tabs"
Android: layout_gravity = "bottom" android: layout_height = "601_dip"
Android: layout_width = "fill_parent" android: fadingEdge = "none"
Android: fadingEdgeLength = "0.0px" android: paddingLeft = "0.0dip"
Android: paddingTop = "2.0dip" android: paddingRight = "0.0dip"
Android: paddingBottom = "0.0dip" android: layout_alignParentBottom = "false"
Android: layout_alignParentTop = "true"/>
 
</RelativeLayout>
 
</TabHost>
 
Header: head_line.xml contains icons and text
 
<RelativeLayout
Android: layout_width = "fill_parent" android: layout_height = "wrap_content"
Xmlns: android = "http://schemas.android.com/apk/res/android">
<ImageView android: layout_height = "wrap_content" android: src = "@ drawable/icon" android: layout_width = "wrap_content" android: id = "@ + id/imageView1" android: layout_alignParentTop = "true" android: layout_alignLeft = "@ + id/top_btn_left"> </ImageView>
<TextView android: gravity = "center_horizontal" android: text = "better pay, better life" android: layout_height = "wrap_content" android: textSize = "22.0sp" android: layout_width = "wrap_content" android: layout_alignWithParentIfMissing = "true" android: singleLine = "true" android: id = "@ + id/top_title" android: ellipsize = "middle" android: layout_centerVertical = "true" android: layout_centerHorizontal = "true"> </TextView>
 
</RelativeLayout>
 
Label: tab_item.xml, containing icons and text
<? Xml version = "1.0" encoding = "UTF-8"?>
<LinearLayout android: orientation = "vertical"
Android: layout_width = "fill_parent" android: layout_height = "wrap_content"
Xmlns: android = "http://schemas.android.com/apk/res/android">
<ImageView android: id = "@ + id/tab_item_imageview"
Android: layout_width = "fill_parent" android: layout_height = "32.0dip"
Android: scaleType = "fitCenter"/>
<TextView android: id = "@ + id/tab_item_textview"
Android: layout_width = "fill_parent" android: layout_height = "wrap_content"
Android: gravity = "center" android: singleLine = "true"
Android: marqueeRepeatLimit = "1" android: textSize = "11.0sp"
Android: ellipsize = "marquee"/>
</LinearLayout>
 
Step 2: Create Activity MyTabActivity. java
/**
*
*/
Package com. figo. helloworld;
 
Import android. app. TabActivity;
Import android. content. Intent;
Import android. content. res. Resources;
Import android. OS. Bundle;
Import android. view. View;
Import android. widget. ImageView;
Import android. widget. TabHost;
Import android. widget. TabHost. TabSpec;
Import android. widget. TextView;
 
/**
* @ Author zhuzhifei
*
*/
Public class MyTabActivity extends TabActivity {
 
Private TabHost tabHost;
 
@ Override
Public void onCreate (Bundle savedInstanceState ){
 
Super. onCreate (savedInstanceState );
SetContentView (R. layout. tabactivityview); // you can specify the displayed page.
TabHost = getTabHost (); // get tabHost
CreateTab (); // create a tab set
 
}
 
/**
* Assemble the tab control.
*/
Private void createTab (){
 
Resources res = getResources ();
CreateTabItem (R. drawable. icon,
Res. getString (R. string. pay), new Intent (this,
HelloWorldActivity. class ));
CreateTabItem (R. drawable. icon,
Res. getString (R. string. transact), new Intent (this,
ListViewActivity. class ));
CreateTabItem (R. drawable. icon,
Res. getString (R. string. account), new Intent (this,
HelloWorldActivity. class ));
CreateTabItem (R. drawable. icon,
Res. getString (R. string. message), new Intent (this,
HelloWorldActivity. class ));
CreateTabItem (R. drawable. icon,
Res. getString (R. string. tip), new Intent (this,
HelloWorldActivity. class ));
 
}
 
/**
* Generate tab_item
*
* @ Param imageResourceSelector
* Image Selector
* @ Param text
* Text
* @ Param intent
* Intent
*/
Private void createTabItem (int imageResourceSelector, String text,
Intent intent ){
 
View view = View. inflate (this, R. layout. tab_item, null); // assemble the view
(ImageView) view. findViewById (R. id. tab_item_imageview ))
. SetImageResource (imageResourceSelector );
(TextView) view. findViewById (R. id. tab_item_textview). setText (text );
 
TabSpec spec = tabHost. newTabSpec (text). setIndicator (view)
. SetContent (intent); // inject view into spec. setContent has multiple overload methods for use.
TabHost. addTab (spec );
 
}
}
 
 
Step 3: Register Activity with AndroidManifest. xml
<Activity android: name = ". MyTabActivity">
<Intent-filter>
<Action android: name = "android. intent. action. MAIN"/>
<Category android: name = "android. intent. category. LAUNCHER"/>
</Intent-filter>
</Activity>
Step 4. Running Effect
Select the first tab
 

Select the second tab
 


Which tab navigation bar or button can be used for the layout under the android program?

Before android4.0, you can use TabHost or TabActivity. After android4.0, The ActionBar will include the tab control.

Can TabActivity be used when there is only one activity in android?

The error message should be sent to logcat.
 

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.