Android开发笔记(十九)底部标签栏TabBar

本文介绍了Android中实现底部标签栏TabBar的三种常见方法:TabActivity、ActivityGroup和FragmentActivity。针对Android原生TabBar在位置上的不足,开发者通常会自定义底部导航,通过点击按钮切换不同页面。

摘要生成于 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);
		
### 关于邱石小程序开发笔记或教程的相关信息 根据已知的信息,邱石(假设为“石头哥”)可能是一位专注于教授微信小程序以及UniApp开发的技术讲师。以下是与其相关的开发笔记和教程的内容概述: #### 1. 创建项目路径与配置 当学习小程序开发时,通常会从创建项目开始。如果按照石头哥的教学方法,在桌面上新建一个名为 `demo1` 的空白文件夹,并通过工具选择该文件夹作为项目的根目录,则所有的项目源码都会存储在这个文件夹中[^1]。 #### 2. UniApp 和微信小程序的关系 UniApp 是基于 Vue.js 构建的一个跨平台应用框架,其设计目标是为了让开发者能够使用一套代码构建多个平台的应用程序(如 H5、iOS、Android 等)。由于微信小程序本身也借鉴了许多 Vue 的设计理念,因此两者在组件和语法上有较高的相似度。如果你已经熟悉了石头哥讲解的小程序课程,那么学习 UniApp 将变得更加轻松[^1]。 #### 3. 数据库操作与云开发支持 对于涉及数据交互的小程序开发场景,石头哥可能会介绍如何利用微信云开发功能简化后端服务搭建过程。例如,可以通过以下代码片段实现对云端数据库集合 (`demolist`) 中的数据读取操作: ```javascript var db = wx.cloud.database(); // 使用 var 定义可变变量以便后续修改 getData() { db.collection("demolist").get({ success: res => { console.log(res); } }); } ``` 此部分展示了如何初始化数据库实例并调用相应 API 来获取指定集合中的记录[^3]。 #### 4. 自定义 TabBar 配置 为了提升用户体验,许多应用程序都需要自定义底部导航栏 (TabBar)。下面是 stones 哥分享的一段用于设置两个标签页 ("首页" 和 "我的") 的 JSON 格式的 tabBar 配置示例: ```json { "tabBar": { "color": "#8a8a8a", "selectedColor": "#ffb965", "list": [ { "pagePath": "pages/race/race", "text": "首页", "iconPath": "images/home-no.png", "selectedIconPath": "images/home-yes.png" }, { "pagePath": "pages/me/me", "text": "我的", "iconPath": "images/me-no.png", "selectedIconPath": "images/me-yes.png" } ] } } ``` 这段代码提供了颜色样式及图标资源路径的具体设定指南[^4]。 --- ###
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值