android fragment 底部菜单栏,一句话搞定Android底部导航栏，一键绑定Fragment、ViewPager...

最新推荐文章于 2023-02-18 09:28:09 发布
最新推荐文章于 2023-02-18 09:28:09 发布
阅读量454 收藏
点赞数
文章标签： android fragment 底部菜单栏

现在大多数App都会用到底部导航栏，比如常见的聊天工具QQ、微信、购物App等等，有了底部导航栏，用户可以随时切换界面，查看不同的内容。它的实现方式也很多，以前大多使用TabHost来实现，但是现在我们有很多更好的选择。

常见的底部导航栏实现方式：

1.使用LinearLayout + TextView实现了底部导航栏的效果

2.使用RadioGroup + RadioButton实现了底部导航栏的效果

3.利用BottomNavigationBar实现底部导航栏

.......

实现方式有很多，不过好像都只是关于下边Tab切换而已，没有实现Tab与界面的联动，用的时候还要自己手写这部分代码，麻烦不麻烦？

作为一名注定要改变世界的程序猿，你让我天天写这个？这是不能忍的。

1dd8092d85f4

更高，更快，更强

就不能有个东西，能够一句话搞定Android底部导航栏，一键绑定Fragment、ViewPager吗？

所以，这个BottomTabBar产生了。GitHub项目地址

先来看下效果：

1dd8092d85f4

简陋的演示.gif

How to use：

1dd8092d85f4

1dd8092d85f4

Step 1. Add the JitPack repository to your build file

Add it in your root build.gradle at the end of repositories:

allprojects {

repositories {

...

maven { url 'https://jitpack.io' }

}

}

Step 2. Add the dependency

dependencies {

compile 'com.github.zhaolei9527:UseBottomTabBar:v1.0.4'

}

XML布局文件代码：

android:id="@+id/BottomTabBar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

>

控件可设置参数：

参数名

描述

tab_bar_background

BottomTabBar的整体背景颜色

tab_img_width

图片宽度

tab_img_height

图片高度

tab_font_size

文字尺寸

tab_img_font_padding

图片文字间隔

tab_padding_top

上边距

tab_padding_bottom

下边距

tab_isshow_divider

是否显示分割线

tab_divider_height

分割线高度

tab_divider_background

分割线背景

tab_selected_color

选中的颜色

tab_unselected_color

未选中的颜色

Activity文件代码：

导包：import sakura.bottomtabbar.BottomTabBar;

绑定Fragment的:(一句话搞定有木有？)

BottomTabBar.initFragmentorViewPager(getSupportFragmentManager())

.addReplaceLayout(R.id.fl_content)

.addTabItem("草莓", getResources().getDrawable(R.mipmap.icon01), getResources().getDrawable(R.mipmap.icon_round), FragmentA.class)

.addTabItem("凤梨", getResources().getDrawable(R.mipmap.icon02), getResources().getDrawable(R.mipmap.icon_round), FragmentB.class)

.addTabItem("樱桃", getResources().getDrawable(R.mipmap.icon03), getResources().getDrawable(R.mipmap.icon_round), FragmentC.class)

.addTabItem("香蕉", getResources().getDrawable(R.mipmap.icon04), getResources().getDrawable(R.mipmap.icon_round), FragmentD.class)

.commit();

绑定ViewPager的:(一句话搞定有木有？)

BottomTabBar.initFragmentorViewPager(viewpager)

.setChangeColor(getResources().getColor(R.color.colorAccent), getResources().getColor(R.color.colorPrimary))

.addTabItem("草莓", getResources().getDrawable(R.mipmap.icon01), getResources().getDrawable(R.mipmap.icon_round))

.addTabItem("凤梨", getResources().getDrawable(R.mipmap.icon02), getResources().getDrawable(R.mipmap.icon_round))

.addTabItem("樱桃", getResources().getDrawable(R.mipmap.icon03), getResources().getDrawable(R.mipmap.icon_round))

.addTabItem("香蕉", getResources().getDrawable(R.mipmap.icon04), getResources().getDrawable(R.mipmap.icon_round))

.commit();

代码可配置参数方法：

参数名

描述

setImgSize

设置图片的尺寸

setFontSize

设置文字的尺寸

setTabPadding

设置Tab的padding值

setChangeColor

设置选中未选中的颜色

setTabBarBackgroundColor

设置BottomTabBar的整体背景颜色

setTabBarBackgroundResource

设置BottomTabBar的整体背景图片

isShowDivider

是否显示分割线

setDividerHeight

设置分割线的高度

setDividerColor

设置分割线的颜色

很简单，对不对，你想干什么，我都替你干。

划重点，这个initFragmentorViewPager ( getSupportFragmentManager() | ViewPager)方法一定要第一个调用，没有这个初始化，后边什么也做不了。

另外，上述实例的addTabItem是支持选中状态图片切换的方法，在此之外，还支持不需要切换图片的模式。

/**

* 添加TabItem

* @param name 文字

* @param imgId 图片id

* @return

*/

public BottomTabBar addTabItem(String name, int imgId)｛...｝

/**

* 添加TabItem

* @param name 文字

* @param imgId 图片id

* @param Fragmentclazz Fragment类

* @return

*/

public BottomTabBar addTabItem(String name, int imgId, Class Fragmentclazz)｛...｝

另外，考虑到在底部导航栏点击切换界面的需求之外的其他需求，BottomTabBar提供了点击事件的回调。

((BottomTabBar) findViewById(R.id.BottomTabBar))

.initFragmentorViewPager(getSupportFragmentManager())

.addReplaceLayout(R.id.fl_content)

.addTabItem("草莓", getResources().getDrawable(R.mipmap.icon01), getResources().getDrawable(R.mipmap.icon_round), FragmentA.class)

.addTabItem("凤梨", getResources().getDrawable(R.mipmap.icon02), getResources().getDrawable(R.mipmap.icon_round), FragmentB.class)

.addTabItem("樱桃", getResources().getDrawable(R.mipmap.icon03), getResources().getDrawable(R.mipmap.icon_round), FragmentC.class)

.addTabItem("香蕉", getResources().getDrawable(R.mipmap.icon04), getResources().getDrawable(R.mipmap.icon_round), FragmentD.class)

.setOnTabChangeListener(new BottomTabBar.OnTabChangeListener() {

@Override

public void onTabChange(int position, View V) {

Toast.makeText(FragmentActivity.this, "position:" + position, Toast.LENGTH_SHORT).show();

}

})

.commit();

项目代码概览：

获取xml配置样式 ：

public BottomTabBar(Context context, AttributeSet attrs) {

super(context, attrs);

this.context = context;

TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.BottomTabBar);

if (attributes != null) {

//图片宽度

imgWidth = attributes.getDimension(R.styleable.BottomTabBar_tab_img_width, dp2px(30));

//图片高度

imgHeight = attributes.getDimension(R.styleable.BottomTabBar_tab_img_height, dp2px(30));

//文字尺寸

fontSize = attributes.getDimension(R.styleable.BottomTabBar_tab_font_size, 14);

//上边距

paddingTop = attributes.getDimension(R.styleable.BottomTabBar_tab_padding_top, dp2px(2));

//图片文字间隔

fontImgPadding = attributes.getDimension(R.styleable.BottomTabBar_tab_img_font_padding, dp2px(3));

//下边距

paddingBottom = attributes.getDimension(R.styleable.BottomTabBar_tab_padding_bottom, dp2px(5));

//分割线高度

dividerHeight = attributes.getDimension(R.styleable.BottomTabBar_tab_divider_height, dp2px(1));

//是否显示分割线

isShowDivider = attributes.getBoolean(R.styleable.BottomTabBar_tab_isshow_divider, false);

//选中的颜色

selectColor = attributes.getColor(R.styleable.BottomTabBar_tab_selected_color, Color.parseColor("#F1453B"));

//未选中的颜色

unSelectColor = attributes.getColor(R.styleable.BottomTabBar_tab_unselected_color, Color.parseColor("#626262"));

//BottomTabBar的整体背景

tabBarBackgroundColor = attributes.getColor(R.styleable.BottomTabBar_tab_bar_background, Color.parseColor("#FFFFFF"));

//分割线背景

dividerBackgroundColor = attributes.getColor(R.styleable.BottomTabBar_tab_divider_background, Color.parseColor("#CCCCCC"));

attributes.recycle();

}

}

初始化View ：

private void initView() {

mLayout = (LinearLayout) LayoutInflater.from(context).inflate(R.layout.bottom_tab_bar, null);

LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);

mLayout.setLayoutParams(layoutParams);

mLayout.setBackgroundColor(tabBarBackgroundColor);

addView(mLayout);

mDivider = mLayout.findViewById(R.id.mDivider);

mTabContent = (LinearLayout) mLayout.findViewById(R.id.mTabContent);

if (isShowDivider) {

LayoutParams dividerParams = new LayoutParams(LayoutParams.MATCH_PARENT, (int) dividerHeight);

mDivider.setLayoutParams(dividerParams);

mDivider.setBackgroundColor(dividerBackgroundColor);

mDivider.setVisibility(VISIBLE);

} else {

mDivider.setVisibility(GONE);

}

}

ViewPager模式添加Tab ：

public BottomTabBar addTabItem(final String name, Drawable selectdrawable, Drawable unselectdrawable) {

selectdrawableList.add(selectdrawable);

unselectdrawableList.add(unselectdrawable);

LinearLayout TabItem = (LinearLayout) View.inflate(context, R.layout.tab_item, null);

TabItem.setGravity(Gravity.CENTER);

//设置TabItem标记

TabItem.setTag(name);

//添加标记至集合以作辨别

tabIdList.add(String.valueOf(TabItem.getTag()));

TabItem.setOnClickListener(this);

//Tab图片样式及内容设置

ImageView tab_item_img = (ImageView) TabItem.findViewById(R.id.tab_item_img);

tab_item_imgparams = new LayoutParams((int) imgWidth, (int) imgHeight);

tab_item_imgparams.topMargin = (int) paddingTop;

tab_item_imgparams.bottomMargin = (int) fontImgPadding;

tab_item_img.setLayoutParams(tab_item_imgparams);

//Tab文字样式及内容设置

TextView tab_item_tv = (TextView) TabItem.findViewById(R.id.tab_item_tv);

tab_item_tvparams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

tab_item_tvparams.bottomMargin = (int) paddingBottom;

tab_item_tv.setLayoutParams(tab_item_tvparams);

tab_item_tv.setTextSize(fontSize);

tab_item_tv.setText(name);

if (tabIdList.size() == 1) {

tab_item_tv.setTextColor(selectColor);

tab_item_img.setBackground(selectdrawable);

} else {

tab_item_tv.setTextColor(unSelectColor);

tab_item_img.setBackground(unselectdrawable);

}

TabItem.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, 1.0f));

mTabContent.addView(TabItem);

return this;

}

Fragment模式添加Tab ：

public BottomTabBar addTabItem(final String name, Drawable selectdrawable, Drawable unselectdrawable, Class fragmentClass) {

selectdrawableList.add(selectdrawable);

unselectdrawableList.add(unselectdrawable);

Class> clazz = null;

try {

clazz = Class.forName(fragmentClass.getName());

Fragment fragment = (Fragment) clazz.newInstance();

} catch (Exception e) {

e.printStackTrace();

}

FragmentList.add(fragmentClass);

LinearLayout TabItem = (LinearLayout) View.inflate(context, R.layout.tab_item, null);

TabItem.setGravity(Gravity.CENTER);

//设置TabItem标记

TabItem.setTag(name);

//添加标记至集合以作辨别

tabIdList.add(String.valueOf(TabItem.getTag()));

TabItem.setOnClickListener(this);

//Tab图片样式及内容设置

ImageView tab_item_img = (ImageView) TabItem.findViewById(R.id.tab_item_img);

tab_item_imgparams = new LayoutParams((int) imgWidth, (int) imgHeight);

tab_item_imgparams.topMargin = (int) paddingTop;

tab_item_imgparams.bottomMargin = (int) fontImgPadding;

tab_item_img.setLayoutParams(tab_item_imgparams);

//Tab文字样式及内容设置

TextView tab_item_tv = (TextView) TabItem.findViewById(R.id.tab_item_tv);

tab_item_tvparams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

tab_item_tvparams.bottomMargin = (int) paddingBottom;

tab_item_tv.setLayoutParams(tab_item_tvparams);

tab_item_tv.setTextSize(fontSize);

tab_item_tv.setText(name);

if (tabIdList.size() == 1) {

tab_item_tv.setTextColor(selectColor);

tab_item_img.setBackground(selectdrawable);

} else {

tab_item_tv.setTextColor(unSelectColor);

tab_item_img.setBackground(unselectdrawable);

}

TabItem.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, 1.0f));

mTabContent.addView(TabItem);

return this;

}

Fragment切换处理 ：

private void relaceFrament(int i) {

Class aClass = FragmentList.get(i);

Class> clazz = null;

try {

clazz = Class.forName(aClass.getName());

Fragment Fragment = (Fragment) clazz.newInstance();

android.support.v4.app.FragmentTransaction fragmentTransaction = mFragmentManager.beginTransaction();

fragmentTransaction.replace(mReplaceLayout, Fragment);

fragmentTransaction.commit();

} catch (Exception e) {

e.printStackTrace();

}

}

Tab点击事件处理 :

@Override

public void onClick(View v) {

for (int i = 0; i < tabIdList.size(); i++) {

if (tabIdList.get(i).equals(v.getTag())) {

if (mViewpager != null) {

//绑定ViewPager

mViewpager.setCurrentItem(i);

}

if (mFragmentManager != null) {

if (mReplaceLayout == 0) {

throw new IllegalStateException(

"Must input ReplaceLayout of mReplaceLayout");

}

relaceFrament(i);

changeTab(i);

}

//绑定点击监听回调

listener.onTabChange(i, v);

}

}

}

Tab选中更改样式 ：

private void changeTab(int position) {

if (position + 1 > mTabContent.getChildCount()) {

throw new IndexOutOfBoundsException("onPageSelected:" + (position + 1) +

"，of Max mTabContent ChildCount:" + mTabContent.getChildCount());

}

for (int i = 0; i < mTabContent.getChildCount(); i++) {

View TabItem = mTabContent.getChildAt(i);

if (i == position) {

((TextView) TabItem.findViewById(R.id.tab_item_tv)).setTextColor(selectColor);

if (!selectdrawableList.isEmpty())

TabItem.findViewById(R.id.tab_item_img).setBackground(selectdrawableList.get(i));

} else {

((TextView) TabItem.findViewById(R.id.tab_item_tv)).setTextColor(unSelectColor);

if (!selectdrawableList.isEmpty())

TabItem.findViewById(R.id.tab_item_img).setBackground(unselectdrawableList.get(i));

}

}

}

总结

代码整体满足了一句话搞定Android底部导航栏，一键绑定Fragment、ViewPager的功能，当然，

有了需求才有了功能，有了想法才有了创作，你的反馈会是使我进步的最大动力。

觉得还不够方便？还想要什么功能？告诉我！欢迎反馈，欢迎Star。源码入口：UseBottomTabBar-GitHub项目地址

孔昊旻
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ViewPager+TabLayout快速集成底部Tab栏+Fragment
famabb
03-12 668
        注明：基于ViewPager+TabLayout二次封装的库（可以自定义底部item，也可以使用自带）                                                                                使用条件:              依赖库: compile 'com.android.support:desig...
Android实战开发--底部导航（Fragment）篇
yunyanchengyu114的博客
01-08 5023
Fragment实现底部导航，Frament中onCreateView详解,控件id详解
【Android开发】TabLayout+fragment+ ViewPager2 实现通过tab切换页面
weixin_44794371的博客
12-15 3983
【Android开发】TabLayout+fragment+ ViewPager2 实现通过tab切换页面 1.组件以及包名 viewpager2使用的是Androidx下的，tablayout是使用google的，这两个组件在本项目中不需要引入新的依赖。 import androidx.viewpager2.widget.ViewPager2 import com.google.android.material.tabs.TabLayout; 2.xml代码 这里没有使用过多的属性。 <Linea
底部导航栏+ViewPager+Fragment
m0_55063896的博客
02-18 99
底部导航栏+ViewPager+Fragment点击切换实现
Android中的底部菜单框架（Fragment）
mypanlong的专栏
05-14 1078
今天，我将总结一下Android应用中大家经常见到的底部导航栏的几种实现！   一。TabHost + RadioGroup实现方式 在我们平时开发过程中使用的TabHost是在上方，这里我们简单修改了一下的布局,让叶片放到了底部。 main.xml view sourceprint? 01.xml version="1.0" encoding="utf-8"?
ViewPager&Fragment实现页面切换、底部导航栏
11-27
"ViewPager&Fragment实现页面切换、底部导航栏"是一个常见的设计模式，它提供了多页面间的平滑过渡和一个固定在屏幕底部的导航栏，使得用户可以轻松地在各个主要功能之间切换。下面我们将深入探讨这个主题，讲解如何...
安卓：ViewPager+Fragment+RadioButton实现底部菜单栏滑动切换
01-03
和ListView，GridView一样，我们也需要一个Adapter> (适配器)将我们的View和ViewPager进行绑定，而ViewPager则有一个特定的Adapter——> PagerAdapter！另外，Google官方是建议我们使用Fragment来填充ViewPager的，...
Android五分钟让你集成底部菜单栏(fragment与fragment+viewpager)
09-02
本教程将详细介绍如何在Android项目中集成使用Fragment和Fragment + ViewPager的底部菜单栏。 首先，理解Fragment是Android中的一个关键组件，它代表了界面的一部分，可以在Activity之间复用，提供了模块化设计的...
Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果
01-20
接下来，我们需要创建一个XML菜单文件（如`bottombar_menu.xml`），用于定义底部栏的各个选项： ```xml <menu xmlns:android="http://schemas.android.com/apk/res/android"> android:id="@+id/bb_menu_recents" ...
Android App 底部导航菜单栏demo_可自由滑动
11-24
本实例“Android App 底部导航菜单栏demo_可自由滑动”专注于实现一个类似微信主界面的交互效果，让用户能够通过自由滑动在各个页面间无缝切换。下面我们将深入探讨这一主题，包括相关的设计原则、实现技术以及如何...
android fragment 使用以及嵌套使用 底部菜单和顶部菜单
07-27
android fragment 使用以及嵌套使用 底部菜单和顶部菜单，类似微信和QQ的分页菜单
Android fragment制作微信菜单界面
09-30
用fragment做的一个仿微信菜单的demo，有兴趣的可以下载下来看着学习一下！
Android使用Fragment底部导航栏
08-11
Android使用Fragment底部导航栏
android fragment 导航栏,Fragment的应用之底部导航栏的实现（一）
weixin_39625337的博客
05-27 774
效果图废话少说，直接上效果图底部导航栏(一).gif最近因为实验室的一个项目要大改，一直没时间来学习学习新的东西写篇博客，不过断断续续花了两周的时间总算是把项目弄好了。这篇博客主要是一周前写的Fragment的后续，都知道现在主流APP基本都会有底部导航栏，比如微信，微博，虎扑什么的无一例外使用了底部导航的设计。本博客所记录的底部导航的实现可能在目前的实际应用中的应用价值不大，这里主要是为了巩固F...
底部菜单栏之Fragment的详细介绍和使用方法
onceNews的博客
11-21 234
底部菜单栏之Fragment的详细介绍和使用方法 ： http://blog.csdn.net/loongggdroid/article/details/9366413
android 底部view,Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果
weixin_28685483的博客
05-26 227
BottomBarBottomBar是Github上的一个开源框架，因为从1.3.3开始不支持fragments了，要自己配置，弄了很久，不管是app的fragment还是V4 的程序总是总是闪退。于是就用这种方式实现了，效果还不错。github有详细说明，多余的就不说了。这个roughike是这个项目的所有者(大神致敬)。我用的是Android studio开发，fragment全部导的V4的包...
我的首个电子书软件--嘎嘎读书 的开发（三）
gagaprince的代码世界
12-10 1247
接上篇，这篇文章接着介绍书架页，不过
新旧版本的ViewPager问题
weixin_43979805的博客
11-20 260
今天在做一个关于Banner横幅时遇到这么一个问题 E/AndroidRuntime: FATAL EXCEPTION: main Process: com.example.wb.myshoppingmall, PID: 27854 android.view.InflateException: Binary XML file line #8 in com.example.wb.myshoppingmall:layout/banner_viewpager: Binary XML file li
android底部导航栏viewpager+fragment
最新发布
11-14
总的来说，底部导航栏、ViewPager和Fragment的结合使用可以让我们实现一个具有多个页面切换功能的Android应用，并且可以在不同的页面中展示不同的内容和功能模块，提高用户的操作便利性和应用的整体体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值