Android使用Fragment实现简单底部导航栏

以两个页面为实例:个人中心和首页

一、首先创建两个页面

fragment_center.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/index_txt"
        android:text="这是一个个人中心"
        android:gravity="center"
        />

</LinearLayout>

fragment_index.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/index_txt"
        android:text="这是一个首页"
        android:gravity="center"
        />
</LinearLayout>

再创建一个底部页面

fragment_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@color/black"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button

        android:id="@+id/btn_index"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="首页"
        android:layout_weight="1"/>
    <Button
        android:id="@+id/btn_center"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="个人中心"
        android:layout_weight="1"/>


</LinearLayout>

这里放置两个按钮分别切换fragment

分别创建三个Fragment类

BottomFragment

package com.example.myapplication;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class IndexFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_index,container,false);
    }
}

CenterFragment

package com.example.myapplication;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class CenterFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_center,container,false);
    }
}

IndexFragment

package com.example.myapplication;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class IndexFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_index,container,false);
    }
}

因为都是Fragment所以要继承自Fragment类，并且重写onCreateView方法
使用布局加载器去绑定相应的布局文件

编写布局文件

R.layout.activity_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--Fragment加载后会替换掉FrameLayout-->
    <FrameLayout
        android:layout_weight="10"
        android:id="@+id/test_frame"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        />

    <fragment
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:name="com.example.myapplication.BottomFragment"
        android:id="@+id/bottom_frag"/>

</LinearLayout>

编写MainActivity代码

package com.example.myapplication;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.annotation.SuppressLint;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    Button btn_index,btn_center;
    List<Button> buttons = new ArrayList<>();
    @SuppressLint("MissingInflatedId")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        button2 = findViewById(R.id.btn_index);
        btn_index= findViewById(R.id.btn_center);
        //这边利用数组存放按钮 以便更改颜色
        buttons.add(btn_index);
        buttons.add(btn_center);
        btn_center.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                setCheckedColor(btn_center);
                changeFragment(new IndexFragment());
            }
        });
        btn_index.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                setCheckedColor(btn_index);
                changeFragment(new CenterFragment());
            }
        });
    }

	//设置选中的颜色 先把选中的按钮移除 将所有没有选中的按钮进行颜色替换 最后把按钮加回去
     private void setCheckedColor(Button button) {
        button.setBackgroundColor(Color.parseColor("#6495ED"));
        buttons.remove(button);
        for (Button button1 :buttons) {
            button1.setBackgroundColor(Color.parseColor("#0005ED"));
        }
        buttons.add(button);
    }

	//变更Fragment方法
    private void changeFragment (Fragment fragment) {
    	//利用getSupportFragmentManager()方法获取到实例
        FragmentManager fragmentManager = getSupportFragmentManager();.
        //开启碎片的事务
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        //替换
        transaction.replace(R.id.test_frame, fragment);
        //按back键可以退回 而不是退出Activity
        transaction.addToBackStack(null);
        //事务保存变更
        transaction.commit();
    }
}