Android implements the bottom navigation bar feature (tab) _android

Source: Internet
Author: User

Many Android apps now use the bottom navigation bar, which allows users to switch to different pages at will, and now I use the Tabhost component to customize the function of a bottom navigation bar.
Let's take a look at the demo instance's frame chart:

The role of each of these classes and resource files are not explained in detail, and the resource picture (borrowed from other applications in the demo resource picture) is not available, you can change their own needs of the resource picture. Code directly on each layout file or individual class:
1, Res/layout directory under the Maintabs.xml Source:

<?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 "> <linearlayout android:orientation= "vertical" android:layout_width= fill_parent "android:layout_height=" Fill_ Parent "> <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:visibility= " Gone "android:layout_width=" Fill_parent "android:layout_height=" wrap_content "android:layout_weight=" 0.0 "/>" ; Radiogroup android:gravity= "center_vertical" android:layout_gravity= "bottom" android:orientation= "Horizontal" an Droid:id= "@id/main_radio" android:background= "@drawable/maintab_toolbar_bg" android:layout_width= "Fill_parent" a ndroid:layout_height= "Wrap_content" > <RadioButton android:id= "@id/radio_button0" android:layout_margintop= "2.0dip" android:text= "@string/main_home" android:drawabletop= "@drawable/icon_1_n" style= "@style/main_tab_bottom"/> <radiobutton android:id= "@id/rad Io_button1 "android:layout_margintop=" 2.0dip "android:text=" @string/main_news "android:drawabletop=" @drawable Icon_2_n "style=" @style/main_tab_bottom "/> <radiobutton android:id=" @id/radio_button2 "Android:layout_marg intop= "2.0dip" android:text= "@string/main_manage_date" android:drawabletop= "@drawable/icon_3_n" style= "@style Main_tab_bottom "/> <radiobutton android:id=" @id/radio_button3 "android:layout_margintop=" 2.0dip "android:t ext= "@string/main_friends" android:drawabletop= "@drawable/icon_4_n" style= "@style/main_tab_bottom"/> <radi Obutton android:id= "@id/radio_button4" android:layout_margintop= "2.0dip" android:text= "@string/more" Android: 
  drawabletop= "@drawable/icon_5_n" style= "@style/main_tab_bottom"/>    </RadioGroup> </LinearLayout> </TabHost>  


2, res/drawable under the Home_btn_bg.xml Source:

<selector 
 xmlns:android= "http://schemas.android.com/apk/res/android" > 
  <item android:state_ Focused= ' true ' android:state_enabled= ' true ' android:state_pressed= ' false ' android:drawable= ' @drawable/HOME_BTN_BG _s "/> 
  <item android:state_enabled=" true "android:state_pressed=" true "android:drawable=" @drawable/home_ btn_bg_s "/> 
  <item android:state_enabled=" true "android:state_checked=" true "android:drawable=" @drawable /home_btn_bg_d "/> 
  <item android:drawable=" @drawable/transparent "/> 
</selector> 

3, res/values under the source code:
Dimens.xml Source:

<?xml version= "1.0" encoding= "Utf-8"?> <resources> <dimen name= "Bottom_tab_font_size" >10.0sp</ dimen> <dimen name= "bottom_tab_padding_up" >5.0dip</dimen> <dimen name= "Bottom_tab_padding_ Drawable ">2.0dip</dimen> <dimen name=" switch_logo_bottom_padding ">30.0sp</dimen> <dimen Name= "Widget_height" >100.0dip</dimen> <dimen name= "sta_height" >48.0dip</dimen> <dimen name = "Large_padding_length" >20.0dip</dimen> <dimen name= "Widget_write_margin_top" >19.0dip</dimen > <dimen name= "widget_write_margin_left" >10.0dip</dimen> <dimen name= "Widget_content_margin_top" >20.0dip</dimen> <dimen name= "Widget_content_margin_left" >10.0dip</dimen> <dimen name= " Widget_logo_size ">35.0dip</dimen> <dimen name=" title_height ">74.0dip</dimen> <dimen name=" New_blog_size ">70.0dip</dimen> <dimen NamE= "Emotion_item_view_height" >13.299988dip</dimen> <dimen name= "Splash_test_top_margin_top" > 20.0dip</dimen> <dimen name= "splash_test_center_margin_right" >0.0dip</dimen> <dimen name= " Title_text_size ">20.0sp</dimen> <dimen name=" Normal_padding_length ">10.0dip</dimen> < 
 Dimen name= "No_result_padding_length" >50.0dip</dimen> </resources>

Drawables.xml Source:

<?xml version= "1.0" encoding= "Utf-8"?> 
<resources> 
 
  <item type= "drawable" name= "Ltgray" ># fff4f4f4</item> 
  <item type= "drawable" name= "Ltyellow" > #fffff4db </item> 
  <item type= " Drawable "Name=" Black "> #ff000000 </item> 
  <item type=" drawable "name=" Transparent "> #00000000 < /item> 
  <item type= "drawable" name= "Widget_edit_block_bg_normal" > @android: Color/transparent</item > 
  <item type= "drawable" name= "Transparent_background" > #99000000 </item> 
  <item type= " Drawable "name=" List_background "> #fff4f4f4 </item> <item type=" drawable "name=" namcard_picker_bkg 
  _normal "> #ff272727 </item> 
  <item type=" drawable "name=" Namcard_picker_bkg_hover "> #ff333333 </item> 
 
</resources> 

Ids.xml Source:

<?xml version= "1.0" encoding= "Utf-8"?> 
<resources> 
 
  <item type= "id" name= "main_radio" > false</item> 
  <item type= "id" name= "radio_button0" >false</item> 
  <item type= "id" name= " Radio_button1 ">false</item> 
  <item type=" id "name=" radio_button2 ">false</item> 
  < Item type= "id" name= "radio_button3" >false</item> 
  <item type= "id" name= "radio_button4" >false< /item> 
 
</resources> 

Strings.xml Source:

<?xml version= "1.0" encoding= "Utf-8"?> 
<resources> 
  <string name= "Hello" >hello world, maintabactivity!</string> 
  <string name= "app_name" >TabDemo</string> 
  <string name= " Main_news "> Message </string> 
  <string name=" Main_home "> Home </string> 
  <string name=" More " > More </string> 
  <string name= "Main_manage_date" > Time </string> 
  <string name= "Main_ Friends "> Friends </string> 
</resources> 

Styles.xml Source:

<?xml version= "1.0" encoding= "Utf-8"?> <resources> <style name= "Main_tab_bottom" > <item Name= "Android:textsize" > @dimen/bottom_tab_font_size</item> <item name= "Android:textcolor" ># ffffffff</item> <item name= "android:ellipsize" >marquee</item> <item name= "android:gravity" & gt;center_horizontal</item> <item name= "Android:background" > @drawable/home_btn_bg</item> <i TEM name= "Android:paddingtop" > @dimen/bottom_tab_padding_up</item> <item name= "Android:paddingbottom" >2.0dip</item> <item name= "android:layout_width" >fill_parent</item> <item name= "Android: Layout_height ">wrap_content</item> <item name=" Android:layout_marginbottom ">2.0dip</item> & Lt;item name= "Android:button" > @null </item> <item name= "Android:singleline" >true</item> < Item Name= "Android:drawablepadding" >@dimen/bottom_tab_padding_drawable</item> <item name= "Android:layout_weight" >1.0</item> </sty 
 Le> </resources>

4, Src/com.andyidea.tabdemo package of the following UI interface class source code:
Maintabactivity.java Source:

Package Com.andyidea.tabdemo; 
Import android.app.TabActivity; 
Import android.content.Intent; 
Import Android.os.Bundle; 
Import Android.view.Window; 
Import Android.widget.CompoundButton; 
Import Android.widget.RadioButton; 
Import Android.widget.CompoundButton.OnCheckedChangeListener; 
 
Import Android.widget.TabHost; 
  public class Maintabactivity extends tabactivity implements oncheckedchangelistener{private Tabhost mtabhost; 
  Private Intent maintent; 
  Private Intent mbintent; 
  Private Intent mcintent; 
  Private Intent mdintent; 
   
  Private Intent meintent; /** called the activity is a. 
    * * @Override public void onCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); 
    Requestwindowfeature (Window.feature_no_title); 
     
    Setcontentview (R.layout.maintabs); 
    This.maintent = new Intent (this,aactivity.class); 
    This.mbintent = new Intent (this,bactivity.class); This.mcintent = new Intent (this,cactivIty.class); 
    This.mdintent = new Intent (this,dactivity.class); 
     
    This.meintent = new Intent (this,eactivity.class); 
    ((RadioButton) Findviewbyid (R.id.radio_button0)). Setoncheckedchangelistener (this); 
    ((RadioButton) Findviewbyid (R.id.radio_button1)). Setoncheckedchangelistener (this); 
    ((RadioButton) Findviewbyid (R.id.radio_button2)). Setoncheckedchangelistener (this); 
    ((RadioButton) Findviewbyid (R.id.radio_button3)). Setoncheckedchangelistener (this); 
     
    ((RadioButton) Findviewbyid (R.id.radio_button4)). Setoncheckedchangelistener (this); 
  Setupintent (); 
      @Override public void OnCheckedChanged (Compoundbutton buttonview, Boolean ischecked) {if (ischecked) { 
        Switch (Buttonview.getid ()) {case R.id.radio_button0:this.mtabhost.setcurrenttabbytag ("A_tab"); 
      Break 
        Case R.id.radio_button1:this.mtabhost.setcurrenttabbytag ("B_tab"); 
      Break Case R.id.raDio_button2:this.mTabHost.setCurrentTabByTag ("C_tab"); 
      Break 
        Case R.id.radio_button3:this.mtabhost.setcurrenttabbytag ("D_tab"); 
      Break 
        Case R.id.radio_button4:this.mtabhost.setcurrenttabbytag ("More_tab"); 
      Break 
    }} private void Setupintent () {this.mtabhost = Gettabhost (); 
 
    Tabhost localtabhost = this.mtabhost; 
 
    Localtabhost.addtab (Buildtabspec ("A_tab", R.string.main_home, R.drawable.icon_1_n, this.maintent)); 
 
    Localtabhost.addtab (Buildtabspec ("B_tab", R.string.main_news, R.drawable.icon_2_n, this.mbintent)); Localtabhost.addtab (Buildtabspec ("C_tab", R.string.main_manage_date, R.drawable.icon_3_n, this.mCIntent) 
 
    ); 
 
    Localtabhost.addtab (Buildtabspec ("D_tab", R.string.main_friends, R.drawable.icon_4_n, this.mDIntent)); Localtabhost.addtab (Buildtabspec) ("More_tab", R.string.more, R.drawable.icon_5_n, this.meintent)); Private Tabhost.tabspec Buildtabspec (String tag, int reslabel, int resicon, final Intent content) {R Eturn This.mTabHost.newTabSpec (tag). Setindicator (GetString (Reslabel), Getresources (). getdrawable (Resicon)). Setco 
  Ntent (content); 
 } 
}

Which Aactivity.java and Bactivity.java, Cactivity.java, Dactivity.java, Eactivity.java in the same source, is used to represent different interface display, so here only list Aactivity.java's source code:

Package Com.andyidea.tabdemo; 
 
Import android.app.Activity; 
Import Android.os.Bundle; 
Import android.view.Gravity; 
Import Android.widget.TextView; 
 
public class Aactivity extends activity{ 
   
  @Override public 
  void OnCreate (Bundle savedinstancestate) { 
    Super.oncreate (savedinstancestate); 
     
    TextView TV = new TextView (this); 
    Tv.settext ("This is A activity!"); 
    Tv.setgravity (gravity.center); 
    Setcontentview (TV); 
  } 
 
} 

Finally, don't forget to register each activity component in the Androidmanifest.xml file. Okay, now let's look at the effect of our program running:

SOURCE Download: Android Implementation of the bottom navigation bar function (tab)

To achieve a more popular function of the bottom navigation bar, I hope this article will help you learn about Android software programming.

Related Article

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.