Implementation principle and code of the menu bar at the bottom of android

The previous project has been completed, and this week is basically okay. So I sorted out the previous projects and wanted to encapsulate some general components, in this way, similar projects do not need to be repeatedly invented, which also saves development efficiency. I posted the demo today to facilitate future queries, and I hope it will help you at the same time.

The menu bar at the bottom is very important. I have read that many applications use the menu bar at the bottom. Here I use tabhost for a general purpose (that is, the number of unread messages can be displayed as that. Although I have done it before, the xml write in layout is too bloated, there are a lot of unnecessary layers removed here, and the individual looks good, so it is easy to post it for later use ).
First, let's take a look at the effect:

You can change the image and font of your project in the future. The main frame does not need to be changed. Haha,
First, layout the xml file main. xml in layout:Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<TabHost xmlns: android = "http://schemas.android.com/apk/res/android"
Android: id = "@ android: id/tabhost"
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent">
<LinearLayout
Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: background = "@ color/bg_gray"
Android: orientation = "vertical">
<FrameLayout
Android: id = "@ android: id/tabcontent"
Android: layout_width = "fill_parent"
Android: layout_height = "0.0dip"
Android: layout_weight = "1.0"/>
<TabWidget
Android: id = "@ android: id/tabs"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: layout_weight = "0.0"
Android: visibility = "gone"/>
<FrameLayout
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content">
<RadioGroup
Android: id = "@ + id/main_tab_group"
Android: layout_width = "fill_parent"
Android: layout_height = "wrap_content"
Android: layout_gravity = "bottom"
Android: background = "@ drawable/bottom1"
Android: gravity = "bottom"
Android: orientation = "horizontal"
>
<RadioButton
Android: id = "@ + id/main_tab_addExam"
Style = "@ style/MMTabButton"
Android: layout_weight = "1.0"
Android: drawableTop = "@ drawable/bg_checkbox_icon_menu_0"
Android: text = "add exam"/>
<RadioButton
Android: id = "@ + id/main_tab_myExam"
Style = "@ style/MMTabButton"
Android: layout_weight = "1.0"
Android: checked = "true"
Android: drawableTop = "@ drawable/bg_checkbox_icon_menu_1"
Android: text = "my exams"/>
<RadioButton
Android: id = "@ + id/main_tab_message"
Style = "@ style/MMTabButton"
Android: layout_weight = "1.0"
Android: drawableTop = "@ drawable/bg_checkbox_icon_menu_2"
Android: text = "My notifications"/>
<RadioButton
Android: id = "@ + id/main_tab_settings"
Style = "@ style/MMTabButton"
Android: layout_weight = "1.0"
Android: drawableTop = "@ drawable/bg_checkbox_icon_menu_3"
Android: text = "Settings"/>
</RadioGroup>
<TextView
Android: id = "@ + id/main_tab_new_message"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: layout_gravity = "center_horizontal | top"
Android: layout_marginLeft = "60dip"
Android: layout_marginTop = "1dip"
Android: background = "@ drawable/tips"
Android: gravity = "center"
Android: text = "1"
Android: textColor = "# ffffff"
Android: textSize = "10sp"
Android: visibility = "gone"/>
</FrameLayout>
</LinearLayout>
</TabHost>

A FrameLayout is added to the RadioGroup to display the number of messages by using TextView. The center is centered at the left of 60 dip. Maybe you will ask if direct writing can support multi-resolution, I tried it on the 320*480 mobile phone, because dip is device-independent and supports multi-resolution, I cannot guarantee the resolution of the 1280*800 tablet. Haha!
Next is the style layout:Copy codeThe Code is as follows: <style name = "MMTabButton">
<Item name = "android: textSize"> 12.0dip </item>
<Item name = "android: gravity"> center_horizontal </item>
<Item name = "android: background"> @ drawable/bg_checkbox_menus </item>
<Item name = "android: layout_width"> fill_parent </item>
<Item name = "android: layout_height"> wrap_content </item>
<Item name = "android: button"> @ null </item>
<Item name = "android: textColor"> @ color/white </item>
<Item name = "android: layout_weight"> 1.0 </item>
<Item name = "android: paddingBottom"> 2.0dip </item>
<Item name = "android: paddingTop"> 2.0dip </item>
</Style>

In drawable, bg_checkbox_menus.xmlCopy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<Selector xmlns: android = "http://schemas.android.com/apk/res/android">
<Item
Android: state_checked = "false"
Android: drawable = "@ drawable/mm_trans"/>
<Item
Android: state_checked = "true"
Android: drawable = "@ drawable/home_btn_bg"/>
</Selector>

The other four are all in the same way, and the pictures are highlighted, so they are different.
Finally, let's look at the MainActivity class:Copy codeThe Code is as follows: package cn.com. karl. test;
Import android. app. TabActivity;
Import android. content. Intent;
Import android. OS. Bundle;
Import android. view. View;
Import android. view. Window;
Import android. widget. RadioGroup;
Import android. widget. RadioGroup. OnCheckedChangeListener;
Import android. widget. TabHost;
Import android. widget. TextView;
Public class MainActivity extends TabActivity {
/** Called when the activity is first created .*/
Private TabHost tabHost;
Private TextView main_tab_new_message;

@ Override
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
This. requestWindowFeature (Window. FEATURE_NO_TITLE );
SetContentView (R. layout. main );
Main_tab_new_message = (TextView) findViewById (R. id. main_tab_new_message );
Main_tab_new_message.setVisibility (View. VISIBLE );
Main_tab_new_message.setText ("10 ");
TabHost = this. getTabHost ();
TabHost. TabSpec spec;
Intent intent;
Intent = new Intent (). setClass (this, AddExamActivity. class );
Spec = tabHost. newTabSpec ("add exam"). setIndicator ("add exam"). setContent (intent );
TabHost. addTab (spec );
Intent = new Intent (). setClass (this, MyExamActivity. class );
Spec = tabHost. newTabSpec ("My exams"). setIndicator ("My exams"). setContent (intent );
TabHost. addTab (spec );
Intent = new Intent (). setClass (this, MyMessageActivity. class );
Spec = tabHost. newTabSpec ("My notifications"). setIndicator ("My notifications"). setContent (intent );
TabHost. addTab (spec );
Intent = new Intent (). setClass (this, SettingActivity. class );
Spec = tabHost. newTabSpec ("set"). setIndicator ("set"). setContent (intent );
TabHost. addTab (spec );
TabHost. setCurrentTab (1 );
RadioGroup radioGroup = (RadioGroup) this. findViewById (R. id. main_tab_group );
RadioGroup. setOnCheckedChangeListener (new OnCheckedChangeListener (){

@ Override
Public void onCheckedChanged (RadioGroup group, int checkedId ){
// TODO Auto-generated method stub
Switch (checkedId ){
Case R. id. main_tab_addExam: // Add exam
TabHost. setCurrentTabByTag ("add exam ");
Break;
Case R. id. main_tab_myExam: // my exam
TabHost. setCurrentTabByTag ("My exams ");
Break;
Case R. id. main_tab_message: // my notifications
TabHost. setCurrentTabByTag ("My notifications ");
Break;
Case R. id. main_tab_settings: // set
TabHost. setCurrentTabByTag ("set ");
Break;
Default:
// TabHost. setCurrentTabByTag ("My exams ");
Break;
}
}
});
}
}

This is done mainly by using tabhost. The four interfaces of tabhost with cache mechanism are cached in the memory, which has both advantages and disadvantages, the advantage is that you do not need to reload the interface during the switchover. The disadvantage is that the four interfaces of the cache consume more memory. If you only want to cache one interface, I will use ActivityGroup to implement the sliding bar on the top in the next article. Just like the sliding bar on the top of Netease news, I believe that only one interface is cached and loaded from the database during the switchover, therefore, the second sliding load is faster.