Android Studio App开发之实现底部标签栏BottomNavigationView和自定义标签按钮实战(附源码 超详细必看)
创始人
2024-04-07 20:09:53
0

需要全部源码请点赞关注收藏后评论区留言~~~

一、利用BottomNavigatiomView实现底部标签栏

不管是微信还是QQ,它们的首屏都在底部展开一栏标签,每个标签对应着一个频道,从而方便用户迅速切换到对应频道。

标签页面主要由两个组成部分

1:一个是位于底部的底部导航视图

2:另一个是位于其上占据剩余屏幕的碎片fragment

每个fragment节点拥有以下四个属性

1:id 指定当前碎片的编号

2:name 指定当前碎片的完整类名路径

3:label 指定当前碎片的标题文本

4:layout 指定当前碎片的布局文件

效果如下

 

代码如下

Java类 

package com.example.chapter12;import android.os.Bundle;import com.google.android.material.bottomnavigation.BottomNavigationView;import androidx.appcompat.app.AppCompatActivity;
import androidx.navigation.NavController;
import androidx.navigation.Navigation;
import androidx.navigation.ui.AppBarConfiguration;
import androidx.navigation.ui.NavigationUI;import com.example.chapter12.databinding.ActivityTabNavigation2Binding;public class TabNavigationActivity extends AppCompatActivity {private ActivityTabNavigation2Binding binding;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);binding = ActivityTabNavigation2Binding.inflate(getLayoutInflater());setContentView(binding.getRoot());BottomNavigationView navView = findViewById(R.id.nav_view);// Passing each menu ID as a set of Ids because each// menu should be considered as top level destinations.AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(R.id.navigation_home, R.id.navigation_dashboard, R.id.navigation_notifications).build();NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment_activity_tab_navigation2);NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);NavigationUI.setupWithNavController(binding.navView, navController);}}

XML文件如下


二、自定义标签按钮

一般应用的APP下方都会有标签按钮,每个按钮的图标和文字都会随着选中而高亮显示

 整合后效果如下

 代码如下

Java类

package com.example.chapter12;import android.os.Bundle;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.TextView;import androidx.appcompat.app.AppCompatActivity;public class TabButtonActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_tab_button);final TextView tv_select = findViewById(R.id.tv_select);CheckBox ck_tab = findViewById(R.id.ck_tab);// 给复选框设置勾选监听器ck_tab.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {if (buttonView.getId() == R.id.ck_tab) {String desc = String.format("标签按钮被%s了", isChecked?"选中":"取消选中");tv_select.setText(desc);}}});}}

XML文件


三、结合RadioGroup和ViewPager自定义底部标签栏

因为Android默认定义好的标签样式风格不方便另行调整,况且它也不支持通过左右滑动切换标签,因此如果我们想实现拥有更多花样的标签栏,就需要自己定义专门的底部标签栏了

效果如下

代码如下

Java类

package com.example.chapter12;import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;import com.example.chapter12.adapter.TabPagerAdapter;public class TabPagerActivity extends AppCompatActivity {private ViewPager vp_content; // 声明一个翻页视图对象private RadioGroup rg_tabbar; // 声明一个单选组对象@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_tab_pager);vp_content = findViewById(R.id.vp_content); // 从布局文件获取翻页视图// 构建一个翻页适配器TabPagerAdapter adapter = new TabPagerAdapter(getSupportFragmentManager());vp_content.setAdapter(adapter); // 设置翻页视图的适配器// 给翻页视图添加页面变更监听器vp_content.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {@Overridepublic void onPageSelected(int position) {// 选中指定位置的单选按钮rg_tabbar.check(rg_tabbar.getChildAt(position).getId());}});rg_tabbar = findViewById(R.id.rg_tabbar); // 从布局文件获取单选组// 设置单选组的选中监听器rg_tabbar.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {for (int pos=0; pos

适配器类

package com.example.chapter12.adapter;import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;import com.example.chapter12.fragment.TabFirstFragment;
import com.example.chapter12.fragment.TabSecondFragment;
import com.example.chapter12.fragment.TabThirdFragment;public class TabPagerAdapter extends FragmentPagerAdapter {// 碎片页适配器的构造方法,传入碎片管理器public TabPagerAdapter(FragmentManager fm) {super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);}// 获取指定位置的碎片Fragment@Overridepublic Fragment getItem(int position) {if (position == 0) {return new TabFirstFragment();  // 返回第一个碎片} else if (position == 1) {return new TabSecondFragment();  // 返回第二个碎片} else if (position == 2) {return new TabThirdFragment();  // 返回第三个碎片} else {return null;}}// 获取碎片Fragment的个数@Overridepublic int getCount() {return 3;}
}

XML文件

创作不易 觉得有帮助请点赞关注收藏~~~

相关内容

热门资讯

北京市房屋建筑使用安全条例 北京市人民代表大会常务委员会公告 〔十六届〕第46号 《北京市房屋建筑使用安全条例》已由北京市第十六...
吉比特(603444)披露制定... 截至2025年12月29日收盘,吉比特(603444)报收于423.52元,较前一交易日下跌2.3%...
《北京市房屋建筑使用安全条例》... 《北京市房屋建筑使用安全条例》(以下简称《条例》)已由北京市第十六届人民代表大会常务委员会第二十次会...
股市必读:ST葫芦娃因涉嫌违反... 截至2025年12月29日收盘,ST葫芦娃(605199)报收于8.41元,下跌4.97%,换手率0...
公告精选 | 赣锋锂业涉嫌内幕... 风险提示 天箭科技(002977.SZ):公司相关军品2025年度进行了价格审核,与客户签订了《军品...
如何避免夫妻共同债务纠纷 有纠... 夫妻共同债务纠纷是婚姻破裂时的高发矛盾,会涉及日常借贷、经营投资等多重场景。那如何避免夫妻共同债务纠...
旋极信息:将持续关注海南自贸区... 有投资者在互动平台向旋极信息提问:“请问在海自贸区有那些业务布局?” 针对上述提问,旋极信息回应称:...
财经不烧脑 | 信用修复政策来... 你是不是也有这样的烦恼?就一次忘了还钱,金额可能也不大,结果征信报告上“挂”了整整五年!房贷、车贷、...
涉绑架杀害中国公民 犯罪嫌疑人... 中国青年报客户端北京12月29日电(中青报·中青网记者 何春中)记者今天从公安部获悉,公安部近日派出...
恒誉环保(688309)披露关... 截至2025年12月29日收盘,恒誉环保(688309)报收于23.88元,较前一交易日上涨2.58...