本文是用Tabhost来做底部菜单栏,如果有需要用ViewPager和Fragment(可滑动菜单栏)的,可参考我的另外一篇博文
先看看MainActivity的布局文件:第二个LinearLayout就是底部菜单栏整个栏目,将他的属性设置为横向的,在这个布局里面。嵌套四个LinearLayout,并设置他们的权重都为1,这样,这四个LinearLayout就等分了父布局的LinearLayout。
<?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"
android:background="#FFFFFF" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="0.0dip"
android:layout_weight="1" >
</FrameLayout>
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:visibility="gone" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/phonetabview_bg"
android:paddingTop="5dip" >
<LinearLayout
android:id="@+id/channel1"
style="@style/main_tab_but_linear" >
<ImageView
android:id="@+id/tab_img1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@drawable/icon_1_c" />
<TextView
android:id="@+id/tab_text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/category_home"
android:textColor="#FF33FF" />
</LinearLayout>
<LinearLayout
android:id="@+id/channel2"
style="@style/main_tab_but_linear" >
<ImageView
android:id="@+id/tab_img2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@drawable/icon_2_n" />
<TextView
android:id="@+id/tab_text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/category_channel" />
</LinearLayout>
<LinearLayout
android:id="@+id/channel3"
style="@style/main_tab_but_linear"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="@+id/tab_img3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@drawable/icon_4_n" />
<TextView
android:id="@+id/tab_text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/category_account" />
</LinearLayout>
<LinearLayout
android:id="@+id/channel4"
style="@style/main_tab_but_linear"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:id="@+id/tab_img4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@drawable/icon_5_n" />
<TextView
android:id="@+id/tab_text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/category_more" />
</LinearLayout>
</LinearLayout>
</LinearLayout >
</TabHost>
<span style="color:#ff0000;">附录的样式:</span>
<style name="main_tab_but_linear">
<item name="android:layout_width" >fill_parent</ item>
<item name="android:layout_height" >fill_parent</ item>
<item name="android:layout_weight" >1</ item>
<item name="android:gravity" >center</ item>
<item name="android:orientation" >vertical</ item>
<item name="android:clickable" >true</ item>
</style >
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;
import com.lb.shop.commom.ColorParser;
import com.lb.shop.commom.Constants;
@SuppressWarnings("deprecation")
public class TabMainActivity extends TabActivity implements OnClickListener {
ImageView tab_img1, tab_img2, tab_img3, tab_img4; <span style="color:#ff0000;">//底部菜单的四张图片</span>
TextView tab_text1, tab_text2, tab_text3, tab_text4;<span style="color:#ff0000;"> //图片下面的文字</span>
Intent mHomeItent, mNearIntent, mMysessageIntent, mMoreIntent; <span style="color:#ff0000;">//四个intent对象,分别用来跳转到不同的Activity</span>
// 默认为第一个tab选项卡
int mCurTabId = R.id.channel1;
private static TabHost tabHost;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
// 去除标题栏
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_tab);
prepareIntent();
setupIntent();
prepareView();
}
private void prepareView() {
tab_img1 = (ImageView) findViewById(R.id.tab_img1);
tab_img2 = (ImageView) findViewById(R.id.tab_img2);
tab_img3 = (ImageView) findViewById(R.id.tab_img3);
tab_img4 = (ImageView) findViewById(R.id.tab_img4);
tab_text1 = (TextView) findViewById(R.id.tab_text1);
tab_text2 = (TextView) findViewById(R.id.tab_text2);
tab_text3 = (TextView) findViewById(R.id.tab_text3);
tab_text4 = (TextView) findViewById(R.id.tab_text4);
findViewById(R.id.channel1).setOnClickListener(TabMainActivity.this);
findViewById(R.id.channel2).setOnClickListener(TabMainActivity.this);
findViewById(R.id.channel3).setOnClickListener(TabMainActivity.this);
findViewById(R.id.channel4).setOnClickListener(TabMainActivity.this);
}
/**
* 设置Intent对象------为方便跳转
* **/
private void prepareIntent() {
mHomeItent = new Intent(TabMainActivity.this, MainActivity.class);
mNearIntent = new Intent(TabMainActivity.this, NearActivity.class);
mMysessageIntent = new Intent(TabMainActivity.this,
MyMessageActivity.class);
mMoreIntent = new Intent(TabMainActivity.this, MoreActivity.class);
}
/**
* 得到tabhost对象,来创建五个tab选项卡(5个页面)
<span style="color:#ff0000;"><strong> * 这里面的<span style="font-family: Arial, Helvetica, sans-serif;">Constants.TAB_TAG_HOME 就是一个字符串,只是我这里用静态static来定义它的</span></strong></span>
* **/
private void setupIntent() {
tabHost = getTabHost();
tabHost.addTab(buildTab(Constants.TAB_TAG_HOME, Constants.TAB_TAG_HOME,
R.drawable.icon_1_n, mHomeItent));
tabHost.addTab(buildTab(Constants.TAB_TAG_NEAR, Constants.TAB_TAG_NEAR,
R.drawable.icon_2_n, mNearIntent));
tabHost.addTab(buildTab(Constants.TAB_TAG_MYMESSAGE,
Constants.TAB_TAG_MYMESSAGE, R.drawable.icon_4_n,
mMysessageIntent));
tabHost.addTab(buildTab(Constants.TAB_TAG_MORE, Constants.TAB_TAG_MORE,
R.drawable.icon_5_n, mMoreIntent));
}
/**
* tab助手方法
* */
@SuppressWarnings("unused")
private TabHost.TabSpec buildTab(String tag, String label, int drawble,
Intent intent) {
TabHost.TabSpec spec = tabHost.newTabSpec(tag)
.setIndicator(label, getResources().getDrawable(drawble))
.setContent(intent);
return spec;
}
public static void setCurrentTabByTag(String tab) {
tabHost.setCurrentTabByTag(tab);
}
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span><span style="color:#ff0000;"><strong>//这里根据点击了不同的按钮,先将所有的图片和字体的颜色设置成为默认值,然后根据点击了哪个按钮,开设置按钮对应的图片的文字颜色</strong></span>
@Override
public void onClick(View v) {
int checkedId = v.getId();
if (mCurTabId == checkedId) {
return;
}
tab_img1.setImageResource(R.drawable.icon_1_n);
tab_img2.setImageResource(R.drawable.icon_2_n);
tab_img3.setImageResource(R.drawable.icon_4_n);
tab_img4.setImageResource(R.drawable.icon_5_n);
tab_text1.setTextColor(ColorParser.COLOR1);
tab_text2.setTextColor(ColorParser.COLOR1);
tab_text3.setTextColor(ColorParser.COLOR1);
tab_text4.setTextColor(ColorParser.COLOR1);
switch (checkedId) {
case R.id.channel1:
tabHost.setCurrentTabByTag(Constants.TAB_TAG_HOME);
tab_img1.setImageResource(R.drawable.icon_1_c);
tab_text1.setTextColor(ColorParser.COLOR2);
break;
case R.id.channel2:
tabHost.setCurrentTabByTag(Constants.TAB_TAG_NEAR);
tab_img2.setImageResource(R.drawable.icon_2_c);
tab_text2.setTextColor(ColorParser.COLOR2);
break;
case R.id.channel3:
tabHost.setCurrentTabByTag(Constants.TAB_TAG_MYMESSAGE);
tab_img3.setImageResource(R.drawable.icon_4_c);
tab_text3.setTextColor(ColorParser.COLOR2);
break;
case R.id.channel4:
tabHost.setCurrentTabByTag(Constants.TAB_TAG_MORE);
tab_img4.setImageResource(R.drawable.icon_5_c);
tab_text4.setTextColor(ColorParser.COLOR2);
break;
default:
break;
}
mCurTabId=checkedId;
}
}