使用fragment实现底部导航菜单栏

最新推荐文章于 2024-04-24 21:44:27 发布

ChristieLi

最新推荐文章于 2024-04-24 21:44:27 发布

阅读量2.6k

点赞数 5

分类专栏： android

本文链接：https://blog.csdn.net/lz050116/article/details/107191881

版权

android 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在实现这个功能的过程中，走了很多的弯路，也花费了较长的时间，作为一个新手，实现这个功能的过程中，分了几个步骤进行尝试，首先是会使用fragment，这个见另一篇博文：了解与使用fragment，链接：https://blog.csdn.net/lz050116/article/details/107191940，然后是了解hide()、add()、replace()、show()等方法的使用，最后写相应的逻辑，实现底部导航菜单栏的切换。

1.编写fragment的布局文件

我写了两个布局文件，分别为fragment_apps和fragment_me。

1.1布局文件—fragment_apps.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/fragment_apps"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".activity.FragmentApps">

    <!-- TODO: Update blank fragment layout -->
    <!-- 辅助线 -->
    <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline_left"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintGuide_begin="24dp"/>
    <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline_right"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintGuide_end="24dp"/>

    <!-- 图标 产品管理 -->
    <com.christieli.automaintenancemanagement.view.IconView
            android:id="@+id/product_manager"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/product"
            android:textSize="@dimen/text_size_icon_large"
            android:textColor="@color/poolblue"
            android:paddingTop="@dimen/margin_middle"
            app:layout_constraintLeft_toLeftOf="@id/guideline_left"
            tools:ignore="MissingConstraints"/>
    <TextView
            android:id="@+id/product_manager_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="产品管理"
            android:textSize="@dimen/text_size_min"
            android:textColor="@color/colorTextBlack"
            android:layout_marginTop="@dimen/margin_min"
            app:layout_constraintLeft_toLeftOf="@+id/product_manager"
            app:layout_constraintRight_toRightOf="@+id/product_manager"
            app:layout_constraintTop_toBottomOf="@+id/product_manager"
            tools:ignore="DuplicateIds"/>
</androidx.constraintlayout.widget.ConstraintLayout>

注：我的布局文件中一共有8个类似于product_manager的图标

1.2布局文件—fragment_me.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        android:id="@+id/fragment_me"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical"
        android:gravity="top|center_horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".activity.FragmentMe">

    <!-- 顶部基础信息栏 -->
    <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/me_information"
            android:layout_width="match_parent"
            android:layout_height="96dp"
            android:background="@color/colorPrimary"
            tools:ignore="MissingConstraints">
        <ImageView
                android:id="@+id/me_image"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:background="@color/line"
                app:layout_constraintLeft_toLeftOf="@+id/me_information"
                app:layout_constraintTop_toTopOf="@+id/me_information"
                android:layout_marginLeft="24dp"
                android:layout_marginTop="24dp"
                android:contentDescription="@string/arrows_right_icon"/>
</LinearLayout>

注：还有一些其他的组件，不一一列出

1.2布局文件—activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <include layout="@layout/title_bar"/>
    <include layout="@layout/tool_bar"/>
    <fragment

              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              app:layout_constraintTop_toBottomOf="@+id/title_bar"
              android:name="com.christieli.automaintenancemanagement.activity.FragmentApps"
              tools:ignore="MissingConstraints"/>
    <FrameLayout
              android:id="@+id/fragment_container"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              app:layout_constraintTop_toBottomOf="@+id/title_bar"
              tools:ignore="MissingConstraints"/>
</androidx.constraintlayout.widget.ConstraintLayout>

2.编写FragmentApps.java和FragmentMe.java

两个文件是一致的，故我只列出其中一个：

import android.os.Bundle;
        import androidx.fragment.app.Fragment;
        import android.view.LayoutInflater;
        import android.view.View;
        import android.view.ViewGroup;
       import com.christieli.automaintenancemanagement.R;
       
public class FragmentApps extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_apps, container, false);
    }
}

3.更改MainActivity.java

MainActivity.java代码如下：

import android.view.View;
import android.os.Bundle;
import android.widget.TextView;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import com.christieli.automaintenancemanagement.activity.FragmentApps;
import com.christieli.automaintenancemanagement.activity.FragmentMe;
import com.christieli.automaintenancemanagement.view.IconView;


public class MainActivity extends FragmentActivity implements View.OnClickListener {
    private Fragment mFragmentApps;
    private Fragment mFragmentMe;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mFragmentApps = new FragmentApps();
        // getSupportFragmentManager()：获取Fragment的管理对象
        // beginTransaction()：开始一个事务
        // add()：加入一个事务，将fragment加入到对应的位置
        // commit()：提交
        getSupportFragmentManager().beginTransaction().add(R.id.fragment_container, mFragmentApps).commit();

        IconView appsIcon = findViewById(R.id.apps_icon);
        TextView appsText = findViewById(R.id.apps_text);
        IconView meIcon = findViewById(R.id.me_icon);
        TextView meText = findViewById(R.id.me_text);
        appsIcon.setOnClickListener(this);
        appsText.setOnClickListener(this);
        meIcon.setOnClickListener(this);
        meText.setOnClickListener(this);
    }
    
    public void onClick(View v) {
        // 隐藏所有Fragment
        hideAllFragment();
        switch (v.getId()) {
            // 点击图标显示对应的Fragment
            case R.id.apps_icon:
            case R.id.apps_text:
                if (mFragmentApps == null) {
                    mFragmentApps = new FragmentApps();
                    getSupportFragmentManager().beginTransaction().add(R.id.fragment_container, mFragmentApps).commit();
                } else {
                    getSupportFragmentManager().beginTransaction().show(mFragmentApps).commit();
                }
                break;
            case R.id.me_icon:
            case R.id.me_text:
                if (mFragmentMe == null) {
                    mFragmentMe = new FragmentMe();
                    getSupportFragmentManager().beginTransaction().add(R.id.fragment_container, mFragmentMe).commit();
                } else {
                    getSupportFragmentManager().beginTransaction().show(mFragmentMe).commit();
                }
                break;
            default:
                break;
        }
    }

    // 隐藏所有Fragment
    private void hideAllFragment() {
        if (mFragmentApps != null) {
            // hide()：隐藏fragment
            getSupportFragmentManager().beginTransaction().hide(mFragmentApps).commit();
        }
        if (mFragmentMe != null) {
            getSupportFragmentManager().beginTransaction().hide(mFragmentMe).commit();
        }
    }
}