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

最新推荐文章于 2023-08-04 12:41:52 发布
最新推荐文章于 2023-08-04 12:41:52 发布
阅读量279 收藏
点赞数
文章标签： Android TabHost 底部导航栏 布局文件 Activity

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

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

0_13268680532Y6D.gif

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

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

xmlns:android="http://schemas.android.com/apk/res/android">

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">

xmlns:android="http://schemas.android.com/apk/res/android">

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">

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

xmlns:android="http://schemas.android.com/apk/res/android">

xmlns:android="http://schemas.android.com/apk/res/android">

[3] res/values 下的源码：

dimens.xml源码

10.0sp

5.0dip

2.0dip

30.0sp

100.0dip

48.0dip

20.0dip

19.0dip

10.0dip

20.0dip

10.0dip

35.0dip

74.0dip

70.0dip

13.299988dip

20.0dip

0.0dip

20.0sp

10.0dip

50.0dip

10.0sp

5.0dip

2.0dip

30.0sp

100.0dip

48.0dip

20.0dip

19.0dip

10.0dip

20.0dip

10.0dip

35.0dip

74.0dip

70.0dip

13.299988dip

20.0dip

0.0dip

20.0sp

10.0dip

50.0dip

drawables.xml源码：

#fff4f4f4

#fffff4db

#ff000000

#00000000

@android:color/transparent

#99000000

#fff4f4f4

#ff272727

#ff333333

#fff4f4f4

#fffff4db

#ff000000

#00000000

@android:color/transparent

#99000000

#fff4f4f4

#ff272727

#ff333333

ids.xml源码：

false

false

false

false

false

false

false

false

false

false

false

false

strings.xml源码：

Hello World, MainTabActivity!

TabDemo

消息

首页

更多

时间

好友

Hello World, MainTabActivity!

TabDemo

消息

首页

更多

时间

好友

styles.xml源码：

@dimen/bottom_tab_font_size

#ffffffff

marquee

center_horizontal

@drawable/home_btn_bg

@dimen/bottom_tab_padding_up

2.0dip

fill_parent

wrap_content

2.0dip

@null

true

@dimen/bottom_tab_padding_drawable

1.0

@dimen/bottom_tab_font_size

#ffffffff

marquee

center_horizontal

@drawable/home_btn_bg

@dimen/bottom_tab_padding_up

2.0dip

fill_parent

wrap_content

2.0dip

@null

true

@dimen/bottom_tab_padding_drawable

1.0

[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);

}

}

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);

}

}

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 组件哦。好了，现在我们看下我们程序运行的效果图：

0_1326869514222b.gif

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

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

版权声明：本文为博主原创文章，未经博主允许不得转载。

不料青山
关注
Android实现底部导航栏功能（选项卡）
01-05
现在很多android的应用都采用底部导航栏的功能，这样可以使得用户在使用过程中随意切换不同的页面，现在我采用TabHost组件来自定义一个底部的导航栏的功能。 我们先看下该demo实例的框架图： 其中各个类的作用以及...
Android实现底部导航栏方法（Navigation篇）
weixin_47311938的博客
04-11 6777
底部导航栏一直是大部分App不可缺失的一部分最近注意到Jetpack中的Navigation支持Fragment的切换操作特此浅研究一下到此，Nav自定义导航栏已经实现，基本使用的模块来源日常使用经验。至于底部导航栏，网上大部分人都推荐使用 BottomNavigationView 配合使用好用，但自定义样式比较难，然后就只能翻BottomNavigationView的源码，看它是怎么实现切换页面而不销毁fragment。
Android 项目必备（十二）--＞ APP 底部导航栏最佳实践
Kevin Learn Android
12-23 2925
当开始一个新项目的时候，有一个很重要的步骤就是确定我们的 APP 首页框架，也就是用户从桌面点击 APP 图标，进入 APP 首页的时候展示给用户的框架，比如微信，展示了有四个 Tab ，分别对应不同的板块（微信、通讯录、发现、我），现在市面出了少部分的 Material Design 风格的除外，大部分都是这样的一个框架，称之为底部导航栏。...
android : 底部导航栏的实现（使用ViewPager和BottomNavigationView）
weixin_63987141的博客
03-23 6884
注意：BottomNavigationView需要一个app:menu菜单文件（下面会作讲解）本案例中需要用的控件ViewPager和BottomNavigationView。那么我么如何设置两个控件联动（仅需要两个方法即可）创建完成后会生成Fragment的java文件和对应的XML文件。Fragment文件不需要修改，后期只需要传入两个参数即可。接下来创建空白的Fragment，不用做任何修改。创建5个即可，创建方法相同，以下只示例一个。接下来是Viewpager的适配器。
Android 底部导航栏（一、BottomNavigationView+Menu+Fragment）
Android 领域开发程序员，希望通过写博客的方式不断的总结提升自己，大家共同进步哦！
06-29 1万+
现在常用的App主页都会有一个底部导航栏，根据需求也使用过好几种方法进行实现，于是想着还是总结一下，今天还写一个简单的BottomNavigationView方法来实现这个功能它是android原生的一个底部导航框架，一般和Fragment一起使用。xml布局：最外层的layout不用管，那是databinding框架的根布局，主要的布局FrameLayout来装载fragment列表，BottomNavigationView实现底部导航栏，最后监听绑定实现点击切换 其中BottomNavigation
Android底部导航栏的四种实现
热门推荐
jxq1994的博客
09-18 11万+
现在大多数App都会用到底部导航栏，比如常见的聊天工具QQ、微信，购物App等等，有了底部导航栏，用户可以随时切换界面，查看不同的内容。它的实现方式也很多，以前大多使用TabHost来实现，但是现在我们有很多更好的选择。使用LinearLayout + TextView实现了底部导航栏的效果首先看看工程目录：Step 1：实现底部选项的一些资源文件图片Drawable资源：tab_menu_deal
Android应用底部导航栏(选项卡)实例Demo
04-18
在"Android应用底部导航栏(选项卡)实例Demo"中，开发者可能使用了`TabHost`和`TabWidget`来创建一个简单的选项卡布局。以下是一般的实现步骤： 1. **布局文件**：在XML布局文件中，需要包含一个`TabHost`作为顶级...
android底部导航（选项卡）+网格界面实例
08-06
综上所述，这个实例主要展示了如何在Android应用中实现底部导航栏与网格布局的结合，通过使用BottomNavigationView、RecyclerView、GridLayoutManager以及自定义装饰器，我们可以创建出类似支付宝的交互体验。...
Android应用底部导航栏(选项卡)实例
12-05
Android应用底部导航栏(选项卡)实例，个人觉得该效果还挺不错的，所以就从源码天堂那个网站上转过来给大家一下。 源码演示说明：http://code.662p.com/view/4795.html
安卓：BottomNavigationBar——底部导航栏控件
最新发布
A125679880的博客
08-04 6208
BottomNavigationBar是一个用于Android应用程序的底部导航栏控件，通常用于在应用程序的不同页面之间进行快速切换。它提供了一种直观且易于使用的导航方式，使用户可以轻松访问应用程序的各个模块。BottomNavigationBar（底部导航栏）是一种常见的用户界面设计模式，常用于移动应用程序中。
Android---简易的底部导航栏
qq_44950283的博客
12-28 3903
在bottomnavigationitem.xml 里添加一个 item 就是在 底部导航栏里添加了一个可点击的 tab 按钮。注意，item 里面的 icon 属性你可以自己找一下好看的icon，这里简单用 mipmap 里的 ic_launcher.webp 来作为 icon。对于底部导航栏 item 的监听应该是 OnNavigationItemSelectedListener，但是该方法已经被 google 官方给废弃了，所以这里用 OnItemSelectedListener 来代替。
Android 之 Fragment 精讲 —— 底部导航栏的实现 (方法3)
leyang0910的博客
07-01 867
从上面这个图我们就可以看出，这种底部导航栏不是简单的TextView或者RadioGroup构成的， 大概布局方案可能是：外层一个LinearLayout，中间一个RelativeLayout，而在中间有一个TextView， 然后再在TextView的右上角有一个红色圆圈背景的TextView或者一个红色的小点；大概就这样，而这些小点平时的时候应该设置的不可见，当收到信息推送，即有相关类别信息的 时候再可见，并且显示对应的信息数目！为了方便理解，这里通过点击按钮的形式，模拟收到推送信息，然后显示红色点！
【Android入门到项目实战-- 11.2】—— 实现底部导航栏（RadioGroup+Fragment）
张修宇的博客
05-20 4440
Android如何实现底部导航栏，使用RadioGroup+Fragment实现，如何实现不能左右滑动切换页面的导航栏？具体代码实现
Android开发----生成Android底部导航栏
Qingshan_z的博客
10-13 7965
Android 新建带有底部导航栏的activity，并更改导航栏图标和标题。
安卓底部导航栏几种实现方式，小白菜看了都说简单。
小马哥的博客
07-21 1万+
安卓底部导航栏的实现方式探索： 1.安卓提供默认的导航方式 2.使用简单布局的方式实现 3.Viewpager+RadioGroup+Layout 4.ViewPager+Fragment+RadioGroup(推荐) 纯原生java代码，未集成其他第三方复杂的库，代码经过测试可行。 开发环境： AndroidStudio 4.0 Java语言 SDK8.0以上...
Android 之 Fragment 精讲 —— 底部导航栏的实现 (方法2)
leyang0910的博客
07-01 584
上一节中我们使用LinearLayout + TextView实现了底部导航栏的效果，每次点击我们都要重置 所有TextView的状态，然后选中点击的TextView，有点麻烦是吧，接下来我们用另一种方法： RadioGroup + RadioButton来实现我们上一节的效果！然后我们的activity_main.xml中的RadioButton就用不着次次都写相同的代码了， 只需让RadioButton的。这里的素材什么的，直接使用的是上一节中的素材！android:text="信息"
Android studio中使用ViewPager和BottomNavigationView实现底部导航栏和碎片的同步切换
lb220303082的博客
07-02 8085
本教程详细全面，对新手友好
转载：Android底部导航栏，三种风格和实现
一个IT人的技术成长历程。
06-01 6849
这是 Google 给我们提供的一个专门用于底部导航的 View，你只需要在新建 Activity 的时候选择 “Bottom Navigation Activity”，IDE 就会自动使用 BottomNavigationView
Android RadioGroup实现底部导航栏详解及实例代码
本文提供的实例展示了如何使用RadioGroup配合Fragment来实现一个功能丰富的底部导航菜单栏，开发者需要熟悉XML布局设计、Fragment管理和RadioGroup的使用，才能完成这样一个实用且用户体验良好的Android应用设计。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值