Fragment底部导航栏之RadioButton

实现效果图：

    

（1）创建FragmentTabUtils类，这是封装好的类，可保存好下次直接用。

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.widget.RadioGroup;
import java.util.List;
/**
 * Created by Administrator on 2018/3/5.
 */
public class FragmentTabUtils implements RadioGroup.OnCheckedChangeListener{
        private int currentTab;
        private List<BaseFragment> fragments;
        private RadioGroup rgs;
        private FragmentManager fragmentManager;
        private int fragmentContentId;
        private OnRgsExtraChechedChangedListener onRgsExtraCheckedChangedListener;
        public FragmentTabUtils(List<BaseFragment> fragments, RadioGroup rgs, FragmentManager fragmentManager, int fragmentContentId){
                this.fragments=fragments;
                this.fragmentManager=fragmentManager;
                this.fragmentContentId=fragmentContentId;
                this.rgs=rgs;
                fragmentManager.beginTransaction().add(fragmentContentId,fragments.get(0)).commit();
                rgs.setOnCheckedChangeListener(this);
                }
        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
                for (int i=0;i<rgs.getChildCount();i++){
                if (rgs.getChildAt(i).getId()==checkedId){
                Fragment fragment=fragments.get(i);
                FragmentTransaction ft=obtainFragmentTransaction(i);
                getCurrentFragment().onStop();
                if (fragment.isAdded()){
                fragment.onStart();
                }else {
                ft.add(fragmentContentId,fragment);
                ft.commit();
                }
                showTab(i);
                if (null !=onRgsExtraCheckedChangedListener){
                onRgsExtraCheckedChangedListener.OnRgsExtraCheckedChanged(group,checkedId,i);
                }
                }
                }
                }
        private void showTab(int idx){
                for (int i=0;i<fragments.size();i++){
                Fragment fragment=fragments.get(i);
                FragmentTransaction ft=obtainFragmentTransaction(i);
                if(idx==i){
                ft.show(fragment);
                }else{
                ft.hide(fragment);
                }
                ft.commit();
                }
                currentTab=idx;
                }
        private FragmentTransaction obtainFragmentTransaction(int index){
                FragmentTransaction ft=fragmentManager.beginTransaction();
                return ft;
                }
        public int getCurrentTab(){
                return currentTab;
                }
        public Fragment getCurrentFragment(){
                return fragments.get(currentTab);
                }
        public static interface OnRgsExtraChechedChangedListener{
            public void OnRgsExtraCheckedChanged(RadioGroup radioGroup, int checkedId, int index);
        }
            public  OnRgsExtraChechedChangedListener getOnRgsExtraChechedChangedListener(){
                return onRgsExtraCheckedChangedListener;
            }
            public  void setOnRgsExtraCheckedChangedListener (OnRgsExtraChechedChangedListener onRgsExtraChechedChangedListener){
                this.onRgsExtraCheckedChangedListener=onRgsExtraChechedChangedListener;
            }

        }

（2）创建BaseFragmen类，也是封装好的，可直接用。

import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
 * Created by Administrator on 2018/3/5.
 */
public abstract class BaseFragment extends android.support.v4.app.Fragment{
    public View view;
    public Context context;
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        //getActivity  Fragment的上下文;
        this.context=getActivity();
    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view=initView(inflater);
        return view;
    }
    public abstract View initView(LayoutInflater inflater);

}

（3）新建MainFragmentActivity文件。

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.FragmentActivity;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import java.util.ArrayList;
import java.util.List;
/**
 * Created by lenovo on 2018/4/16.
 */
public class MainFragmentActivity extends FragmentActivity implements FragmentTabUtils.OnRgsExtraChechedChangedListener{
    private RadioGroup rgs;
    private RadioButton rb_three;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fragment);
        List<BaseFragment> fragments=new ArrayList<BaseFragment>();
        fragments.add(new MainoneFragment());
        fragments.add(new MaintwoFragment());
        fragments.add(new MainthreeFragment());
        fragments.add(new MainfourFragment());
        rgs=(RadioGroup) findViewById(R.id.rg_main);
        FragmentTabUtils tabUtils=new FragmentTabUtils(fragments,rgs,getSupportFragmentManager(),R.id.fl_main);
        tabUtils.setOnRgsExtraCheckedChangedListener(this);
    }
    public void OnRgsExtraCheckedChanged(RadioGroup radioGroup,int checkedId,int index){

    }

（4）新建activity_fragment.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:id="@+id/fl_main"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/white">
    </FrameLayout>
    <RadioGroup
        android:id="@+id/rg_main"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:orientation="horizontal"
        android:background="@mipmap/rg_bg"
        android:paddingLeft="5dp"
        android:paddingRight="5dp">
        <RadioButton
            android:id="@+id/rb_one"
            style="@style/RadioButton_main"
            android:checked="true"
            android:drawableTop="@drawable/rb_first"
            android:text="首页"/>
        <RadioButton
            android:id="@+id/rb_two"
            style="@style/RadioButton_main"
            android:drawableTop="@drawable/rb_two"
            android:text="投资"/>
        <RadioButton
            android:id="@+id/rb_three"
            style="@style/RadioButton_main"
            android:drawableTop="@drawable/rb_three"
            android:text="财富"/>
        <RadioButton
            android:id="@+id/rb_four"
            style="@style/RadioButton_main"
            android:drawableTop="@drawable/rb_four"
            android:text="更多"/>
    </RadioGroup>
</LinearLayout>

 (5)在values文件夹下styles里加入

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- 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="RadioButton_main">
        <item name="android:ellipsize">marquee</item><!--横向跑马灯-->
        <item name="android:layout_width">0dp</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
        <item name="android:paddingTop">4dp</item>
        <item name="android:button">@null</item><!--去掉RadioButton的点-->
        <item name="android:singleLine">true</item>
        <item name="android:textSize">13sp</item>
        <item name="android:textColor">@color/rb_textcolor</item>
    </style>
    <style name="transparentFrameWindowStyle" parent="android:style/Theme.Dialog">
        <item name="android:windowBackground">@drawable/photo_choose_bg</item>
    </style>
    <style name="main_menu_animstyle">
        <item name="android:windowEnterAnimation">@anim/photo_dialog_in_anim</item>
        <item name="android:windowExitAnimation">@anim/photo_dialog_out_anim</item>
    </style>
</resources>

 (6）在res文件夹下新建color文件，在里面新建rb_textcolor.xml。这里是设置字体的颜色，可根据项目需求设置。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="#d1564f"/>
    <item android:state_checked="true" android:color="#d1564f"/>
    <item android:color="#737373"/>
</selector>

（7）在res文件夹下新建anim文件，在里面新建photo_dialog_in_anim.xml和photo_dialog_out_anim.xml。

<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:fromYDelta="1000"
        android:toXDelta="0"
        android:toYDelta="0" />
</set>

<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="500"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="0"
        android:toYDelta="1000" />
</set>

(8） 在drawable文件夹下新建photo_choose_bg.xml 文件

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#00000000" />
<corners android:radius="20dip" />
<padding
    android:bottom="5dp"
    android:left="5dp"
    android:right="5dp"
    android:top="5dp" />
</shape>

（9）在drawable文件夹下还需新建rb_first.xml,rb_two.xml,rb_three.xml,rb_four.xml文件,这个是设置点击按钮时按钮的颜色改变。红色为点击后按钮的

颜色，黄色为默认状态下按钮的颜色，后面几个的也一样。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/finacing_product_pressed" android:state_pressed="true"></item>
    <item android:drawable="@mipmap/finacing_product_pressed" android:state_checked="true"></item>
    <item android:drawable="@mipmap/finacing_product_normal"></item>
</selector>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/finacing_product_pressed" android:state_pressed="true"></item>
    <item android:drawable="@mipmap/finacing_product_pressed" android:state_checked="true"></item>
    <item android:drawable="@mipmap/finacing_product_normal"></item>
</selector>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/my_assets_pressed" android:state_pressed="true"></item>
    <item android:drawable="@mipmap/my_assets_pressed" android:state_checked="true"></item>
    <item android:drawable="@mipmap/my_assets_normal"></item>
</selector>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/more_pressed" android:state_pressed="true"></item>
    <item android:drawable="@mipmap/more_pressed" android:state_checked="true"></item>
    <item android:drawable="@mipmap/more_normal"></item>
</selector>

（10）创建每个按钮的Fragment,分别为MainoneFragment,,MaintwoFragment,MainthreeFragment,MainfourFragment,这里就写MainoneFragment的，

其他几个的除了布局别的都一样。

import android.view.LayoutInflater;
import android.view.View;
/**
 * Created by lenovo on 2018/5/24.
 */
public class MainoneFragment extends BaseFragment{

    @Override
    public View initView(LayoutInflater inflater) {
        View view=inflater.inflate(R.layout.mainone_fragmen,null);

        return view;
    }
}

（11）最后就是为每个Fragment创建布局，总共有4个mainone_fragmen，maintwo_fragmen，mainthree_fragmen，mainfour_fragmen，

这里也写第一个为例，其他的根据项目要求添加

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="第一页"
   />
</LinearLayout>

最后如果你按步骤全部做完的话，应该是实现了，如果有哪些地方不懂得，毕竟图片资源没传上来，

欢迎留言或者可参考例子dome。