Android通过RadioGroup+Fragment实现底部导航及切换

APP常用的基础框架，通过RadioGroup+Fragment实现底部导航

本文根据杨光福老师的方法搭建APP软件基础框架，实现首页导航界面切换

实现效果如图

基类 BaseFragment.java

package swl.com.demo11.fragment;

import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * 作者：尚硅谷-杨光福 on 2016/7/21 19:20
 * 微信：yangguangfu520
 * QQ号：541433511
 * 作用：基类，公共类
 * CommonFrameFragment，ThirdPartyFragment,CustomFragment,OtherFragment等都要继承该类
 */
public abstract class BaseFragment extends Fragment {
    /**
     * 上下文
     */
    protected Context mContext;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mContext = getActivity();
    }


    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return initView();
    }

    /**
     * 强制子类重写，实现子类特有的ui
     * @return
     */
    protected abstract View initView();

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        initData();
    }

    /**
     * 当孩子需要初始化数据，或者联网请求绑定数据，展示数据的 等等可以重写该方法
     */
    protected void initData() {

    }
}

 

导航界面 Main3Activity.java

package swl.com.demo11.fragment;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
import android.os.Bundle;
import android.widget.RadioGroup;

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

import swl.com.demo11.R;

public class Main3Activity extends FragmentActivity {

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

        //初始化View
        initView();
        //初始化Fragment
        initFragment();
        //设置RadioGroup的监听
        setListener();
    }

    private RadioGroup mRg_main;
    private List<BaseFragment> mBaseFragment;

    /**
     * 选中的Fragment的对应的位置
     */
    private int position;

    /**
     * 上次切换的Fragment
     */
    private Fragment mContent;



    private void setListener() {
        mRg_main.setOnCheckedChangeListener(new MyOnCheckedChangeListener());
        //设置默认选中
        mRg_main.check(R.id.one);
    }

    class MyOnCheckedChangeListener implements RadioGroup.OnCheckedChangeListener {

        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            switch (checkedId){
                case R.id.one:
                    position = 0;
                    break;
                case R.id.two:
                    position = 1;
                    break;
                case R.id.three:
                    position = 2;
                    break;
                default:
                    position = 0;
                    break;
            }

            //根据位置得到对应的Fragment
            BaseFragment to = getFragment();
            //替换
            switchFrament(mContent,to);

        }
    }


    /**
     *
     * @param from 刚显示的Fragment,马上就要被隐藏了
     * @param to 马上要切换到的Fragment，一会要显示
     */
    private void switchFrament(Fragment from,Fragment to) {
        if(from != to){
            mContent = to;
            FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
            //才切换
            //判断有没有被添加
            if(!to.isAdded()){
                //to没有被添加
                //from隐藏
                if(from != null){
                    ft.hide(from);
                }
                //添加to
                if(to != null){
                    ft.add(R.id.fl_content,to).commit();
                }
            }else{
                //to已经被添加
                // from隐藏
                if(from != null){
                    ft.hide(from);
                }
                //显示to
                if(to != null){
                    ft.show(to).commit();
                }
            }
        }

    }


    /**
     * 根据位置得到对应的Fragment
     * @return
     */
    private BaseFragment getFragment() {
        BaseFragment fragment = mBaseFragment.get(position);
        return fragment;
    }

    private void initFragment() {
        mBaseFragment = new ArrayList<>();
        mBaseFragment.add(new OneFragment());
        mBaseFragment.add(new TwoFragment());
        mBaseFragment.add(new ThreeFragment());
    }

    private void initView() {
        mRg_main = (RadioGroup) findViewById(R.id.rg_main);

    }
}

其中的Fragment要自己创建类，继承BaseFragment，实现方法initView初始化视图，其他绑定数据可以通过重写initData实现

举个栗子

package swl.com.demo11.fragment;

import android.view.View;

import swl.com.demo11.R;

/**
 * @Author:Swallow
 * @Date:2019/9/25
 **/
public class OneFragment extends BaseFragment {
    @Override
    protected View initView() {
        View view = View.inflate(mContext, R.layout.fragment_one,null);
        return view;
    }
}

布局文件activity_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=".fragment.Main3Activity">
    <!--FrameLayout-->

    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

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

        <RadioButton
            android:id="@+id/one"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:textColor="@drawable/bottom_textcolor_drawable_selector"
            android:drawableTop="@drawable/rb_common_frame_drawable_selector"
            android:text="One" />

        <RadioButton
            android:id="@+id/two"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:textColor="@drawable/bottom_textcolor_drawable_selector"
            android:drawableTop="@drawable/rb_thirdparty_drawable_selector"
            android:text="Two" />

        <RadioButton
            android:id="@+id/three"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:gravity="center"
            android:textColor="@drawable/bottom_textcolor_drawable_selector"
            android:drawableTop="@drawable/rb_other_drawable_selector"
            android:text="Three" />
    </RadioGroup>
</LinearLayout>

其中，对于RadioButton的样式可以进一步封装到style.xml文件当中

    <style name="btn_radio_style">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
        <item name="android:button">@null</item>
        <item name="android:gravity">center</item>
        <item name="android:textColor">@drawable/bottom_textcolor_drawable_selector</item>
        <item name="android:textSize">14sp</item>
    </style>

在RadioButton下使用style属性引用到btn_radio_style就行，使代码看起来更简练

选中文字时改变颜色bottom_textcolor_drawable_selector.xml

图标同理，自行创建xml文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:color="#363636"/>
    <item android:state_checked="true" android:color="#3097FD"/>

</selector>

 

去除单选按钮默认的圆圈

android:button="@null"

 

图标背景设置为透明

android:background="@android:color/transparent"

 

如果想要点击RadioButton时不能切换Fragment，该RadioButton调用方法.setEnabled(false)即可，例如

rb_one.setEnabled(false);

如果想要点击某个button后跳转到下一个Fragment，再当前Fragment当中设置RadioGroup所选中的对象为下一个Fragment所对应的RadioButton例如

//当前为rb_one所对应的Fragment
//将radioGroup所选中的radioButton选为第二个Fragment所对应的radioButton
radioGroup.check(R.id.rb_two);

 

如果需要源码可以点击下载