FrameLayout+RadioGroup做导航栏（不适用Viewpager+Fragment+tablayout）

先看效果

这里说一下为什么不使用简单的tablayout+viewpager+fragment 这里我想大家都知道我们在使用viewpager的时候viewpager会有预加载的功能！这个预加载如果要使用懒加载的话比较麻烦，所以这里我先使用framelayout先给大家介绍一下。

接下来教大家如何通过FrameLayout布局实现这种导航栏

1、先在我们AS的项目目录寻找到我们的values文件，在values文件中我们创建一个 style.xml 文件文件创建完成之后我们在把这个代码复制到我们的style.xml里边。

   <style name="fragment">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:padding">5dp</item>
        <item name="android:gravity">center</item>
        <item name="android:textColor">@drawable/rb_text_color</item>
        <item name="android:textSize">10dp</item>
        <item name="android:textStyle">normal</item>
        <item name="android:background">@null</item> <!-- 移除背景 -->
    </style>

文件创建好之后我们在项目的darwable文件里边创建一个xml文件 这个xml文件可以随意起个名称 这里我的名称 rb_home_selector.xml 而这个rb_home_selector 这个文件有什么作用呢？

解答：这个文件就是我们导航栏底部的选中和非选中状态的导航栏设置

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" >
        <layer-list>
            <item android:drawable="@drawable/icon_main_tab_home_selected" android:width="24dp" android:height="24dp"/>
        </layer-list>
    </item>
    <item>
        <layer-list>
            <item  android:drawable="@drawable/icon_main_tab_home_normal" android:width="24dp" android:height="24dp"/>
        </layer-list>
    </item>
</selector>

然后我们在这个目录里在继续创建第二个xml文件也就是我们的第二个radiobutton的选择 这个文件创建命名为 rb_mine_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <layer-list>
            <item  android:drawable="@drawable/icon_main_tab_my_selected" android:width="24dp" android:height="24dp"/>
        </layer-list>
    </item>
    <item >
        <layer-list>
            <item android:drawable="@drawable/icon_main_tab_my_normal"  android:width="24dp" android:height="24dp"/>
        </layer-list>
    </item>
</selector>

接下来我们来到第三步，创建字体选择和非选择文字的字体颜色这个文件是在我们之前创建的style.xml里边引用的 这个文件名称跟着你style.xml命名，我之前命名为 rb_text_color 所以这个文件我命名为 rb_text_color.xml 也同样是在我们项目的drawable文件夹里边

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="#1296db"/>
    <item android:color="#808080"/>
</selector>

以上里边的代码加载图片和颜色都可以根据你们的项目需求来修改，也可以设置radiobutton的图片大小这个根据UI设定的来设置

接下来就是重中之重，我们的UI界面和Java代码。

接下来就是创建我们的UI了 我们可以在我们的 acrivity_main.xml进行布局绘制请看如下代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:id="@+id/fragment_layout"
        android:layout_weight="1" />
<View
    android:layout_width="match_parent"
    android:background="#3D3D3D3D"
    android:layout_height="1dp"/>
    <RadioGroup
        android:id="@+id/rg_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rb_home"
            style="@style/fragment"
            android:layout_width="0dp"
            android:gravity="center"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:button="@null"
            android:drawableTop="@drawable/rb_home_selector"
            android:text="首页"
            android:textSize="14sp"
            />
<View
    android:layout_width="1dp"
    android:background="#3D3D3D3D"
    android:layout_height="match_parent"/>
        <RadioButton
            android:id="@+id/rb_min"
            style="@style/fragment"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:button="@null"
            android:textSize="14sp"
            android:gravity="center"
            android:drawableTop="@drawable/rb_mine_selector"
            android:text="我的"/>
    </RadioGroup>

</LinearLayout>

UI代码你们可以无脑复制，然后修改为你们项目中的UI界面样式来修改，当然如果你们想熟练掌握的话也可以自己手敲。

温馨小提示：
在我们创建多个Fragment文件我们可以通过AS来创建我们的FrameLayout，点击我们AS的File ----> New—>找到Fragment然后选择Fragment(Blank)然后输入我们Fragment名称创建就行了，我这里创建的两个fragment分别是 HomeFragment 和 MinFragment 创建完成之后 我们只需要保留fragment代码里的 onCreateView就行了 先看如下代码：

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

所以我这里是做了修改的 之前的是 return inflater.inflate(R.layout.fragment_min, container, false); 我这里给了一个返回值View return view就行了；

接下来就是我们的Java代码

public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {

    private RadioGroup rgp;
    private RadioButton home;
    private RadioButton min;
    private List<Fragment> fragments;
    private int position;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        this.getSupportActionBar().hide();//去除标题栏
        rgp = findViewById(R.id.rg_group);
        home = findViewById(R.id.rb_home);
        min = findViewById(R.id.rb_min);
        home.setSelected(true);

        rgp.setOnCheckedChangeListener(this);
        initFragment();
        defaultFragment();
    }

    private void initFragment() {
        fragments = new ArrayList<>();
        fragments.add(new HomeFragment());
        fragments.add(new MinFragment());
    }

    private void defaultFragment() {
        FragmentManager fmg = getSupportFragmentManager();
        FragmentTransaction fransaction = fmg.beginTransaction();
        fransaction.add(R.id.fragment_layout, fragments.get(0));
        fransaction.commit();
    }

    @Override
    public void onCheckedChanged(RadioGroup radioGroup, int i) {
        FragmentManager sfmr = getSupportFragmentManager();
        FragmentTransaction transaction = sfmr.beginTransaction();
        switch (i) {
            case R.id.rb_home:
                position = 0;
                if (!fragments.get(0).isAdded()) {
                    transaction.add(R.id.fragment_layout, fragments.get(0));
                }

                hideFragment(transaction);
                transaction.show(fragments.get(0));
                setSelected();
                home.setSelected(true);

                break;
            case R.id.rb_min:
                position = 1;
                if (!fragments.get(1).isAdded()) {
                    transaction.add(R.id.fragment_layout, fragments.get(1));
                }

                hideFragment(transaction);
                transaction.show(fragments.get(1));
                setSelected();
                min.setSelected(true);
                break;

            default:
                break;
        }
        transaction.commit();
    }

    private void hideFragment(FragmentTransaction transaction) {
        if (fragments.get(0) != null) {
            transaction.hide(fragments.get(0));
        }
        if (fragments.get(1) != null) {
            transaction.hide(fragments.get(1));
        }
    }

    private void setSelected() {
        home.setSelected(false);
        min.setSelected(false);
    }
}

这里给大家说一下 我们在做导航栏的时候 我们用到的是add 和show 以及 hide 这些方法呢是在我们做导航栏的时候用到的比较多 这个方法每次切换页面的时候 页面不会重新加载适用于多次使用碎片场景 还有一种是将我们的add换成我们的replace replece这个方法呢每次切换我们的fragment页面的时候页面会被销毁掉，销毁掉之后呢会重新加载这个fragment页面，所以只适用于一次fragment碎片场景。导航栏还是建议大家使用add。

好了 关于FrameLayout与RadioGroup的结合使用就到这里了。希望大家多多关注转发及评论。希望在日常生活中这张博客能帮到你们！ 再见！