博客
关于我
BottomNavigationView+Fragment实现底部导航栏(包含源码)
阅读量:684 次
发布时间:2019-03-17

本文共 4426 字,大约阅读时间需要 14 分钟。

在Android开发中,通过Fragment与BottomNavigationView实现底部导航栏是一种常见的布局方式。本文将从创建项目、设置导航栏内容到实现页面切换的过程详细说明,帮助开发者轻松构建有底部导航栏的Fragment应用。

一、准备工作

首先,确保项目中已经正确配置了Android支持库。Oak中,添加以下依赖项确保版本与现有项目一致:

implementation 'com.android.support:design:28.0.0'
implementation 'com.android.support:support-vector-drawable:28.0.0'

接下来,创建或者重复使用名为menu的资源文件夹,并在其中添加底部导航栏对应的菜单文件navigation.xml。在菜单文件中,定义各导航选项的显示内容,例如:

二、创建主布局

下一步,创建主布局文件start_for_fragment.xml。在布局文件中,添加占位布局和底部导航栏。例代码如下:

这里,LinearLayout用于占位,BottomNavigationView控制底部导航栏的显示内容。

三、添加切换页面的Fragment

为实现页面切换功能,需要创建三组Fragment对应底部导航栏的每个选项。以fragment1.xml为例,示例代码如下:

类似地,分别创建fragment2.xmlfragment3.xml

四、实现Fragment切换逻辑

创建Fragment类并加载相应布局文件。以Fragment1.java为例:

package mystudy.kjpc.fragement;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment1 extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment1, container, false);
return view;
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
}
}

继续创建导航活动类StartForFActivity.java,实现Fragment的切换功能。代码示例如下:

package mystudy.kjpc.fragement;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
public class StartForFActivity extends AppCompatActivity {
private BottomNavigationView bottomNavigationView;
private Fragment1 fragment1;
private Fragment2 fragment2;
private Fragment3 fragment3;
private Fragment[] fragments;
private int lastFragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.start_for_framment);
initFragment();
}
private void initFragment() {
fragment1 = new Fragment1();
fragment2 = new Fragment2();
fragment3 = new Fragment3();
fragments = new Fragment[]{fragment1, fragment2, fragment3};
lastFragment = 0;
getSupportFragmentManager().beginTransaction()
.replace|R.id.lin_lay_fragment
, fragment1)
.show(fragment1)
.commit();
bottomNavigationView = findViewById(R.id.bnv);
bottomNavigationView.setOnNavigationItemSelectedListener(changeFragment);
}
private BottomNavigationView.OnNavigationItemSelectedListener changeFragment = new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.home_page:
if (lastFragment != 0) {
switchFragment(lastFragment, 0);
lastFragment = 0;
}
return true;
case R.id.setting:
if (lastFragment != 1) {
switchFragment(lastFragment, 1);
lastFragment = 1;
}
return true;
case R.id.mycenter:
if (lastFragment != 2) {
switchFragment(lastFragment, 2);
lastFragment = 2;
}
return true;
}
return false;
}
};
private void switchFragment(int lastFragment, int index) {
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
transaction.hide(fragments[lastFragment]);
if (!fragments[index].isAdded()) {
transaction.add(R.id.lin_lay_fragment, fragments[index]);
}
transaction.show(fragments[index])
.commitAllowingStateLoss();
}
}

五、集成完成

到这里,底部导航栏和Fragment切换功能均已完成。运行项目,点击导航栏各选项即可切换显示不同的 Fragment内容。

整个实现过程注重细节,通过合理配置和灵活扩展,能够快速集成满足需求的功能模块。

转载地址:http://vvjhz.baihongyu.com/

你可能感兴趣的文章
Nginx upstream性能优化
查看>>
Nginx 中解决跨域问题
查看>>
nginx 代理解决跨域
查看>>
Nginx 动静分离与负载均衡的实现
查看>>
Nginx 反向代理 MinIO 及 ruoyi-vue-pro 配置 MinIO 详解
查看>>
nginx 反向代理 转发请求时,有时好有时没反应,产生原因及解决
查看>>
Nginx 反向代理解决跨域问题
查看>>
Nginx 反向代理配置去除前缀
查看>>
nginx 后端获取真实ip
查看>>
Nginx 多端口配置和访问异常问题的排查与优化
查看>>
Nginx 如何代理转发传递真实 ip 地址?
查看>>
Nginx 学习总结(16)—— 动静分离、压缩、缓存、黑白名单、性能等内容温习
查看>>
Nginx 学习总结(17)—— 8 个免费开源 Nginx 管理系统,轻松管理 Nginx 站点配置
查看>>
Nginx 学习(一):Nginx 下载和启动
查看>>
nginx 常用指令配置总结
查看>>
Nginx 常用配置清单
查看>>
nginx 常用配置记录
查看>>
nginx 开启ssl模块 [emerg] the “ssl“ parameter requires ngx_http_ssl_module in /usr/local/nginx
查看>>
Nginx 我们必须知道的那些事
查看>>
Nginx 的 proxy_pass 使用简介
查看>>