android底部导航栏

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

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

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

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

<?xmlversion="1.0"encoding="UTF-8"?>
<TabHostandroid:id="@android:id/tabhost"android:layout_width="fill_parent"android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayoutandroid:orientation="vertical"android:layout_width="fill_parent"android:layout_height="fill_parent">
<FrameLayoutandroid:id="@android:id/tabcontent"android:layout_width="fill_parent"android:layout_height="0.0dip"android:layout_weight="1.0"/>
<TabWidgetandroid: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"android:id="@id/main_radio"android:background="@drawable/maintab_toolbar_bg"
android:layout_width="fill_parent"android:layout_height="wrap_content">
<RadioButtonandroid: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"/>
<RadioButtonandroid: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"/>
<RadioButtonandroid: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"/>
<RadioButtonandroid: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"/>
<RadioButtonandroid: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 下的 home_btn_bg.xml 源码：

<?xmlversion="1.0"encoding="UTF-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<itemandroid:state_focused="true"android:state_enabled="true"android:state_pressed="false"android:drawable="@drawable/home_btn_bg_s"/>
<itemandroid:state_enabled="true"android:state_pressed="true"android:drawable="@drawable/home_btn_bg_s"/>
<itemandroid:state_enabled="true"android:state_checked="true"android:drawable="@drawable/home_btn_bg_d"/>
<itemandroid:drawable="@drawable/transparent"/>
</selector>

[3] res/values 下的源码：

dimens.xml源码

<?xmlversion="1.0"encoding="utf-8"?>
<resources>

<dimenname="bottom_tab_font_size">10.0sp</dimen>
<dimenname="bottom_tab_padding_up">5.0dip</dimen>
<dimenname="bottom_tab_padding_drawable">2.0dip</dimen>
<dimenname="switch_logo_bottom_padding">30.0sp</dimen>
<dimenname="widget_height">100.0dip</dimen>
<dimenname="sta_height">48.0dip</dimen>
<dimenname="large_padding_length">20.0dip</dimen>
<dimenname="widget_write_margin_top">19.0dip</dimen>
<dimenname="widget_write_margin_left">10.0dip</dimen>
<dimenname="widget_content_margin_top">20.0dip</dimen>
<dimenname="widget_content_margin_left">10.0dip</dimen>
<dimenname="widget_logo_size">35.0dip</dimen>
<dimenname="title_height">74.0dip</dimen>
<dimenname="new_blog_size">70.0dip</dimen>
<dimenname="emotion_item_view_height">13.299988dip</dimen>
<dimenname="splash_test_top_margin_top">20.0dip</dimen>
<dimenname="splash_test_center_margin_right">0.0dip</dimen>
<dimenname="title_text_size">20.0sp</dimen>
<dimenname="normal_padding_length">10.0dip</dimen>
<dimenname="no_result_padding_length">50.0dip</dimen>

</resources>

drawables.xml源码：

<?xmlversion="1.0"encoding="utf-8"?>
<resources>

<itemtype="drawable"name="ltgray">#fff4f4f4</item>
<itemtype="drawable"name="ltyellow">#fffff4db</item>
<itemtype="drawable"name="black">#ff000000</item>
<itemtype="drawable"name="transparent">#00000000</item>
<itemtype="drawable"name="widget_edit_block_bg_normal">@android:color/transparent</item>
<itemtype="drawable"name="transparent_background">#99000000</item>
<itemtype="drawable"name="list_background">#fff4f4f4</item>
<itemtype="drawable"name="namcard_picker_bkg_normal">#ff272727</item>
<itemtype="drawable"name="namcard_picker_bkg_hover">#ff333333</item>

</resources>

ids.xml源码：

<?xmlversion="1.0"encoding="utf-8"?>
<resources>

<itemtype="id"name="main_radio">false</item>
<itemtype="id"name="radio_button0">false</item>
<itemtype="id"name="radio_button1">false</item>
<itemtype="id"name="radio_button2">false</item>
<itemtype="id"name="radio_button3">false</item>
<itemtype="id"name="radio_button4">false</item>

</resources>

strings.xml源码：

<?xmlversion="1.0"encoding="utf-8"?>
<resources>
<stringname="hello">HelloWorld,MainTabActivity!</string>
<stringname="app_name">TabDemo</string>
<stringname="main_news">消息</string>
<stringname="main_home">首页</string>
<stringname="more">更多</string>
<stringname="main_manage_date">时间</string>
<stringname="main_friends">好友</string>
</resources>

styles.xml源码：

<?xmlversion="1.0"encoding="utf-8"?>
<resources>

<stylename="main_tab_bottom">
<itemname="android:textSize">@dimen/bottom_tab_font_size</item>
<itemname="android:textColor">#ffffffff</item>
<itemname="android:ellipsize">marquee</item>
<itemname="android:gravity">center_horizontal</item>
<itemname="android:background">@drawable/home_btn_bg</item>
<itemname="android:paddingTop">@dimen/bottom_tab_padding_up</item>
<itemname="android:paddingBottom">2.0dip</item>
<itemname="android:layout_width">fill_parent</item>
<itemname="android:layout_height">wrap_content</item>
<itemname="android:layout_marginBottom">2.0dip</item>
<itemname="android:button">@null</item>
<itemname="android:singleLine">true</item>
<itemname="android:drawablePadding">@dimen/bottom_tab_padding_drawable</item>
<itemname="android:layout_weight">1.0</item>
</style>

</resources>

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

MainTabActivity.java源码：

packagecom.andyidea.tabdemo;

importandroid.app.TabActivity;
importandroid.content.Intent;
importandroid.os.Bundle;
importandroid.view.Window;
importandroid.widget.CompoundButton;
importandroid.widget.RadioButton;
importandroid.widget.CompoundButton.OnCheckedChangeListener;
importandroid.widget.TabHost;

publicclassMainTabActivityextendsTabActivityimplementsOnCheckedChangeListener{

privateTabHostmTabHost;
privateIntentmAIntent;
privateIntentmBIntent;
privateIntentmCIntent;
privateIntentmDIntent;
privateIntentmEIntent;

/**Calledwhentheactivityisfirstcreated.*/
@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.maintabs);

this.mAIntent=newIntent(this,AActivity.class);
this.mBIntent=newIntent(this,BActivity.class);
this.mCIntent=newIntent(this,CActivity.class);
this.mDIntent=newIntent(this,DActivity.class);
this.mEIntent=newIntent(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
publicvoidonCheckedChanged(CompoundButtonbuttonView,booleanisChecked){
if(isChecked){
switch(buttonView.getId()){
caseR.id.radio_button0:
this.mTabHost.setCurrentTabByTag("A_TAB");
break;
caseR.id.radio_button1:
this.mTabHost.setCurrentTabByTag("B_TAB");
break;
caseR.id.radio_button2:
this.mTabHost.setCurrentTabByTag("C_TAB");
break;
caseR.id.radio_button3:
this.mTabHost.setCurrentTabByTag("D_TAB");
break;
caseR.id.radio_button4:
this.mTabHost.setCurrentTabByTag("MORE_TAB");
break;
}
}

}

privatevoidsetupIntent(){
this.mTabHost=getTabHost();
TabHostlocalTabHost=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));

}

privateTabHost.TabSpecbuildTabSpec(Stringtag,intresLabel,intresIcon,
finalIntentcontent){
returnthis.mTabHost.newTabSpec(tag).setIndicator(getString(resLabel),
getResources().getDrawable(resIcon)).setContent(content);
}
}

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

packagecom.andyidea.tabdemo;

importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.view.Gravity;
importandroid.widget.TextView;

publicclassAActivityextendsActivity{

@Override
publicvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);

TextViewtv=newTextView(this);
tv.setText("ThisisAActivity!");
tv.setGravity(Gravity.CENTER);
setContentView(tv);
}

}

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

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

由于需要该实例源码的童鞋比较多，我还是把源码放到资源中供大家下载：http://download.csdn.net/detail/cjjky/4236055