Android Development Review notes-TabHost component (1) (implement menu navigation at the bottom), Android tabhost

Android Development Review notes-TabHost component (1) (implement menu navigation at the bottom), Android tabhost

What is TabHost?

The main function of the TabHost component is to manage applications by category. For example, you can see a graphical interface when using a windows operating system.

When talking about this component on the TabHost tab, you have to go over the API provided by Google. We can find this article:

It tells us that this component has been deprecated since Android 4.0. We recommend that you use the Fragment component to replace it in our new program.

Not surprisingly, anyone who has used TabHost should know:

1. Its Design violates the Single Window Principle of Activity. It can load multiple activities at the same time and switch back and forth between them.

2. A fatal problem is that when we click another option and press the Back key, it will cause the entire application to exit, instead of switching to the previous tab, although we can override the OnKeyDown method in the main program, this will cause every time you press the Back key, you can only return to the first option menu.

 

However, as a developer, we still need to master this milestone component. The following figure shows the effect to be achieved today:

 

The code is attached below (comments are very detailed)

 

There are two ways to implement TabHost:

Method 1: directly let an Activity program inherit the TabActivity class (get the instance through getTabHost );

Method 2: Define the XML layout file and use the findViewById () method to obtain the TagHost component. instantiate and configure the component using the setup () method. The second method is used as an example to illustrate the project structure: 1. TabHost main layout File

Activity_main.xml (relatively layout is used here to display tabs below the screen)

1 <TabHost xmlns: android = "http://schemas.android.com/apk/res/android" 2 android: id = "@ + id/mytabhost" 3 android: layout_width = "fill_parent" 4 android: layout_height = "fill_parent"> 5 6 <! -- A layout manager is required --> 7 8 <RelativeLayout 9 android: layout_width = "fill_parent" 10 android: layout_height = "fill_parent" 11> 12 13 <! -- 14 because TabHost is inherited from FrameLayout, A FrameLaytout layout (Content Page) is required. id15 must be tabcontent16 --> 17 18 <FrameLayout19 android: id = "@ android: id/tabcontent "20 android: layout_width =" fill_parent "21 android: layout_height =" fill_parent "22> 23 </FrameLayout> 24 25 <! -- TabWidget must be a tag used to store tab labels. The id must be tabs --> 26 27 <TabWidget28 android: id = "@ android: id/tabs" 29 android: layout_width = "fill_parent" 30 android: layout_height = "wrap_content" 31 android: background = "@ drawable/tab_widget_background" 32 android: layout_alignParentBottom = "true" 33> 34 </TabWidget> 35 36 </RelativeLayout> 37 38 </TabHost>

The layout of the TabHost file must follow the following points:

1. All files used for tag configuration must use "<TabHost>" as the root node;

2. To ensure that the tab and label content are displayed normally (for example, the label prompt should be placed above the Label display content), you can use a layout manager (for example, LinearLayout, RelativeLayout ..)

3. Define a "<TagWidget>" label to indicate the entire tag container. In addition, define this component ID as "tabs" to allow multiple tags to be added.

4. Because TabHost is a subclass of FrameLayout, you must use the FrameLayout layout to define the tab content and the label ID is "tabcontent"

 

As to why we should follow these conditions, we can find the source code of TabHost: 2. layout file for each labelTab_layout.xml

 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     android:layout_width="wrap_content" 4     android:layout_height="wrap_content" 5     android:gravity="center_horizontal" 6      android:background="@drawable/tab_selector" 7     android:orientation="vertical" > 8  9     <ImageView10         android:id="@+id/image"11         android:layout_width="wrap_content"12         android:layout_height="wrap_content"13         android:padding="3dp" />14 15     <TextView16         android:id="@+id/title"17         android:layout_width="wrap_content"18         android:layout_height="wrap_content" 19         android:textColor="@android:color/white"/>20 21 </LinearLayout>

 

3. a selector for aesthetic effects

Tab_selector.xml

 1 <?xml version="1.0" encoding="utf-8"?> 2 <selector xmlns:android="http://schemas.android.com/apk/res/android" > 3     <item  4         android:state_pressed="true" android:drawable="@drawable/tab_item_p" 5         ></item> 6     <item  7         android:state_selected="true" android:drawable="@drawable/tab_item_d" 8         ></item> 9 10 </selector>

 

4. Jump to the layout file of the Activity (because it is basically the same, only one of them is provided here)

Tabactivity. xml

1 <? Xml version = "1.0" encoding = "UTF-8"?> 2 <RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" 3 android: layout_width = "match_parent" 4 android: layout_height = "match_parent"> 5 6 <LinearLayout 7 android: layout_width = "match_parent" 8 android: layout_height = "match_parent" 9 android: orientation = "vertical"> 10 11 12 <TextView13 android: id = "@ + id/title" 14 android: layout_width = "wrap_content" 15 android: layout_height = "wrap_content" 16 android: text = "I'm interface 1"/> 17 </LinearLayout> 18 19 </RelativeLayout>

 

5. JAVA main code 

1 package com. example. tabhosttest; 2 3 import android. app. activityGroup; 4 import android. content. intent; 5 import android. OS. bundle; 6 import android. view. view; 7 import android. widget. imageView; 8 import android. widget. tabHost; 9 import android. widget. tabHost. tabSpec; 10 import android. widget. textView; 11 12 public class MainActivity extends ActivityGroup {13 14 private TabHost tabHost; // declare a TabHost object 15 16 // resource file 17 private Class activitys [] = {TabActivity1.class, TabActivity2.class, tabActivity3.class, TabActivity4.class, TabActivity5.class}; // jump to the Activity18 private String title [] = {"Homepage", "Search", "set", "topic ", "More"}; // set the menu title 19 private int image [] = {R. drawable. tab_icon1, R. drawable. tab_icon2, R. drawable. tab_icon3, R. drawable. tab_icon4, R. drawable. tab_icon5,}; // set menu 20 21 @ Override22 protected void onCreate (Bundle savedInstanceState) {23 super. onCreate (savedInstanceState); 24 setContentView (R. layout. activity_main); 25 initTabView (); // initialize the tab label 26 27} 28 29 private void initTabView () {30 // instantiate tabhost31 this. tabHost = (TabHost) findViewById (R. id. mytabhost); 32 // because ActivityGroup is inherited, you must add this parameter to the setup method. If TabActivity is inherited, 33 tabHost can be omitted. setup (this. getLocalActivityManager (); 34 35 // create tag 36 for (int I = 0; I <activitys. length; I ++) {37 // instantiate a view as the layout of the tab. 38 View = view. inflate (this, R. layout. tab_layout, null); 39 40 // set imageview41 ImageView imageView = (ImageView) view. findViewById (R. id. image); 42 imageView. setImageDrawable (getResources (). getDrawable (image [I]); 43 // sets textview44 TextView textView = (TextView) view. findViewById (R. id. title); 45 textView. setText (title [I]); 46 // sets the jump to activity47 Intent intent = new Intent (this, activitys [I]); 48 49 // load the view object and set the jump activity50 TabSpec spec = tabHost. newTabSpec (title [I]). setIndicator (view ). setContent (intent); 51 52 // Add to tab 53 tabHost. addTab (spec); 54} 55 56} 57 58 59}

 

Here is an overload method setIndicator (), which is used to set the tab:

1. public TabHost. TabSpecSetIndicator(CharSequence label)

Set the title. No icon is displayed.

2. public TabHost. TabSpecSetIndicator(CharSequence label, Drawable icon)

Set the title and Icon (the icon here can be set using getResources (). getDrawable (int id)

3. public TabHost. TabSpecSetIndicator(View view)

Set custom view

 

There is also a setContent (Intent intent), which is used to set the TAG content, that is, the Activity we want to jump.

 

There are five tabs, so there are five activities. The specific content is based on your needs.

Remember to declare the Activity in the AndroidManifest. xml configuration file after writing it.

 1 <?xml version="1.0" encoding="utf-8"?> 2 <manifest xmlns:android="http://schemas.android.com/apk/res/android" 3     package="com.example.tabhosttest" 4     android:versionCode="1" 5     android:versionName="1.0" > 6  7     <uses-sdk 8         android:minSdkVersion="8" 9         android:targetSdkVersion="21" />10 11     <application12         android:allowBackup="true"13         android:icon="@drawable/ic_launcher"14         android:label="@string/app_name"15         android:theme="@style/AppTheme" >16         <activity17             android:name=".MainActivity"18             android:label="@string/app_name" >19             <intent-filter>20                 <action android:name="android.intent.action.MAIN" />21 22                 <category android:name="android.intent.category.LAUNCHER" />23             </intent-filter>24         </activity>25         <activity26             android:name="com.example.tabhosttest.TabActivity1"27             android:label="@string/app_name" >28         </activity>29         <activity30             android:name="com.example.tabhosttest.TabActivity2"31             android:label="@string/app_name" >32         </activity>33         <activity34             android:name="com.example.tabhosttest.TabActivity3"35             android:label="@string/app_name" >36         </activity>37         <activity38             android:name="com.example.tabhosttest.TabActivity4"39             android:label="@string/app_name" >40         </activity>41         <activity42             android:name="com.example.tabhosttest.TabActivity5"43             android:label="@string/app_name" >44         </activity>45     </application>46 47 </manifest>

 

Now, the navigation menu at the bottom is implemented. Try it ~

Here is a different implementation method, which is more concise and convenient for "android Development Review notes-TabHost component (2) (implementing the bottom menu navigation)"

 

 

 

This is an android tabhost. You can click the "other" component in the ta

Hey, this tabhost is an example everywhere. You should have a pdf or an api.

Which Android can use Gallery to build a TABHOST tab page? You need to drag a tab or display a pretty tab on the tab page below.

What does LZ want is the function of switching the TAB label forward or backward? This can be achieved by responding to touch screen events. If you want to change the TabHost style, you need android 1.6 or later. You can customize the TabHost style by layout. If it is less than 1.6, You need to rewrite the TabHost source code, which is a little more difficult.