Android底部菜单栏（tabhost实现）

最新推荐文章于 2020-08-31 10:49:29 发布
最新推荐文章于 2020-08-31 10:49:29 发布
阅读量776 收藏
点赞数
分类专栏： Android UI 文章标签： tabhost 底部菜单 android自定义底部菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q908555281/article/details/48439571
版权

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

     }

}



townkoim
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android之实现底部TabHost
小小程序员 欢迎光临！专注于移动互联网！
09-16 4670
先说布局文件，如下：利用android:layout_alignParentBottom="true" 实现底部显示 <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:i
android studio底部导航栏 使用Tabhost布局方法实现底部导航栏，此方法无需引入其他东西
weixin_65168955的博客
09-14 2037
使用activity.xml的布局格式，虽然使用了FrameLayout。但，是必要的。因为切换还是以页面形式展现，虽然麻烦，但写完不会像frameLayout那样在之后的编码上对初学者不友好
AndroidStudio开发当中如何实现底部导航切换效果
xh_jiayou的专栏
08-31 1228
Android导航栏非常常见，很多APP项目常见的界面风格。 之前采用的方式都是TabHost、LinearLayout中使用button、RadioGroup来实现这种导航栏的效果。 随着Material Design的发展，也逐渐推出了一些自己的设计，比如说BottomNavigationView 我们新建一个项目，在选择activity模板时候选择Bottom Navigation Activity 直接就会生成一个简单的底部导航栏 我们会发现build.gradle文...
android - 制作底部选项卡TabHost
09-13 1917
最重要的就是FrameLayout的属性android:layout_weight="1" ，只要稍微布局即可、其他的和顶部TabHost一样 <TabHost xmlns:android="http://schemas.android.com/apk/res/android
android TabHost制作底部导航栏
月光秦城
10-03 928
我做的例子是底部导航栏，底部四个导航，点击不同的导航切换不同的画面。如图所示： 首先主页面是一个且它的id为@android:id/tabhost,里面必须包含一个且id为@android:id/tabcontent，然后布局里有个且id为@android:id/tabs。具体如下：     android:id="@android:id/tabhost"     android
【Android基础篇】TabHost实现底部导航栏
zgljl2012的专栏
04-08 3751
在App应用中，导航栏往往是用于解决功能分块的最佳控件，而底部导航栏更是导航栏中最常用的，因为它位于屏幕底部，用户操作起来会很方便。下面介绍一下使用Android控件TabHost实现底部导航栏的方法。TabHost可以在控件库里直接拖到页面上，非常方便，但拖出来的是顶部导航栏，如下图所示： 到这里就可以开始实现底部导航栏了，我们首先转到它的XML布局代码里，然后修改成下面这样：<FrameLay
【Android】底部标签页，Tabhost置底
编程记录，亲测有效
07-19 2934
在《【Android】标签页、计时器、单选按钮、复选按钮》（点击打开链接）我曾经介绍过安卓标签页的使用方式，但是，将标签页放到app的底部似乎更适合现在app所流行的风格，如下图所示。其实将这个Tabhost置底也很简单。 和原来的Tabhost一样，如果你要使用安卓的标签页，那么activity_main.xml这个主布局是定死了，其余的，你要新建多少个字标签页，就需要有多有个xml，
Android开发：TabHost嵌套Activity，实现底部菜单栏
小五博客园
05-25 3359
项目需要，现在需要把主页换成GridView和底部菜单栏组合的形式，但是这和当初设计的有点出入，代码全部使用Activity写的。现在有很多好用的底部菜单栏的控件，但是基本都是嵌套Fragment。后来想到用TabHost嵌套Activity来实现底部菜单栏的功能。接下来，我们开始吧~ 效果图： 新建Home页，取名HomeActivity，在这里来组合TabHost和Activit...
Android 开源组件PagerBottomTabStrip 快速构建底部导航栏(Android studio)
08-23
博客地址：http://blog.csdn.net/tyzlmjj/article/details/47904609
android 底部菜单栏 TabHost
11-21
积攒的资源，TabHost实现底部菜单栏的功能
使用TabHost实现底部菜单栏
06-29
使用TabHost实现底部菜单栏，很好用的啊，欢迎下载啊，欢迎指导批评，若是不好的话。个人亲自测试可以的啊。
Android底部导航菜单栏TabHost
09-15
android底部导航栏，类似微信,QQ和当前主流APP的菜单风格，无侧滑，初学者适用。 。
android底部菜单栏实现原理与代码
01-05
底部菜单栏很重要，我看了一下很多应用软件都是用了底部菜单栏做。我这里使用了tabhost做了一种通用的（就是可以像微信那样显示未读消息数量的，虽然之前也做过但是layout下的xml写的太臃肿，这里去掉了很多不必要...
ANDROID的底部导航条的制作(非滑动)
热门推荐
03-09 1万+
原文链接:http://www.jb51.net/article/32969.htm 底部菜单栏很重要，我看了一下很多应用软件都是用了底部菜单栏做。我这里使用了tabhost做了一种通用的（就是可以像微信那样显示未读消息数量的，虽然之前也做过但是layout下的xml写的太臃肿，这里去掉了很多不必要的层，个人看起来还是不错的，所以贴出来方便以后使用）。  先看一下做出来之后的效果：
Android学习笔记：TabHost 和 FragmentTabHost(转)
weixin_30408309的博客
04-02 203
Android学习笔记：TabHost 和 FragmentTabHost(转) 转自：http://www.cnblogs.com/asion/p/3339313.html 作者：Asion Tang 出处：http://asiontang.cnblogs.com TabHost 命名空间： ...
ViewPager嵌套Fragment来回滑动重新加载数据
Townkoim的专栏
09-14 6550
在ViewPager中嵌套使用Fragment，他会预加载第二页的数据，但是滑动到第三页的Fragment，前面的Fragment的数据又被清空了，又要重新加载数据，下面提供两个解决办法： 第一种解决方案： 继承FragmentPagerAdapter 重写@Override        public void destroyItem (View container, int posi
tabhost实现左侧选项卡
最新发布
06-08
TabHost 是 Android 中常用的一个布局控件，可以用于实现选项卡的效果。要实现左侧选项卡，可以通过以下步骤： 1. 在布局文件中，使用 TabHost 控件，并设置其高度和宽度为 match_parent。 2. 在 TabHost 中添加一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值