Android应用底部导航栏(选项卡)实例

2023-11-11

         现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能。

我们先看下该demo实例的框架图:

其中各个类的作用以及资源文件就不详细解释了,还有资源图片(在该Demo中借用了其它应用程序的资源图片)也不提供了,大家可以自行更换自己需要的资源图片。直接上各个布局文件或各个类的代码:

[1]  res/layout目录下的 maintabs.xml 源码:

<?xml version="1.0" encoding="UTF-8"?>
<TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
        <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="0.0dip" android:layout_weight="1.0" />
        <TabWidget android:id="@android:id/tabs" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="0.0" />
            <RadioGroup 
                android:gravity="center_vertical" android:layout_gravity="bottom" android:orientation="horizontal" android:id="@id/main_radio" android:background="@drawable/maintab_toolbar_bg" 
                android:layout_width="fill_parent" android:layout_height="wrap_content">
                <RadioButton  android:id="@id/radio_button0" android:layout_marginTop="2.0dip" android:text="@string/main_home" android:drawableTop="@drawable/icon_1_n" style="@style/main_tab_bottom" />
                <RadioButton  android:id="@id/radio_button1" android:layout_marginTop="2.0dip" android:text="@string/main_news" android:drawableTop="@drawable/icon_2_n" style="@style/main_tab_bottom" />
                <RadioButton  android:id="@id/radio_button2" android:layout_marginTop="2.0dip" android:text="@string/main_manage_date" android:drawableTop="@drawable/icon_3_n" style="@style/main_tab_bottom" />
                <RadioButton  android:id="@id/radio_button3" android:layout_marginTop="2.0dip" android:text="@string/main_friends" android:drawableTop="@drawable/icon_4_n" style="@style/main_tab_bottom" />
                <RadioButton  android:id="@id/radio_button4" android:layout_marginTop="2.0dip" android:text="@string/more" android:drawableTop="@drawable/icon_5_n" style="@style/main_tab_bottom" />
            </RadioGroup>
    </LinearLayout>
</TabHost>

[2] res/drawable 下的 home_btn_bg.xml 源码:

<?xml version="1.0" encoding="UTF-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/home_btn_bg_s" />
    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/home_btn_bg_s" />
    <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/home_btn_bg_d" />
    <item android:drawable="@drawable/transparent" />
</selector>

[3] res/values 下的源码:

dimens.xml源码

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <dimen name="bottom_tab_font_size">10.0sp</dimen>
    <dimen name="bottom_tab_padding_up">5.0dip</dimen>
    <dimen name="bottom_tab_padding_drawable">2.0dip</dimen>
    <dimen name="switch_logo_bottom_padding">30.0sp</dimen>
    <dimen name="widget_height">100.0dip</dimen>
    <dimen name="sta_height">48.0dip</dimen>
    <dimen name="large_padding_length">20.0dip</dimen>
    <dimen name="widget_write_margin_top">19.0dip</dimen>
    <dimen name="widget_write_margin_left">10.0dip</dimen>
    <dimen name="widget_content_margin_top">20.0dip</dimen>
    <dimen name="widget_content_margin_left">10.0dip</dimen>
    <dimen name="widget_logo_size">35.0dip</dimen>
    <dimen name="title_height">74.0dip</dimen>
    <dimen name="new_blog_size">70.0dip</dimen>
    <dimen name="emotion_item_view_height">13.299988dip</dimen>
    <dimen name="splash_test_top_margin_top">20.0dip</dimen>
    <dimen name="splash_test_center_margin_right">0.0dip</dimen>
    <dimen name="title_text_size">20.0sp</dimen>
    <dimen name="normal_padding_length">10.0dip</dimen>
    <dimen name="no_result_padding_length">50.0dip</dimen>

</resources>


drawables.xml源码:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <item type="drawable" name="ltgray">#fff4f4f4</item>
    <item type="drawable" name="ltyellow">#fffff4db</item>
    <item type="drawable" name="black">#ff000000</item>
    <item type="drawable" name="transparent">#00000000</item>
    <item type="drawable" name="widget_edit_block_bg_normal">@android:color/transparent</item>
    <item type="drawable" name="transparent_background">#99000000</item>
    <item type="drawable" name="list_background">#fff4f4f4</item>
    <item type="drawable" name="namcard_picker_bkg_normal">#ff272727</item>
    <item type="drawable" name="namcard_picker_bkg_hover">#ff333333</item>

</resources>


ids.xml源码:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <item type="id" name="main_radio">false</item>
    <item type="id" name="radio_button0">false</item>
    <item type="id" name="radio_button1">false</item>
    <item type="id" name="radio_button2">false</item>
    <item type="id" name="radio_button3">false</item>
    <item type="id" name="radio_button4">false</item>

</resources>


strings.xml源码:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, MainTabActivity!</string>
    <string name="app_name">TabDemo</string>
    <string name="main_news">消息</string>
    <string name="main_home">首页</string>
    <string name="more">更多</string>
    <string name="main_manage_date">时间</string>
    <string name="main_friends">好友</string>
</resources>


styles.xml源码:

<?xml version="1.0" encoding="utf-8"?>
<resources>

     <style name="main_tab_bottom">
        <item name="android:textSize">@dimen/bottom_tab_font_size</item>
        <item name="android:textColor">#ffffffff</item>
        <item name="android:ellipsize">marquee</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:background">@drawable/home_btn_bg</item>
        <item name="android:paddingTop">@dimen/bottom_tab_padding_up</item>
        <item name="android:paddingBottom">2.0dip</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginBottom">2.0dip</item>
        <item name="android:button">@null</item>
        <item name="android:singleLine">true</item>
        <item name="android:drawablePadding">@dimen/bottom_tab_padding_drawable</item>
        <item name="android:layout_weight">1.0</item>
    </style>

</resources>


[4] src/com.andyidea.tabdemo包下面各个UI界面类源码:

MainTabActivity.java源码:

package com.andyidea.tabdemo;

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Window;
import android.widget.CompoundButton;
import android.widget.RadioButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.TabHost;

public class MainTabActivity extends TabActivity implements OnCheckedChangeListener{
	
	private TabHost mTabHost;
	private Intent mAIntent;
	private Intent mBIntent;
	private Intent mCIntent;
	private Intent mDIntent;
	private Intent mEIntent;
	
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.maintabs);
        
        this.mAIntent = new Intent(this,AActivity.class);
        this.mBIntent = new Intent(this,BActivity.class);
        this.mCIntent = new Intent(this,CActivity.class);
        this.mDIntent = new Intent(this,DActivity.class);
        this.mEIntent = new Intent(this,EActivity.class);
        
		((RadioButton) findViewById(R.id.radio_button0))
		.setOnCheckedChangeListener(this);
        ((RadioButton) findViewById(R.id.radio_button1))
		.setOnCheckedChangeListener(this);
        ((RadioButton) findViewById(R.id.radio_button2))
		.setOnCheckedChangeListener(this);
        ((RadioButton) findViewById(R.id.radio_button3))
		.setOnCheckedChangeListener(this);
        ((RadioButton) findViewById(R.id.radio_button4))
		.setOnCheckedChangeListener(this);
        
        setupIntent();
    }

	@Override
	public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
		if(isChecked){
			switch (buttonView.getId()) {
			case R.id.radio_button0:
				this.mTabHost.setCurrentTabByTag("A_TAB");
				break;
			case R.id.radio_button1:
				this.mTabHost.setCurrentTabByTag("B_TAB");
				break;
			case R.id.radio_button2:
				this.mTabHost.setCurrentTabByTag("C_TAB");
				break;
			case R.id.radio_button3:
				this.mTabHost.setCurrentTabByTag("D_TAB");
				break;
			case R.id.radio_button4:
				this.mTabHost.setCurrentTabByTag("MORE_TAB");
				break;
			}
		}
		
	}
	
	private void setupIntent() {
		this.mTabHost = getTabHost();
		TabHost localTabHost = this.mTabHost;

		localTabHost.addTab(buildTabSpec("A_TAB", R.string.main_home,
				R.drawable.icon_1_n, this.mAIntent));

		localTabHost.addTab(buildTabSpec("B_TAB", R.string.main_news,
				R.drawable.icon_2_n, this.mBIntent));

		localTabHost.addTab(buildTabSpec("C_TAB",
				R.string.main_manage_date, R.drawable.icon_3_n,
				this.mCIntent));

		localTabHost.addTab(buildTabSpec("D_TAB", R.string.main_friends,
				R.drawable.icon_4_n, this.mDIntent));

		localTabHost.addTab(buildTabSpec("MORE_TAB", R.string.more,
				R.drawable.icon_5_n, this.mEIntent));

	}
	
	private TabHost.TabSpec buildTabSpec(String tag, int resLabel, int resIcon,
			final Intent content) {
		return this.mTabHost.newTabSpec(tag).setIndicator(getString(resLabel),
				getResources().getDrawable(resIcon)).setContent(content);
	}
}

其中 AActivity.java 与 BActivity.java ,CActivity.java ,DActivity.java ,EActivity.java 中的源码都一样,只是用来表示不同的界面展示,故这里只列出 AActivity.java的源码:

package com.andyidea.tabdemo;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.widget.TextView;

public class AActivity extends Activity{
	
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		
		TextView tv = new TextView(this);
		tv.setText("This is A Activity!");
		tv.setGravity(Gravity.CENTER);
		setContentView(tv);
	}

}

最后,大家别忘了在 AndroidManifest.xml 文件中注册各个 Activity 组件哦。好了,现在我们看下我们程序运行的效果图:




到此就实现了一个比较流行的底部导航栏的功能了,转载请注明出处,谢谢大家!

由于需要该实例源码的童鞋比较多,我还是把源码放到资源中供大家下载:http://download.csdn.net/detail/cjjky/4236055

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Android应用底部导航栏(选项卡)实例 的相关文章

随机推荐

  • 在visio中插入数学公式

    前提 安装 visio 2013 Mathtype 依次点击 插入 对象 弹出对话框 插入对象 在弹出的对话框内点击 Microsoft 公式 3 0 点击 确定 弹出 Mathtype 编辑界面 即可插入公式
  • C#基础知识

    主要用于只是巩固和新接触的人使用 一 什么是C C 是有C C 衍生出来的一种面向对象编程语言 是一种安全的 稳定的 简单的 优雅的一种语言 他是运行于 Net Franmework智商的高级程序设计语言 二 C 第一个程序 Hellow
  • Java复习:IO流

    File类的使用 IO流原理及流的分类 1 I O是Input Output的缩写 I O技术是非常实用的技术 用于 处理设备之间的数据传输 如读 写文件 网络通讯等 2 Java程序中 对于数据的输入 输出操作以 流 stream 的 方
  • FastDFS,Redis,Solr,ActiveMQ核心技术整合四

    02 商品分类选择 分析 前端js 03 商品分类选择 分析 数据库 JJTree渲染过程解析 parent id为0就是父节点 is parent为1说明下面有子节点 state1正常2删除 tree组件有ztree 异步控件树每个节点都
  • sklearn - 岭回归(Ridge)和套索回归(Lasso)

    一 拟合 一 过拟合与欠拟合 机器学习中一个重要的话题便是模型的泛化能力 泛化能力强的模型才是好模型 对于训练好的模型 若在训练集表现差 不必说在测试集表现同样会很差 这可能是欠拟合导致 若模型在训练集表现非常好 却在测试集上差强人意 则这
  • Qt常用控件、警告与问题总结

    Qt Creator 转 Visual Studio Qt Creator转Visual Studio 在pro文件所在文件夹 打开cmd qmake tp vc x Visual Studio转Qt Creator Qt VS Tools
  • Springboot @Lazy注解

    作者 小猿聊编程 更多资料 https www techlearn cn 作用 Lazy可以实现bean的延迟初始化 在spring容器启动时不初始化Bean 直到用到这个Bean的时候才去初始化 使用范围 任意类型 方法 构造器 参数 字
  • Unity 检测物体是否在屏幕内

  • sql查询无结果设置默认值

    笔记 最近SQL直挂图表数据显示无内容 看了下数据库发现表里没数据 三方图表默认显示文字 但是需求想显示结果0 所以要想办法把无结果得数据默认给一个默认值 查询字段通常分为 null两种 前提是有结果 但是字段可能没数据 用case whe
  • Eclipse Svn插件各个版本以及对应Svn Connector的下载地址

    Eclipse Svn插件各个版本以及对应Svn Connector的下载地址 http www polarion com products svn subversive download php 可供大家把包下载然后在Eclipse里面进
  • linux内核新版gpio配置

    新版gpio操作
  • 2019年第十届蓝桥杯真题解析

    难度 难 算法 二分法 问题描述 小明公司的办公区有一条长长的走廊 由 N 个方格区域组成 如下图所示 走廊内部署了 K 台扫地机器人 其中第 i 台在第 Ai 个方格区域中 已知扫地机器人每分钟可以移动到左右相邻的方格中 并将该区域清扫干
  • 一键清空朋友圈软件_微信清理朋友圈app下载-微信清理朋友圈下载v1.8.0 安卓版-西西软件下载...

    微信清理朋友圈app一款强大的微信清理工具 当你想要重置自己的微信号并删除所有的内容之时 又觉得一条条删太麻烦了 就可以用到这款神器工具 可以帮助你一键删除掉朋友圈内的所有内容 帮助你轻松的重置微信号 十分的方便 赶快下载微信清理朋友圈ap
  • CentOS系统性能工具 sar 示例!

    安装配置 Sysstat 安装 Sysstat 包 Ubuntu sudo apt get install sysstat CentOS yum install sysstat CentOS rpm ivh sysstat 10 0 0 1
  • 使用FFmpeg进行屏幕录像和录音

    有些时候我们需要对屏幕进行录制 比如制作视频教程 录制直播等 然而这方面的软件多是收费的 即使是免费试用版的还有水印 特别烦人 下面介绍使用FFmpeg进行屏幕录制的方法 Windows 先安装dshow软件 Screen Capturer
  • iOS推送(利用极光推送)

    本文主要是基于极光推送的SDK封装的一个快速集成极光推送的类的封装 不喜勿喷 1 首先说一下推送的一些原理 Push的原理 Push 的工作机制可以简单的概括为下图图中 Provider是指某个iPhone软件的Push服务器 这篇文章我将
  • Linux SSH登录服务器报ECDSA host key “ip地址“ for has changed and you have requested strict checking错误

    Linux SSH命令用了那么久 第一次遇到这样的错误 ECDSA host key ip地址 for has changed and you have requested strict checking 记录下方便记忆 解决方案 在终端上
  • 系统没有wmi服务器,系统没有WMI服务怎么办.WMI错误修复方法

    WMI是一项核心的Windows管理技术 WMI作为一种规范和基础结构 通过它可以访问 配置 管理和监视几乎所有的Windows资源 比如用户可以在远程计算机器上启动一个进程 设定一个在特定日期和时间运行的进程 远程启动计算机 获得本地或远
  • XCTF_Web_新手练习区:simple_js(源代码详解)

    文章目录 第七题 simple js 源代码详解 目标 Writeup 源代码详解 第七题 simple js 源代码详解 目标 掌握有关js的知识 Writeup 进入环境后我们遇到了输入密码 于是我们随便输入一个密码 点击确定 之后啥也
  • Android应用底部导航栏(选项卡)实例

    现在很多android的应用都采用底部导航栏的功能 这样可以使得用户在使用过程中随意切换不同的页面 现在我采用TabHost组件来自定义一个底部的导航栏的功能 我们先看下该demo实例的框架图 其中各个类的作用以及资源文件就不详细解释了 还