TabActivity自定义底部导航栏

最新推荐文章于 2017-09-30 22:18:51 发布
最新推荐文章于 2017-09-30 22:18:51 发布
阅读量1.7k 收藏 2
点赞数
分类专栏： UI界面 文章标签： 导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yy471101598/article/details/53334893
版权

TabActivity本身继承自ActivityGroup，主要功能是实现多个activity或者view之间的切换和显示，要使用该类必须新建一个类来继承TabActivity，并且该类的xml配置文件中必须包含、、三个视图（View），其中后面两个标签是前面一个标签的子标签，表示tab页的选项卡，相当于菜单页，表示显示内容的区域。

1.自定义底部导航栏布局

由于TabWidget不方便自定义布局，因此在布局中将其隐藏，然后自己写布局代替TabWidget效果。
注意TabHost TabWidget FrameLayout的id必须是固定的，不能自己定义Id

<?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="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="gone" />

        <LinearLayout
            android:id="@+id/bottom"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:background="#ffffff"
            android:orientation="horizontal">

            <LinearLayout
                android:id="@+id/tab_nearby"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_nearby"
                    android:layout_width="25dp"
                    android:layout_height="20dp"
                    android:background="@drawable/nearby_select"
                    android:clickable="false" />

                <TextView
                    android:id="@+id/tv_nearby"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:text="附近"
                    android:textColor="@color/text30"
                    android:textSize="12sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab_message"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_message"
                    android:layout_width="25dp"
                    android:layout_height="20dp"
                    android:background="@drawable/message_no"
                    android:clickable="false" />

                <TextView
                    android:id="@+id/tv_message"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:text="消息"
                    android:textColor="@color/text30"
                    android:textSize="12sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab_home"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_home"
                    android:layout_width="25dp"
                    android:layout_height="20dp"
                    android:background="@drawable/home_no"
                    android:clickable="false" />

                <TextView
                    android:id="@+id/tv_home"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:text="首页"
                    android:textColor="@color/text30"
                    android:textSize="12sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab_find"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_find"
                    android:layout_width="25dp"
                    android:layout_height="20dp"
                    android:background="@drawable/find_no"
                    android:clickable="false" />

                <TextView
                    android:id="@+id/tv_find"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:text="发现"
                    android:textColor="@color/text30"
                    android:textSize="12sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab_user"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_user"
                    android:layout_width="25dp"
                    android:layout_height="20dp"
                    android:background="@drawable/user_no"
                    android:clickable="false" />

                <TextView
                    android:id="@+id/tv_user"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="2dp"
                    android:text="我的"
                    android:textColor="@color/text30"
                    android:textSize="12sp" />
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
</TabHost>

2.TabActivity使用

public class MainActivity extends TabActivity implements OnClickListener {
    private TabHost tabhost;
    public static final String TAB_NEAR = "tabNearby";
    public static final String TAB_MESSAGE = "tabMessage";
    public static final String TAB_HOME = "tabHome";
    public static final String TAB_FIND = "tabFind";
    public static final String TAB_USER = "tabUser";
    private LinearLayout li_tab_nearby, li_tab_message, li_tab_home,
            li_tab_find, li_tab_user;
    private ImageView img_nearby, img_message, img_home, img_find, img_user;
    private TextView tv_nearby, tv_message, tv_home, tv_find, tv_user;
    private Activity ac;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ac = this;
        initView();
        initEvent();
        //重置底部导航拦
        resetTab();
        //默认选中第一个选项卡
        selectTab(1);
    }

    @Override
    protected void onResume() {
        // TODO Auto-generated method stub
        super.onResume();
    }

    /**
     * 重置底部导航栏，由于每次点击效果都要改变，先重置成默认的，然后把点击的特殊处理
     */
    private void resetTab() {
        // TODO Auto-generated method stub
        img_nearby.setBackgroundResource(R.drawable.nearby_no);
        img_message.setBackgroundResource(R.drawable.message_no);
        img_home.setBackgroundResource(R.drawable.home_no);
        img_find.setBackgroundResource(R.drawable.find_no);
        img_user.setBackgroundResource(R.drawable.user_no);

        tv_nearby.setTextColor(getResources().getColor(R.color.text30));
        tv_message.setTextColor(getResources().getColor(R.color.text30));
        tv_home.setTextColor(getResources().getColor(R.color.text30));
        tv_find.setTextColor(getResources().getColor(R.color.text30));
        tv_user.setTextColor(getResources().getColor(R.color.text30));

    }

    private void initEvent() {
        // TODO Auto-generated method stub
        li_tab_nearby.setOnClickListener(this);
        li_tab_message.setOnClickListener(this);
        li_tab_home.setOnClickListener(this);
        li_tab_find.setOnClickListener(this);
        li_tab_user.setOnClickListener(this);
    }

    private void initView() {
        // TODO Auto-generated method stub
        li_tab_nearby = (LinearLayout) findViewById(R.id.tab_nearby);
        li_tab_message = (LinearLayout) findViewById(R.id.tab_message);
        li_tab_home = (LinearLayout) findViewById(R.id.tab_home);
        li_tab_find = (LinearLayout) findViewById(R.id.tab_find);
        li_tab_user = (LinearLayout) findViewById(R.id.tab_user);

        img_nearby = (ImageView) findViewById(R.id.iv_nearby);
        img_message = (ImageView) findViewById(R.id.iv_message);
        img_home = (ImageView) findViewById(R.id.iv_home);
        img_find = (ImageView) findViewById(R.id.iv_find);
        img_user = (ImageView) findViewById(R.id.iv_user);

        tv_nearby = (TextView) findViewById(R.id.tv_nearby);
        tv_message = (TextView) findViewById(R.id.tv_message);
        tv_home = (TextView) findViewById(R.id.tv_home);
        tv_find = (TextView) findViewById(R.id.tv_find);
        tv_user = (TextView) findViewById(R.id.tv_user);

        tabhost = getTabHost();
        tabhost.addTab(tabhost.newTabSpec(TAB_NEAR).setIndicator(TAB_NEAR)
                .setContent(new Intent(this, NearbyActivity.class)));
        tabhost.addTab(tabhost.newTabSpec(TAB_MESSAGE)
                .setIndicator(TAB_MESSAGE)
                .setContent(new Intent(this, MessageActivity.class)));
        tabhost.addTab(tabhost.newTabSpec(TAB_HOME).setIndicator(TAB_HOME)
                .setContent(new Intent(this, HomeActivity.class)));
        tabhost.addTab(tabhost.newTabSpec(TAB_FIND).setIndicator(TAB_FIND)
                .setContent(new Intent(this, FindActivity.class)));
        tabhost.addTab(tabhost.newTabSpec(TAB_USER).setIndicator(TAB_USER)
                .setContent(new Intent(this, UserActivity.class)));
    }

    /**
     * 选项卡的选择，同时把选中的选项卡对应的导航栏做特殊处理
     */
    private void selectTab(int i) {
        switch (i) {
            case 1:
                resetTab();
                tabhost.setCurrentTabByTag(TAB_NEAR);
                img_nearby.setBackgroundResource(R.drawable.nearby_select);
                tv_nearby
                        .setTextColor(getResources().getColor(R.color.user_heart1));
                break;
            case 2:
                resetTab();
                tabhost.setCurrentTabByTag(TAB_MESSAGE);
                img_message.setBackgroundResource(R.drawable.message_select);
                tv_message.setTextColor(getResources()
                        .getColor(R.color.user_heart1));
                break;
            case 3:
                resetTab();
                tabhost.setCurrentTabByTag(TAB_HOME);
                img_home.setBackgroundResource(R.drawable.home_select);
                tv_home.setTextColor(getResources().getColor(R.color.user_heart1));
                break;
            case 4:
                resetTab();
                tabhost.setCurrentTabByTag(TAB_FIND);
                img_find.setBackgroundResource(R.drawable.find_select);
                tv_find.setTextColor(getResources().getColor(R.color.user_heart1));
                break;
            case 5:
                resetTab();
                tabhost.setCurrentTabByTag(TAB_USER);
                img_user.setBackgroundResource(R.drawable.user_select);
                tv_user.setTextColor(getResources().getColor(R.color.user_heart1));
                break;
            default:
                break;
        }
    }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        switch (v.getId()) {
            case R.id.tab_nearby:
                selectTab(1);
                break;
            case R.id.tab_message:
                selectTab(2);
                break;
            case R.id.tab_home:
                selectTab(3);
                break;
            case R.id.tab_find:
                selectTab(4);
                break;
            case R.id.tab_user:
                selectTab(5);
                break;
        }
    }

}
逍遥-无忌
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
TabHost加载Activity及自定义底部导航栏的实现
04-01
TabHost加载Activity及自定义底部导航栏的实现
【Android UI设计与开发】第06期：底部菜单栏（一）使用TabActivity实现底部菜单栏
热门推荐
我是一条寻水的鱼
05-29 1万+
从这一篇文章开始，我们将进入到一个应用程序主界面UI的开发和设计中了，底部菜单栏在Android的应用开发当中占有非常重要的地位。几乎所有的手机应用程序都有底部菜单栏这样的控件，主要是因为手机的屏幕大小有限，这样一种底部菜单栏实现起来的效果可以很方便的为用户切换自己所需要的界面，具有更强的交互性。底部菜单栏的样式和效果也是五花八门，多的数不胜数，但是实现的基本原理都是一样的。         这
Android TabActivity之感叹
goodding的专栏
03-02 1003
(一)前言 ams帖子地址：http://bbs.51cto.com/thread-1008812-1.html 在以前一篇帖子讲ams的时候，提了一下TabActivity。当时说它比较特殊就没有下文了，今天重发一篇帖子，跟大家探讨一下TabActivity。 做个假定先： 比如我们最外面的Activity是MainActivity, 第一个tab是FirstActivty, 第二个tab
TabActivity底部导航+android屏幕分辨率信息＋canvas画布
11-25
1.tabhost＋TabActivity实现底部头部导航，本例中为头部导航，不明白可以留言。 2.android屏幕分辨率信息读取方便适配 ； 3. canvas画布画圆弧，扇形，矩形，贝塞尔曲线，六边形等等
安卓UI--底部导航栏--TabHost、TabActivity
qq_39230245的博客
09-30 358
参考文章 http://blog.csdn.net/harvic880925/article/details/17120325http://blog.csdn.net/goodding/article/details/8628972http://blog.csdn.net/gebitan505/article/details/12064711
android 自定义TabActivity的实例方法
01-20
下面我们将深入探讨如何自定义TabActivity，并着重讲解如何改变Tab栏的位置。 首先，TabActivity是Android SDK提供的一种用于创建多标签界面的Activity。默认情况下，TabHost组件将TabWidget（标签）放在顶部，而...
android底部导航（选项卡）+网格界面实例
08-06
综上所述，这个实例主要展示了如何在Android应用中实现底部导航栏与网格布局的结合，通过使用BottomNavigationView、RecyclerView、GridLayoutManager以及自定义装饰器，我们可以创建出类似支付宝的交互体验。...
Fragment实现导航 NavigationTabDemo
03-20
在Android中，它可以是底部导航栏（BottomNavigationView）、TabLayout或自定义视图。 - **优点**：相比于旧的TabActivity，自定义的导航栏更易于设计，支持动态加载和更好的手势交互。 3. **NavigationTabDemo的...
底部导航（TabHost）可滑动切换
10-13
通过结合ViewPager和自定义样式，我们可以创建出符合现代用户体验的底部导航栏。同时，随着Android框架的发展，如FragmentTransaction的使用，以及Material Design组件库的推广，开发者有更多的选择来实现更加灵活且...
TabActivity跳转
05-15
然而，在实际开发中，我们可能会遇到一个问题：如何在`TabActivity`的子页面中不通过底部导航栏而是通过其他方式（如按钮点击）跳转到另一个完全不同的页面。这个问题涉及到Android的Activity栈管理、Intent的使用...
TabActivity的使用
03-18
NULL 博文链接：https://yangguangfu.iteye.com/blog/679001
底部Tabbar两种实现（Fragment、TabActivity）
11-14
1、TabActivity实现底部Tabbar 2、Fragment底部实现 3、ViewPager Tabbar滑动式心啊
Android开发之TabActivity用法实例详解
01-05
本文实例讲述了Android开发之TabActivity用法。分享给大家供大家参考，具体如下： 一.简介 TabActivity继承自Activity,目的是让同一界面容纳更多的内容。TabActivity实现标签页的功能，通过导航栏对各个页面进行管理。 二.XML布局文件 注意： 1.TabActivity的布局文件要求以TabHost作为XML布局文件的根。 2.通常我们采用线性布局，所以 的子元素是 。 3.对应Tab 则用于包含Tab需要展示的内容 需要注意的是 和<F
RecyclerView和Tabbed Activity的布局与实现
11-06
通过android studio实现RecyclerView和Tabbed Activity与点击事件
TabActivity简介及实例使用
sunshine0216的博客
06-05 4507
一、简介 1. TabActivity继承Activity，主要功能是实现多个activity或者view之间的切换和显示，要使用该类必须新建一个类来继承TabActivity，并且该类的xml配置文件中必须包含TabHost、TabWidget、FrameLayout三个视图（View），其中后面两个标签是前面一个标签的子标签，表示tab页的选项卡，相当于菜单页，表示显示内容的区域。实现标签页的
Android自定义TabActivity(实现仿新浪微博底部菜单更新UI)
青春的光与影
05-06 3416
如今Android上很多应用都采用底部菜单控制更新的UI这种框架，例如新浪微博 点击底部菜单的选项可以更新界面。底部菜单可以使用TabHost来实现，不过用过TabHost的人都知道自定义TabHost究竟是有多麻烦的，原生TabHost的风格是不依附屏幕的底部的，要依附底部就要重写布局。 TabHost设置的Container可以管理UI的显示，UI可以用LayoutInflater动态生成，也可以是Activity，但不好管理Activity的生命周期。然后用TabHost控制显示UI的显示。
TabActivity实现多页显示效果
lovewlforever的专栏
07-17 493
Android音乐XMLQQ  TabActivity实现多页显示效果 由于手机屏幕有限，所以我们要尽量充分利用屏幕资源。在我们的应用程序中通常有多个Activity，而且会经常切换显示，这样我们就可以用TabActivity来显示。其效果如图1所示。   图1 tabActivity显示效果 本文就来研究TabActivity。根据帮助文档的解释，该控件用于包含并且运行
android中TabActivity使用的详细说明
zhouli_05的专栏
06-27 9841
TabActivity类位于android SDK中android.app.TabActivity下，它本身继承自ActivityGroup，主要功能是实现多个activity或者view之间的切换和显示，要使用该类必须新建一个类来继承TabActivity，并且该类的xml配置文件中必须包含、、三个视图（View），其中后面两个标签是前面一个标签的子标签，表示tab页的选项卡，相当于菜单页，表示

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值