码迷，mamicode.com
首页 > 移动开发 > 详细

Android应用底部导航栏(选项卡)实例

时间：2014-08-29 12:55:17      阅读：425      评论：0      收藏：0      [点我收藏+]

标签：android   style   blog   http   color   os   使用   java   io   

 

现在很多android的应用都采用底部导航栏的功能，这样可以使得用户在使用过程中随意切换不同的页面，现在我采用TabHost组件来自定义一个底部的导航栏的功能。

我们先看下该demo实例的框架图：

bubuko.com,布布扣

其中各个类的作用以及资源文件就不详细解释了，还有资源图片(在该Demo中借用了其它应用程序的资源图片)也不提供了，大家可以自行更换自己需要的资源图片。直接上各个布局文件或各个类的代码：

[1]  res/layout目录下的 maintabs.xml 源码：

[html] view plaincopy
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"  
  3.   xmlns:android="http://schemas.android.com/apk/res/android">  
  4.     <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">  
  5.         <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="0.0dip" android:layout_weight="1.0" />  
  6.         <TabWidget android:id="@android:id/tabs" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="0.0" />  
  7.             <RadioGroup   
  8.                 android:gravity="center_vertical" android:layout_gravity="bottom" android:orientation="horizontal" android:id="@id/main_radio" android:background="@drawable/maintab_toolbar_bg"   
  9.                 android:layout_width="fill_parent" android:layout_height="wrap_content">  
  10.                 <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" />  
  11.                 <RadioButton  android:id="@id/radio_button1" android:layout_marginTop="2.0dip" android:text="@string/main_news" android:drawableTop="@drawable/icon_2_n" style="@style/main_tab_bottom" />  
  12.                 <RadioButton  android:id="@id/radio_button2" android:layout_marginTop="2.0dip" android:text="@string/main_manage_date" android:drawableTop="@drawable/icon_3_n" style="@style/main_tab_bottom" />  
  13.                 <RadioButton  android:id="@id/radio_button3" android:layout_marginTop="2.0dip" android:text="@string/main_friends" android:drawableTop="@drawable/icon_4_n" style="@style/main_tab_bottom" />  
  14.                 <RadioButton  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" />  
  15.             </RadioGroup>  
  16.     </LinearLayout>  
  17. </TabHost>  

[2] res/drawable 下的 home_btn_bg.xml 源码：

[html] view plaincopy
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <selector  
  3.   xmlns:android="http://schemas.android.com/apk/res/android">  
  4.     <item android:state_focused="true" android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/home_btn_bg_s" />  
  5.     <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/home_btn_bg_s" />  
  6.     <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/home_btn_bg_d" />  
  7.     <item android:drawable="@drawable/transparent" />  
  8. </selector>  

[3] res/values 下的源码：

dimens.xml源码

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.   
  4.     <dimen name="bottom_tab_font_size">10.0sp</dimen>  
  5.     <dimen name="bottom_tab_padding_up">5.0dip</dimen>  
  6.     <dimen name="bottom_tab_padding_drawable">2.0dip</dimen>  
  7.     <dimen name="switch_logo_bottom_padding">30.0sp</dimen>  
  8.     <dimen name="widget_height">100.0dip</dimen>  
  9.     <dimen name="sta_height">48.0dip</dimen>  
  10.     <dimen name="large_padding_length">20.0dip</dimen>  
  11.     <dimen name="widget_write_margin_top">19.0dip</dimen>  
  12.     <dimen name="widget_write_margin_left">10.0dip</dimen>  
  13.     <dimen name="widget_content_margin_top">20.0dip</dimen>  
  14.     <dimen name="widget_content_margin_left">10.0dip</dimen>  
  15.     <dimen name="widget_logo_size">35.0dip</dimen>  
  16.     <dimen name="title_height">74.0dip</dimen>  
  17.     <dimen name="new_blog_size">70.0dip</dimen>  
  18.     <dimen name="emotion_item_view_height">13.299988dip</dimen>  
  19.     <dimen name="splash_test_top_margin_top">20.0dip</dimen>  
  20.     <dimen name="splash_test_center_margin_right">0.0dip</dimen>  
  21.     <dimen name="title_text_size">20.0sp</dimen>  
  22.     <dimen name="normal_padding_length">10.0dip</dimen>  
  23.     <dimen name="no_result_padding_length">50.0dip</dimen>  
  24.   
  25. </resources>  


drawables.xml源码：

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.   
  4.     <item type="drawable" name="ltgray">#fff4f4f4</item>  
  5.     <item type="drawable" name="ltyellow">#fffff4db</item>  
  6.     <item type="drawable" name="black">#ff000000</item>  
  7.     <item type="drawable" name="transparent">#00000000</item>  
  8.     <item type="drawable" name="widget_edit_block_bg_normal">@android:color/transparent</item>  
  9.     <item type="drawable" name="transparent_background">#99000000</item>  
  10.     <item type="drawable" name="list_background">#fff4f4f4</item>  
  11.     <item type="drawable" name="namcard_picker_bkg_normal">#ff272727</item>  
  12.     <item type="drawable" name="namcard_picker_bkg_hover">#ff333333</item>  
  13.   
  14. </resources>  


ids.xml源码：

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.   
  4.     <item type="id" name="main_radio">false</item>  
  5.     <item type="id" name="radio_button0">false</item>  
  6.     <item type="id" name="radio_button1">false</item>  
  7.     <item type="id" name="radio_button2">false</item>  
  8.     <item type="id" name="radio_button3">false</item>  
  9.     <item type="id" name="radio_button4">false</item>  
  10.   
  11. </resources>  


strings.xml源码：

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.     <string name="hello">Hello World, MainTabActivity!</string>  
  4.     <string name="app_name">TabDemo</string>  
  5.     <string name="main_news">消息</string>  
  6.     <string name="main_home">首页</string>  
  7.     <string name="more">更多</string>  
  8.     <string name="main_manage_date">时间</string>  
  9.     <string name="main_friends">好友</string>  
  10. </resources>  


styles.xml源码：

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.   
  4.      <style name="main_tab_bottom">  
  5.         <item name="android:textSize">@dimen/bottom_tab_font_size</item>  
  6.         <item name="android:textColor">#ffffffff</item>  
  7.         <item name="android:ellipsize">marquee</item>  
  8.         <item name="android:gravity">center_horizontal</item>  
  9.         <item name="android:background">@drawable/home_btn_bg</item>  
  10.         <item name="android:paddingTop">@dimen/bottom_tab_padding_up</item>  
  11.         <item name="android:paddingBottom">2.0dip</item>  
  12.         <item name="android:layout_width">fill_parent</item>  
  13.         <item name="android:layout_height">wrap_content</item>  
  14.         <item name="android:layout_marginBottom">2.0dip</item>  
  15.         <item name="android:button">@null</item>  
  16.         <item name="android:singleLine">true</item>  
  17.         <item name="android:drawablePadding">@dimen/bottom_tab_padding_drawable</item>  
  18.         <item name="android:layout_weight">1.0</item>  
  19.     </style>  
  20.   
  21. </resources>  


[4] src/com.andyidea.tabdemo包下面各个UI界面类源码：

MainTabActivity.java源码：

[html] view plaincopy
  1. package com.andyidea.tabdemo;  
  2.   
  3. import android.app.TabActivity;  
  4. import android.content.Intent;  
  5. import android.os.Bundle;  
  6. import android.view.Window;  
  7. import android.widget.CompoundButton;  
  8. import android.widget.RadioButton;  
  9. import android.widget.CompoundButton.OnCheckedChangeListener;  
  10. import android.widget.TabHost;  
  11.   
  12. public class MainTabActivity extends TabActivity implements OnCheckedChangeListener{  
  13.       
  14.     private TabHost mTabHost;  
  15.     private Intent mAIntent;  
  16.     private Intent mBIntent;  
  17.     private Intent mCIntent;  
  18.     private Intent mDIntent;  
  19.     private Intent mEIntent;  
  20.       
  21.     /** Called when the activity is first created. */  
  22.     @Override  
  23.     public void onCreate(Bundle savedInstanceState) {  
  24.         super.onCreate(savedInstanceState);  
  25.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  26.         setContentView(R.layout.maintabs);  
  27.           
  28.         this.mAIntent = new Intent(this,AActivity.class);  
  29.         this.mBIntent = new Intent(this,BActivity.class);  
  30.         this.mCIntent = new Intent(this,CActivity.class);  
  31.         this.mDIntent = new Intent(this,DActivity.class);  
  32.         this.mEIntent = new Intent(this,EActivity.class);  
  33.           
  34.         ((RadioButton) findViewById(R.id.radio_button0))  
  35.         .setOnCheckedChangeListener(this);  
  36.         ((RadioButton) findViewById(R.id.radio_button1))  
  37.         .setOnCheckedChangeListener(this);  
  38.         ((RadioButton) findViewById(R.id.radio_button2))  
  39.         .setOnCheckedChangeListener(this);  
  40.         ((RadioButton) findViewById(R.id.radio_button3))  
  41.         .setOnCheckedChangeListener(this);  
  42.         ((RadioButton) findViewById(R.id.radio_button4))  
  43.         .setOnCheckedChangeListener(this);  
  44.           
  45.         setupIntent();  
  46.     }  
  47.   
  48.     @Override  
  49.     public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {  
  50.         if(isChecked){  
  51.             switch (buttonView.getId()) {  
  52.             case R.id.radio_button0:  
  53.                 this.mTabHost.setCurrentTabByTag("A_TAB");  
  54.                 break;  
  55.             case R.id.radio_button1:  
  56.                 this.mTabHost.setCurrentTabByTag("B_TAB");  
  57.                 break;  
  58.             case R.id.radio_button2:  
  59.                 this.mTabHost.setCurrentTabByTag("C_TAB");  
  60.                 break;  
  61.             case R.id.radio_button3:  
  62.                 this.mTabHost.setCurrentTabByTag("D_TAB");  
  63.                 break;  
  64.             case R.id.radio_button4:  
  65.                 this.mTabHost.setCurrentTabByTag("MORE_TAB");  
  66.                 break;  
  67.             }  
  68.         }  
  69.           
  70.     }  
  71.       
  72.     private void setupIntent() {  
  73.         this.mTabHost = getTabHost();  
  74.         TabHost localTabHost = this.mTabHost;  
  75.   
  76.         localTabHost.addTab(buildTabSpec("A_TAB", R.string.main_home,  
  77.                 R.drawable.icon_1_n, this.mAIntent));  
  78.   
  79.         localTabHost.addTab(buildTabSpec("B_TAB", R.string.main_news,  
  80.                 R.drawable.icon_2_n, this.mBIntent));  
  81.   
  82.         localTabHost.addTab(buildTabSpec("C_TAB",  
  83.                 R.string.main_manage_date, R.drawable.icon_3_n,  
  84.                 this.mCIntent));  
  85.   
  86.         localTabHost.addTab(buildTabSpec("D_TAB", R.string.main_friends,  
  87.                 R.drawable.icon_4_n, this.mDIntent));  
  88.   
  89.         localTabHost.addTab(buildTabSpec("MORE_TAB", R.string.more,  
  90.                 R.drawable.icon_5_n, this.mEIntent));  
  91.   
  92.     }  
  93.       
  94.     private TabHost.TabSpec buildTabSpec(String tag, int resLabel, int resIcon,  
  95.             final Intent content) {  
  96.         return this.mTabHost.newTabSpec(tag).setIndicator(getString(resLabel),  
  97.                 getResources().getDrawable(resIcon)).setContent(content);  
  98.     }  
  99. }  

其中 AActivity.java 与 BActivity.java ，CActivity.java ，DActivity.java ，EActivity.java 中的源码都一样，只是用来表示不同的界面展示，故这里只列出 AActivity.java的源码：

[html] view plaincopy
  1. package com.andyidea.tabdemo;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.view.Gravity;  
  6. import android.widget.TextView;  
  7.   
  8. public class AActivity extends Activity{  
  9.       
  10.     @Override  
  11.     public void onCreate(Bundle savedInstanceState) {  
  12.         super.onCreate(savedInstanceState);  
  13.           
  14.         TextView tv = new TextView(this);  
  15.         tv.setText("This is A Activity!");  
  16.         tv.setGravity(Gravity.CENTER);  
  17.         setContentView(tv);  
  18.     }  
  19.   
  20. }  

最后，大家别忘了在 AndroidManifest.xml 文件中注册各个 Activity 组件哦。好了，现在我们看下我们程序运行的效果图：


bubuko.com,布布扣

到此就实现了一个比较流行的底部导航栏的功能了，转载请注明出处，谢谢大家！

原文： Android应用底部导航栏(选项卡)实例

Android应用底部导航栏(选项卡)实例

标签：android   style   blog   http   color   os   使用   java   io   

原文地址：http://www.cnblogs.com/zhangs1986/p/3944632.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！