RadioGroup+RadioButton+ViewPager实现导航栏

RadioGroup+RadioButton个人认为是最好实现图文导航栏的所以写了这个demo，希望对各位有些帮助

实现的效果

在activity_main中

<RadioGroup
        android:id="@+id/radio_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginBottom="10dp">

        <RadioButton
            android:id="@+id/raio_button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/tab_viewpager_screeplay_bg_icon1"
            android:text="tab1"
            android:checked="true"
            android:textColor="@color/main_tab_btn_text"
            android:drawablePadding="4dp"
            android:textSize="10sp"
            android:gravity="center"/>

        <RadioButton
            android:id="@+id/raio_button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/tab_viewpager_screeplay_bg_icon1"
            android:text="tab2"
            android:textColor="@color/main_tab_btn_text"
            android:drawablePadding="4dp"
            android:textSize="10sp"
            android:gravity="center"/>

        <RadioButton
            android:id="@+id/raio_button3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/tab_viewpager_screeplay_bg_icon1"
            android:text="tab3"
            android:textColor="@color/main_tab_btn_text"
            android:drawablePadding="4dp"
            android:textSize="10sp"
            android:gravity="center"/>

        <RadioButton
            android:id="@+id/raio_button4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/tab_viewpager_screeplay_bg_icon1"
            android:text="tab4"
            android:textColor="@color/main_tab_btn_text"
            android:drawablePadding="4dp"
            android:textSize="10sp"
            android:gravity="center" />

        <RadioButton
            android:id="@+id/raio_button5"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/tab_viewpager_screeplay_bg_icon1"
            android:text="tab5"
            android:textColor="@color/main_tab_btn_text"
            android:drawablePadding="4dp"
            android:textSize="10sp"
            android:gravity="center"/>

    </RadioGroup>

    <androidx.viewpager.widget.ViewPager
        android:layout_below="@id/radio_group"
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"/>

点击图片的切换tab_viewpager_screeplay_bg_icon1放在drawable文件内

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/icon_script_kill_no" android:state_checked="false"/>
    <item android:drawable="@mipmap/icon_script_kill"/>
</selector>

点击文字颜色的变换main_tab_btn_text放在color文件内

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/black" android:state_checked="true"/>
    <item android:color="#ff83888e"/>
</selector>

在MainActivity中

public class MainActivity extends AppCompatActivity {

    private RadioGroup mGroup;
    private ViewPager mPager;

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

    private void initView() {
        mGroup = (RadioGroup) findViewById(R.id.radio_group);
        mPager = (ViewPager) findViewById(R.id.viewpager);
    }

    private void initData() {
        ArrayList<Fragment> list = new ArrayList<>();
        list.add(new Fragment1());
        list.add(new Fragment2());
        list.add(new Fragment3());
        list.add(new Fragment4());
        list.add(new Fragment5());

        mPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {//这里如果是在Fragment中写导航栏getSupportFragmentManager()需要换成getFragmentManager()
            @NonNull
            @Override
            public Fragment getItem(int position) {
                return list.get(position);
            }

            @Override
            public int getCount() {
                return list.size();
            }
        });

        mGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId){
                    case R.id.raio_button1:
                        mPager.setCurrentItem(0);
                        break;
                    case R.id.raio_button2:
                        mPager.setCurrentItem(1);
                        break;
                    case R.id.raio_button3:
                        mPager.setCurrentItem(2);
                        break;
                    case R.id.raio_button4:
                        mPager.setCurrentItem(3);
                        break;
                    case R.id.raio_button5:
                        mPager.setCurrentItem(4);
                        break;
                }
            }
        });

        mPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                mGroup.check(mGroup.getChildAt(position).getId());
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        //设置mPager预加载页面数
        mPager.setOffscreenPageLimit(4);
        //设置默认首页
        mPager.setCurrentItem(0);
    }
}```