Fragment实现底部导航栏，TabLayout实现顶部导航栏，二者相互嵌套完成App基本布局框架，Fragment间可左右滑动切换

最新推荐文章于 2024-07-26 21:24:56 发布

Devilamaycry

最新推荐文章于 2024-07-26 21:24:56 发布

阅读量5.4k

点赞数 8

分类专栏： Android Android-UI 文章标签： android ui

本文链接：https://blog.csdn.net/qq_43502987/article/details/109087595

版权

本文介绍了如何使用Fragment和TabLayout构建App的基本布局框架，包括底部导航栏和顶部导航栏的实现，以及Fragment间的左右滑动切换。详细讲述了在MainActivity中添加控件和代码控制，菜单及导航文件的创建，以及底部导航栏与Fragment的绑定。此外，还阐述了如何在目标Fragment中实现顶部导航栏的切换和左右滑动效果。

摘要由CSDN通过智能技术生成

一前言

以目前市场上的大多数App布局框架为样例，本文演示其框架布局是如何完成的,如果想要熟悉应用该布局框架，首先应至少了解以下两个核心要素：Fragment 和 Tablayout 的相关概念。

二目录

1.Fragment实现底部导航栏

layout布局
MainActivity代码控制
在res目录下创建menu目录，创建menu.xml文件
在res目录下创建navigation目录，创建mobile_navigation.xml文件
如何完成底部导航栏和对应的fragment进行一一对应绑定

2.Tab页签实现顶部导航栏切换并实现左右滑动效果

在目标fragment的布局文件中加入相应的控件
实现左右滑动效果

三实现

1.在Fragment依托的主活动中加入相关控件以及代码控制

我们把MainActivity作为所有Fragment所依托的活动，因此我们首先需要在MainActivity的布局文件中加入相应控件，然后在MainActivity的主活动代码中进行控制。

（1）layout布局

我们可以看到MainActivity中主要有两个控件，BottomNavigationView 主要是用于底部的导航展示，而 fragment 则是用于放置我们的目标 fragment，我们知道在 fragment 中是可以启动另一个fragment的，就像套娃一样。同时我们必须注意 BottomNavigationView 控件中的 app:menu="@menu/bottom_nav_menu"元素，我们需要创建menu目录来确定我们底部导航栏具体应该有几个分类。在fragment控件中的 app:navGraph="@navigation/mobile_navigation" 元素用于绑定我们需要的fragment。所以我们需要在res目录下创建menu目录，创建menu.xml文件，同时创建navigation目录，创建mobile_navigation.xml文件。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?attr/actionBarSize">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@id/nav_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation" />

</androidx.constraintlayout.widget.ConstraintLayout>

（2）MainActivity代码控制

public class MainActivity extends AppCompatActivity {
   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
   
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        BottomNavigationView nav