Implementation of the menu at the bottom of TabHost

Implementation of the menu at the bottom of TabHost

Implementation of the menu at the bottom of TabHost

I. Introduction

The menu bar at the bottom is a commonly used layout for various Android applications. Applications such as Sina Weibo and QQ space can be used in the bottom menu bar.

The bottom menu tab is mainly implemented through TabHost and RadioGroup.

Ii. Use of TabHost and RadioGroup

See the specific code implementation:

1. Implementation of activit_main.xml homepage Layout

Note that if you use the TabHost control, several IDs must be written in this way. android: ID = "@ android: id/tabhost; android: id = "@ android: id/tabcontent"; android: id = "@ android: id/tabs "; the reason for writing this is that the above ID control needs to be instantiated in the TabHost class. View Source Code:

<TabHost xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@android:id/tabhost"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    tools:context=".MainActivity" >    <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="0.0dip"            android:layout_weight="1.0" >        </FrameLayout>        <TabWidget            android:id="@android:id/tabs"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:layout_weight="0.0"            android:visibility="gone" />        <RadioGroup            android:id="@+id/main_radio"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:layout_gravity="bottom"            android:background="@drawable/market_sng_me_bg"            android:gravity="center_vertical"            android:orientation="horizontal" >            <RadioButton                android:id="@+id/radio_button0"                style="@style/main_btn_style"                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:layout_marginTop="2.0dip"                android:layout_weight="1"                android:drawableTop="@drawable/tabbar_home"                android:tag="radio_button0"                android:text="@string/main_page" />            <RadioButton                android:id="@+id/radio_button1"                style="@style/main_btn_style"                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:layout_marginTop="2.0dip"                android:layout_weight="1"                android:drawableTop="@drawable/tabbar_message_center"                android:tag="radio_button1"                android:text="@string/message" />            <RadioButton                android:id="@+id/radio_button2"                style="@style/main_btn_style"                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:layout_marginTop="2.0dip"                android:layout_weight="1"                android:drawableTop="@drawable/tabbar_add" />            <RadioButton                android:id="@+id/radio_button3"                style="@style/main_btn_style"                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:layout_marginTop="2.0dip"                android:layout_weight="1"                android:drawableTop="@drawable/tabbar_discover"                android:tag="radio_button3"                android:text="@string/discover" />            <RadioButton                android:id="@+id/radio_button4"                style="@style/main_btn_style"                android:layout_width="fill_parent"                android:layout_height="wrap_content"                android:layout_marginTop="2.0dip"                android:layout_weight="1"                android:drawableTop="@drawable/tabbar_profile"                android:tag="radio_button4"                android:text="@string/profile" />        </RadioGroup>    </LinearLayout></TabHost>

2. style. xml style layout File

<resources>      <style name="main_btn_style">        <item name="android:button">@null</item>        <item name="android:gravity">center_horizontal</item>        <item name="android:textSize">12sp</item>        <item name="android:drawablePadding">4dp</item>    </style> </resources>

If the button value is set to @ null, The radioButton button will not appear.

3. MainActivity. java

Package com. demo. tabhost; import android. app. tabActivity; import android. content. intent; import android. OS. bundle; import android. widget. radioButton; import android. widget. radioGroup; import android. widget. tabHost; public class MainActivity extends TabActivity {private RadioGroup main_radio; private RadioButton tab_home, tab_message, tab_add, tab_discover, tab_profile; private TabHost mHost; protected void OnCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); mHost = this. getTabHost (); // Add N tabs to define their tab names, indicator names, and categories corresponding to the target screen. MHost. addTab (mHost. newTabSpec ("one "). setIndicator ("1 "). setContent (new Intent (this, HomeActivity. class); mHost. addTab (mHost. newTabSpec ("two "). setIndicator ("2 "). setContent (new Intent (this, MessageActivity. class); mHost. addTab (mHost. newTabSpec ("three "). setIndicator ("3 "). setContent (new Intent (this, AddActivity. class); mHost. addTab (mHost. newTabSpec ("four "). setIndicator ("4 "). setContent (new Intent (this, DiscoverActivity. class); mHost. addTab (mHost. newTabSpec ("five "). setIndicator ("5 "). setContent (new Intent (this, ProfileActivity. class); main_radio = (RadioGroup) findViewById (R. id. main_radio); tab_home = (RadioButton) findViewById (R. id. radio_button0); tab_message = (RadioButton) findViewById (R. id. radio_button1); tab_add = (RadioButton) findViewById (R. id. radio_button2); tab_discover = (RadioButton) findViewById (R. id. radio_button3); tab_profile = (RadioButton) findViewById (R. id. radio_button4); main_radio.setOnCheckedChangeListener (new RadioGroup. onCheckedChangeListener () {public void onCheckedChanged (RadioGroup group, int id) {switch (id) {case R. id. radio_button0: mHost. setCurrentTabByTag ("one"); break; case R. id. radio_button1: mHost. setCurrentTabByTag ("two"); break; case R. id. radio_button2: mHost. setCurrentTabByTag ("three"); break; case R. id. radio_button3: mHost. setCurrentTabByTag ("four"); break; case R. id. radio_button4: mHost. setCurrentTabByTag ("five"); break ;}}});}}

Load the layout, add the tab, and define their tab name, Indicator Name, and category corresponding to the target screen.

4. There is also the Activity class corresponding to a tab and the xml corresponding to the layout file. The code is not pasted here.