Android底部导航栏的实现（RadioGroup和Fragment结合使用）

首页预览：
在这里插入图片描述
工程目录：

HomeFragment(首页Fragment)

package com.example.nav4;

import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class HomeFragment extends Fragment {
    private static HomeFragment mf;
    public static HomeFragment getMessageFragment()
    {
        if(mf == null){
            mf = new HomeFragment();
        }
        return mf;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_home ,container, false);
        return view;
    }
}

MainActivity

package com.example.nav4;

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

import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;

public class MainActivity extends AppCompatActivity {
    private RadioGroup rg;

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

        rg=findViewById(R.id.rg_main);
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                for (int i = 0;i<rg.getChildCount();i++){
                    RadioButton rb = (RadioButton)group.getChildAt(i);
                    if(rb.isChecked()){
                        setIndexSelected(i);
                        break;
                    }
                }
            }
        });
        setIndexSelected(0);
    }

    //开启事务，加载fragment布局
    private void changeFragment(Fragment fragment)
    {
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.replace(R.id.fragment , fragment);
        transaction.commit();
    }

    //通过index判断当前加载哪个界面
    public void setIndexSelected(int index)
    {
        switch (index)
        {
            case 0:
                changeFragment(new HomeFragment());
                break;
            case 1:
                changeFragment(new ShieldFragment());
                break;
            case 2:
                changeFragment(new SearchFragment());
                break;
            case 3:
                changeFragment(new PersonFragment());
                break;
            default:
                break;
        }
    }
}

PersonFragment(个人Fragment)

package com.example.nav4;

import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class PersonFragment extends Fragment {
    private static PersonFragment mf;
    public static PersonFragment getMessageFragment()
    {
        if(mf == null){
            mf = new PersonFragment();
        }
        return mf;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_person ,container, false);
        return view;
    }
}

SearchFragment(搜索Fragment)

package com.example.nav4;

import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class SearchFragment extends Fragment {
    private static SearchFragment mf;
    public static SearchFragment getMessageFragment()
    {
        if(mf == null){
            mf = new SearchFragment();
        }
        return mf;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_search ,container, false);
        return view;
    }
}

ShieldFragment(护盾Fragment)

package com.example.nav4;

import android.content.Context;
import android.net.Uri;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ShieldFragment extends Fragment {
    private static ShieldFragment mf;
    public static ShieldFragment getMessageFragment()
    {
        if(mf == null){
            mf = new ShieldFragment();
        }
        return mf;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_shield ,container, false);
        return view;
    }
}

drawable文件夹内的home.png，home2.png分别为首页未激活和首页激活后的png图标，请自行添加这八个图标，建议图标大小为48*48px
nav_draw_home.xml(首页按钮的布局文件，设置图标选中和未选中分别对应哪个图标)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/home2" android:state_pressed="true" />
    <item android:drawable="@drawable/home2" android:state_checked="true" />
    <item android:drawable="@drawable/home" />
</selector>

nav_draw_person.xml等三个文件参考如上

activity_main.xml(应用启动后进入的布局)

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.nav4.MainActivity">

    <FrameLayout
        android:id="@+id/fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="90dp">

    </FrameLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_above="@+id/ll_main_radio"
        android:background="@color/colorPrimary"/>

    <LinearLayout
        android:id="@+id/ll_main_radio"
        android:layout_width="match_parent"
        android:layout_height="85dp"
        android:background="@color/nav_bgColor"
        android:layout_alignParentBottom="true"
        android:paddingTop="0dp">

        <RadioGroup
            android:id="@+id/rg_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <RadioButton
                android:id="@+id/rb_main"
                style="@style/nav_style"
                android:checked="true"
                android:drawableTop="@drawable/nav_draw_home"
                android:text="@string/nav_home"/>

            <RadioButton
                android:id="@+id/rb_message"
                style="@style/nav_style"
                android:drawableTop="@drawable/nav_draw_shield"
                android:text="@string/nav_shield"/>

            <RadioButton
                android:id="@+id/rb_find"
                style="@style/nav_style"
                android:drawableTop="@drawable/nav_draw_search"
                android:text="@string/nav_search"/>

            <RadioButton
                android:id="@+id/rb_my"
                style="@style/nav_style"
                android:drawableTop="@drawable/nav_draw_person"
                android:text="@string/nav_person"/>

        </RadioGroup>
    </LinearLayout>
</RelativeLayout>

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HomeFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        style="@style/fragment_style"
        android:text="@string/home_fragment" />

</FrameLayout>

fragment_person.xml等三个文件参考如上

colors.xml(@引用的颜色xml)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#A0A0A0</color>
    <color name="colorPrimaryDark">#80CBC4</color>
    <color name="colorAccent">#29B6F6</color>
    <color name="nav_bgColor">#99F1F1F1</color>
</resources>

strings.xml(文字国际化xml。老师上课讲的一个概念，大概意思就是等应用上线海外后可在此处将标签内的中文替换为其它语言来实现翻译)

<resources>
    <string name="app_name">nav4</string>
    <string name="nav_home">首页</string>
    <string name="nav_shield">护盾</string>
    <string name="nav_search">搜索</string>
    <string name="nav_person">个人</string>
    <string name="home_fragment">我是首页Fragment</string>
    <string name="shield_fragment">我是护盾Fragment</string>
    <string name="search_fragment">我是搜索Fragment</string>
    <string name="person_fragment">我是个人Fragment</string>
</resources>

styles.xml(@引用的样式xml)

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="nav_style">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">85dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:gravity">center</item>
        <item name="android:button">@null</item>
        <item name="android:width">40sp</item>
        <item name="android:height">40sp</item>
        <item name="android:textColor">@color/colorPrimary</item>
    </style>
    <style name="fragment_style">
        <item name="android:textSize">30sp</item>
        <item name="android:gravity">center</item>
    </style>

</resources>

在这里插入图片描述

Android底部导航栏的实现（RadioGroup和Fragment结合使用）

猜你喜欢