android开发标签栏应该设置多少,Android开发笔记（十九）底部标签栏TabBar

最新推荐文章于 2022-11-12 15:47:55 发布
转载 最新推荐文章于 2022-11-12 15:47:55 发布
· 244 阅读 · 0
文章标签：

#android开发标签栏应该设置多少

本文详细介绍了在Android中实现底部标签栏的三种常见方法：TabActivity、ActivityGroup和FragmentActivity，并提供了每种方式的代码实现。尽管TabActivity和ActivityGroup已被官方弃用，但为了兼容旧项目，仍然有必要了解。作者推荐使用FragmentActivity，因其代码简洁，易于维护。文章通过代码示例展示了如何设置标签的文本、图标以及对应的页面跳转，并给出了三种方式的效果图。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

底部标签页实现思路

现在的APP，大多在页面底部显示标签栏Tabbar，用于切换不同栏目的页面。Tabbar起源于iOS，iOS的Tabbar自动位于页面下方，可是Android搬过来的时候做了改动，自带的Tabbar位于页面上方，很不适合用户的使用习惯。为此我们在Android实现底部标签栏，得额外进行底部适配处理，适配思路基本都是在底部罗列一排的按钮，然后根据点击不同的按钮，跳到不同的Activity页面。具体的实现方式，目前发现了三个：

1、使用TabActivity。其中在布局文件中设置TabHost、TabWidget和RadioButton，在代码文件中应用TabActivity、TabSpec和CompoundButton。

2、使用ActivityGroup。将几个栏目的首页Activity都放入ActivityGroup，然后根据点击事件选择切换到哪个Activity。

3、使用FragmentActivity和Fragment。将几个栏目的首页Fragment都放入FragmentActivity，可自动响应点击事件。

其中TabActivity继承自ActivityGroup，目前Android声称TabActivity与ActivityGroup都已废弃，建议采用Fragment和FragmentManager来代替。从实现代码来看，TabActivity和ActivityGroup两种方式的代码量都较多，而FragmentActivity方式的代码就显得很简洁，所以博主也推荐第三种方式。

下面简要介绍三种方式的代码实现：

TabActivity方式

调用代码如下：

import android.app.TabActivity;

import android.content.Intent;

import android.os.Bundle;

import android.widget.CompoundButton;

import android.widget.CompoundButton.OnCheckedChangeListener;

import android.widget.TabHost;

@SuppressWarnings("deprecation")

public class TestTabActivity extends TabActivity implements OnCheckedChangeListener {

private static final String TAG = "TestTabActivity";

private Bundle mBundle = new Bundle();

private TabHost tab_host;

private CompoundButton first_button;

private CompoundButton second_button;

private CompoundButton third_button;

private String FIRST_TAG = "first";

private String SECOND_TAG = "second";

private String THIRD_TAG = "third";

private TabHost.TabSpec getNewTab(String spec, int label, int icon, Intent intent) {

return tab_host

.newTabSpec(spec)

.setIndicator(getString(label), getResources().getDrawable(icon))

.setContent(intent);

}

private void setButtonCheck(CompoundButton button) {

if (button.equals(first_button)) {

button.setChecked(true);

second_button.setChecked(false);

third_button.setChecked(false);

} else if (button.equals(third_button)) {

button.setChecked(true);

second_button.setChecked(false);

first_button.setChecked(false);

} else if (button.equals(second_button)) {

button.setChecked(true);

first_button.setChecked(false);

third_button.setChecked(false);

}

}

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_test_tab);

mBundle.putString("tag", TAG);

tab_host = getTabHost();

tab_host.addTab(getNewTab(FIRST_TAG, R.string.menu_first,

R.drawable.tab_first_selector, new Intent(this, FirstActivity.class).putExtras(mBundle)));

tab_host.addTab(getNewTab(SECOND_TAG, R.string.menu_second,

R.drawable.tab_second_selector, new Intent(this, SecondActivity.class).putExtras(mBundle)));

tab_host.addTab(getNewTab(THIRD_TAG, R.string.menu_third,

R.drawable.tab_third_selector, new Intent(this, ThirdActivity.class).putExtras(mBundle)));

first_button = ((CompoundButton) findViewById(R.id.rbtn_tab_first));

first_button.setOnCheckedChangeListener(this);

second_button = ((CompoundButton) findViewById(R.id.rbtn_tab_second));

second_button.setOnCheckedChangeListener(this);

third_button = ((CompoundButton) findViewById(R.id.rbtn_tab_third));

third_button.setOnCheckedChangeListener(this);

tab_host.setCurrentTabByTag(FIRST_TAG);

setButtonCheck(first_button);

}

@Override

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

if (isChecked == true) {

setButtonCheck(buttonView);

if (buttonView.equals(first_button)) {

tab_host.setCurrentTabByTag(FIRST_TAG);

} else if (buttonView.equals(second_button)) {

tab_host.setCurrentTabByTag(SECOND_TAG);

} else if (buttonView.equals(third_button)) {

tab_host.setCurrentTabByTag(THIRD_TAG);

}

}

}

}

该方式的核心是getNewTab函数，可设置标签的文本和图标，以及该标签对应的跳转页面。当发生点击事件时，系统调用TabHost的setCurrentTabByTag函数来定位到具体的跳转页面。

ActivityGroup方式

调用代码如下：

import android.app.ActivityGroup;

import android.content.Intent;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TextView;

@SuppressWarnings("deprecation")

public class TestGroupActivity extends ActivityGroup implements OnClickListener {

private static final String TAG = "TestGroupActivity";

private Bundle mBundle = new Bundle();

private LinearLayout layout_container, layout_first, layout_second, layout_third;

private ImageView img_first, img_second, img_third;

private TextView txt_first, txt_second, txt_third;

public static final int PAGE_FIRST = 1001;

public static final int PAGE_SECOND = 1002;

public static final int PAGE_XINXI = 1003;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_test_group);

layout_container = (LinearLayout) findViewById(R.id.layout_container);

layout_first = (LinearLayout) findViewById(R.id.layout_first);

layout_second = (LinearLayout) findViewById(R.id.layout_second);

layout_third = (LinearLayout) findViewById(R.id.layout_third);

img_first = (ImageView) findViewById(R.id.img_first);

img_second = (ImageView) findViewById(R.id.img_second);

img_third = (ImageView) findViewById(R.id.img_third);

txt_first = (TextView) findViewById(R.id.txt_first);

txt_second = (TextView) findViewById(R.id.txt_second);

txt_third = (TextView) findViewById(R.id.txt_third);

layout_first.setOnClickListener(this);

layout_second.setOnClickListener(this);

layout_third.setOnClickListener(this);

mBundle.putString("tag", TAG);

changeContainerView(PAGE_FIRST);

}

private void changeContainerView(int page) {

switch (page) {

case PAGE_FIRST:

layout_first.setBackgroundResource(R.drawable.ic_tabbar_bg_click);

layout_second.setBackgroundResource(R.drawable.ic_tabbar_bg_normal);

layout_third.setBackgroundResource(R.drawable.ic_tabbar_bg_normal);

img_first.setBackgroundResource(R.drawable.ic_tabbar_first_pressed);

img_second.setBackgroundResource(R.drawable.ic_tabbar_second_normal);

img_third.setBackgroundResource(R.drawable.ic_tabbar_third_normal);

txt_first.setTextColor(getResources().getColor(R.color.tab_text_selected));

txt_second.setTextColor(getResources().getColor(R.color.tab_text_normal));

txt_third.setTextColor(getResources().getColor(R.color.tab_text_normal));

toActivity("item1", new Intent(this, FirstActivity.class).putExtras(mBundle));

return;

case PAGE_SECOND:

layout_first.setBackgroundResource(R.drawable.ic_tabbar_bg_normal);

layout_second.setBackgroundResource(R.drawable.ic_tabbar_bg_click);

layout_third.setBackgroundResource(R.drawable.ic_tabbar_bg_normal);

img_first.setBackgroundResource(R.drawable.ic_tabbar_first_normal);

img_second.setBackgroundResource(R.drawable.ic_tabbar_second_pressed);

img_third.setBackgroundResource(R.drawable.ic_tabbar_third_normal);

txt_first.setTextColor(getResources().getColor(R.color.tab_text_normal));

txt_second.setTextColor(getResources().getColor(R.color.tab_text_selected));

txt_third.setTextColor(getResources().getColor(R.color.tab_text_normal));

toActivity("item1", new Intent(this, SecondActivity.class).putExtras(mBundle));

return;

case PAGE_XINXI:

layout_first.setBackgroundResource(R.drawable.ic_tabbar_bg_normal);

layout_second.setBackgroundResource(R.drawable.ic_tabbar_bg_normal);

layout_third.setBackgroundResource(R.drawable.ic_tabbar_bg_click);

img_first.setBackgroundResource(R.drawable.ic_tabbar_first_normal);

img_second.setBackgroundResource(R.drawable.ic_tabbar_second_normal);

img_third.setBackgroundResource(R.drawable.ic_tabbar_third_pressed);

txt_first.setTextColor(getResources().getColor(R.color.tab_text_normal));

txt_second.setTextColor(getResources().getColor(R.color.tab_text_normal));

txt_third.setTextColor(getResources().getColor(R.color.tab_text_selected));

toActivity("item1", new Intent(this, ThirdActivity.class).putExtras(mBundle));

return;

default:

return;

}

}

@Override

public void onClick(View view) {

switch (view.getId()) {

case R.id.layout_first:

changeContainerView(PAGE_FIRST);

return;

case R.id.layout_second:

changeContainerView(PAGE_SECOND);

return;

case R.id.layout_third:

changeContainerView(PAGE_XINXI);

return;

default:

return;

}

}

private void toActivity(String label, Intent intent) {

layout_container.removeAllViews();

View view = getLocalActivityManager().startActivity(label, intent).getDecorView();

layout_container.addView(view);

}

}

该方式的核心是toActivity函数，也可设置标签的文本和图标，以及该标签对应的跳转页面。在toActivity函数中可以看到，startActivity方法返回一个Window对象，系统从该Window对象提取标签页的实际视图getDecorView(我们可以把DecorView理解为该标签页的根视图)，然后这个DecorView加入到Tabbar的视图容器中。

FragmentActivity方式

调用代码如下：

import android.annotation.SuppressLint;

import android.graphics.drawable.Drawable;

import android.os.Bundle;

import android.support.v4.app.FragmentActivity;

import android.support.v4.app.FragmentTabHost;

import android.view.View;

import android.widget.LinearLayout;

import android.widget.TabHost.TabSpec;

import android.widget.TextView;

@SuppressLint("InflateParams")

public class TestFragmentActivity extends FragmentActivity {

private static final String TAG = "TestFragmentActivity";

private Bundle mBundle = new Bundle();

private FragmentTabHost mTabHost;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_test_fragment);

mBundle.putString("tag", TAG);

mTabHost = (FragmentTabHost)findViewById(android.R.id.tabhost);

mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);

//addTab(标题，跳转的Fragment，传递参数的Bundle)

mTabHost.addTab(getTabView(R.string.menu_first, R.drawable.tabbar_first_selector), FirstFragment.class, mBundle);

mTabHost.addTab(getTabView(R.string.menu_second, R.drawable.tabbar_second_selector), SecondFragment.class, mBundle);

mTabHost.addTab(getTabView(R.string.menu_third, R.drawable.tabbar_third_selector), ThirdFragment.class, mBundle);

//设置tabs之间的分隔线不显示

mTabHost.getTabWidget().setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);

}

private TabSpec getTabView(int textId, int imgId) {

String text = getResources().getString(textId);

Drawable drawable = getResources().getDrawable(imgId);

//必须设置图片大小，否则不显示

drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight());

View tabbar_item = getLayoutInflater().inflate(R.layout.tabbar_item, null);

TextView tv_item = (TextView) tabbar_item.findViewById(R.id.tv_item);

tv_item.setText(text);

tv_item.setCompoundDrawables(null, drawable, null, null);

TabSpec spec = mTabHost.newTabSpec(text).setIndicator(tabbar_item);

return spec;

}

}

该方式的核心是getTabView函数，可自定义每个标签项的具体视图。因为FragmentTabHost已经自动处理了点击事件，所以该方式的代码量比前两种缩小很多。

下面是底部标签页三种方式的效果图

e610e8fe7c72b1d74c7545d7d4f977ab.gif

Android 开发：（十三）TabBar篇-自定义底部导航栏
Dongxk的博客
12-26 3616
一、实现思路： 使用RadioGroup和RadioButton实现tabbar导航切换功能，而每个页面使用replace方法处理fragment，使其切换的同时重新刷新(add方式是将fragment隐藏了，replace方式每次都是销毁再重新创建)； 效果图如下： 二、具体实现： 项目框架文件： 1. activity_main.xml 部分代码 <FrameLayout ...
Android开发笔记（十九）底部标签栏TabBar
热门推荐
aqi00的博客
12-15 1万+
底部标签页实现思路 现在的APP，大多在页面底部显示标签栏Tabbar，用于切换不同栏目的页面。Tabbar起源于iOS，iOS的Tabbar自动位于页面下方，可是Android搬过来的时候做了改动，自带的Tabbar位于页面上方，很不适合用户的使用习惯。为此我们在Android实现底部标签栏，得额外进行底部适配处理，适配思路基本都是在底部罗列一排的按钮，然后根据点击不同的按钮，跳到不同的Act
Android Tab标签的使用基础
weixin_33884611的博客
05-08 185
Android Tab标签的使用基础 　　Android程序中，Tab标签窗口是一种常用的UI界面元素。它的实现主要是利用了TabHost类。   TabHost说明 　　TabHost是一个标签窗口的容器。 　　一个TabHost对象包含两个子元素对象： 　　一个对象是tab标签集合（TabWidget），用户点击它们来选择一个特定的标签； 　　另一个是FrameLayout对象，...
打造自己的标签栏
linkia
10-07 150
作为Android新手，我当时只知道一种方法： 使用Android自带的TabHost容器。 传统的TabHost的使用效果大概是这样的（左图）： 这是大众点评网早期的Android客户端，标签栏使用了系统自带的控件。然而这个效果和我们看到的很多底部标签栏相差甚远（右图，twitter客户端Twidroyd截图）。 他们到底是怎么实现的呢？为此，我在网上查了不少资料，大致有以...
Android 顶部标签栏及内容列表的设计与实现
qq_52108058的博客
11-12 3578
onCreateViewHolder（）：创建整个布局的视图持有者onBindViewHolder（）：绑定每项的持有者getItemCount（）：获得列表项数目//加载布局列表 View view = inflater . inflate(R . layout . item_list , parent , false);//为列表项设置内容 Holder . t1 . setText(item . getTop_text());
Android Tabbar实现
10-31
使用TabActivity实现底部Tabbar
Android开发笔记（一百三十九）可定制可滑动的标签栏
aqi00的博客
03-28 3320
App在页面底部展现标签栏导航的效果，有多种实现方式，包括TabActivity方式、ActivityGroup方式、FragmentActivity方式等等，具体的实现方案参见之前的博文《Android开发笔记（十九）底部标签栏》。一般情况下这种底部标签栏能够满足大部分的业务需求，然而有时客户的口味比较独特，固定的几款套餐已经不能满足她的胃口了。比如客户要求做成自助餐形式，同时长条的固定餐台也要
Android开发笔记（二十一）横幅轮播页Banner
aqi00的博客
12-17 6010
如今我们打开电商类的APP，首页上方就有很炫的Banner（横幅轮播页），里面放了最新的商品和活动的介绍图片，还能自动轮播，也可左右翻动，着实是吸引眼球。 下面是一个Banner的截图，我们看看这个Banner是如何实现的。 首先看到Banner的界面由两部分组成，一部分是轮播的图片，另一部分是图片下方的几个图标用来表示当前播放的是第几张图片。所以一个Banner需要先初始化两个队列，
Android开发笔记（三十七）按钮类控件
aqi00的博客
01-04 4605
Button与ImageButton Button是文本按钮（继承自TextView），而ImageButton是图像按钮（继承自ImageView）。两者之间的区别在于： 1、Button即可显示文本也可显示图形（通过设置背景图），而ImageButton只能显示图形不能显示文本； 2、Button可在文本周围区域显示小图，而ImageButton无法在某个区域显示小图； 3、Image
Android开发笔记（六十六）自定义对话框
aqi00的博客
02-18 4758
AlertDialog Android中最常用的对话框是AlertDialog，它可以完成常见的交互操作，如提示、确认、选择等等，然后就是进度对话框ProgressDialog（参见《Android开发笔记（四十九）异步任务处理AsyncTask》）。 AlertDialog没有公开的构造函数，必须借助于AlertDialog.Builder才能完成参数设置。Builder的常用方法如下：
android项目Tab标签页大汇总
11-11
android项目Tab标签页大汇总 [注：本内容来自网络，在此分享仅为帮助有需要的网友，如果侵犯了您的权利，麻烦联系我，我会第一时间删除，谢谢您。]
一个比较漂亮的安卓标签栏
04-05
作者peng8350，源码JPTabBar，Android的美丽的标签栏，喜欢的朋友可以参考一下这个案例。 主要功能以及特色: - [x] 多种Tab切换的动画效果 - [x] 实现底部导航中间按钮凸出的效果 - [x] 实现类似Wechat图标渐变，并且带动画 - [x] 实现TabBar上的红色标记,并且可以拖动 - [x] 提供监听Tab的点击事件,中间点击以及badge被拖拉消失的接口 - [x] 引用注解方式,免去自己手动构造TabBarItem
android标题栏自定义标签
09-11
android 标题栏自定义标签，可以实现 左中右，文字、图片显示。一句话调用标题栏，沉浸式显示
android tab标签页实现
07-31
Android中通过activity和fragment组合实现的底部tab标签页布局框架，比较实用
Android 使用TabLayout打造滑动标签栏
01-28
Android 使用TabLayout打造滑动标签栏, 代码通俗易懂。欢迎下载
android实现tabbar（导航栏切换）效果
weixin_44360449的博客
11-03 5900
一、实现的效果图 二、总体的目录结构 三、编码前的部分思路 四、进行编码 4.1 创建一个空Activity项目，这个就不赘述了 4.2 在build.gradle中导入相关的依赖（后续可能会用到的我也添加了） implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'androidx.constraintlayout:constraintlayout:2.0.1' implementati
Android中通过TabLayout制作标签栏
水月洞天
03-12 301
（待续）
安卓组合控件——标签栏
05-30 131
1.先定义一个xml文件。
Android布局演示之底部标签栏
Ink_jay的专栏
11-14 3026
<br />在很多Android的程序的布局中需要在底部放上一个导航用的标签栏，但是Android本身并没有像iPhone SDK那样提供相关的布局对象来实现这个功能，不过没关系，我们可以来自己实现这个布局，<br /> <br />布局实现思路：<br />用一个LinearLayout来装下所有的标签按钮，同时设定这个LinearLayout到适当的高度，然后需要给这个LinearLayout增加一个android:layout_gravity的属性并把值其设定为bottom，这样标签栏就可以沉在屏幕底
Android Navigation TabBar 实现多彩标签栏教程
"Android Navigation TabBar控件是Android开发中常用的一种组件，它用于创建具有多个选项卡的应用界面，每个选项卡通常代表一个不同的页面或功能。本文将介绍如何使用这个控件来实现多彩标签栏，使应用的界面更加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值