Android底部菜单栏(tabhost实现)

来源:互联网 发布:可以发送数据的仪器 编辑:程序博客网 时间:2024/05/21 21:46

本文是用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 > 


再来看看主代码:其中图片的名字以_n结尾的表示是未选中状态,以_c结尾的表示是选中的图片

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;     }}



0 0
原创粉丝点击