Demo 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:

 

<? 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 = ""/> </radiogroup> <textview Android: Id = "@ + ID/main_tab_new_message" Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_gravity = "Weight | 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:

 <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.xml

<?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:

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; 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; 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) This. findviewbyid (R. id. main_tab_group); radiogroup. setoncheckedchangelistener (New oncheckedchangelistener () {@ overridepublic void oncheckedchanged (radiogroup group, int checkedid) {// todo auto-generated method stubswitch (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 notification 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.

Finally, if you want to download the code as needed, I will lose some code that has been stored locally for a long time. [Rarfile] demo of the menu bar at the bottom of Android