使用ViewPager+RadioButton+Fragment完成Android底部导航栏

一时失言乱红尘 2024-03-22 13:12 74阅读 0赞

#### 1、添加布局 ####

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 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"
        tools:context=".MainActivity">
    
        <androidx.viewpager.widget.ViewPager
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/rg_1"
            android:id="@+id/vp_1"/>
        <RadioGroup
            android:layout_alignParentBottom="true"
            android:id="@+id/rg_1"
            android:layout_width="match_parent"
            android:layout_height="90dp"
            android:orientation="horizontal">
            <RadioButton
                android:checked="true"
                android:layout_gravity="center"
                android:drawableTop="@drawable/discovery_select"
                android:textColor="@drawable/item_text_color"
                android:gravity="center"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="广场"
                android:button="@null"
                android:id="@+id/rb_1"/>
            <RadioButton
                android:layout_gravity="center"
                android:drawableTop="@drawable/video_select"
                android:textColor="@drawable/item_text_color"
                android:gravity="center"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="附近"
                android:button="@null"
                android:id="@+id/rb_2"/>
            <RadioButton
                android:layout_gravity="center"
                android:gravity="center"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:drawableTop="@drawable/live_select"
                android:textColor="@drawable/item_text_color"
                android:button="@null"
                android:text="直播"
                android:id="@+id/rb_3"/>
            <RadioButton
                android:layout_gravity="center"
                android:drawableTop="@drawable/feed_select"
                android:textColor="@drawable/item_text_color"
                android:gravity="center"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="动态"
                android:button="@null"
                android:id="@+id/rb_4"/>
            <RadioButton
                android:layout_gravity="center"
                android:drawableTop="@drawable/me_select"
                android:textColor="@drawable/item_text_color"
                android:gravity="center"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="我的"
                android:button="@null"
                android:id="@+id/rb_5"/>
        </RadioGroup>
    
    </RelativeLayout>

#### 2、设置selector：discovery\_select.xml,总共有五个，其他和这个一样，只不过图片不同 ####

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

#### 3、设置文本颜色选择器：item\_text\_color.xml，五个和这个使用的是一个 ####

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

#### 4、MainActivity代码 ####

public class MainActivity extends AppCompatActivity  {
        private ActivityMainBinding binding;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            binding = ActivityMainBinding.inflate(getLayoutInflater());
            setContentView(binding.getRoot());
    
            ArrayList<Fragment> fragments = new ArrayList<>();
            fragments.add(new DiscoveryFragment());
            fragments.add(new VideoFragment());
            fragments.add(new LiveFragment());
            fragments.add(new FeedFragment());
            fragments.add(new MeFragment());
    
            binding.vp1.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
                @NonNull
                @Override
                public Fragment getItem(int position) {
                    return fragments.get(position);
                }
    
                @Override
                public int getCount() {
                    return fragments.size();
                }
            });
    
            binding.rg1.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
                @Override
                public void onCheckedChanged(RadioGroup group, int checkedId) {
                    if (checkedId == R.id.rb_1) {
                        binding.vp1.setCurrentItem(0);
                    } else if (checkedId == R.id.rb_2) {
                        binding.vp1.setCurrentItem(1);
                    } else if (checkedId == R.id.rb_3) {
                        binding.vp1.setCurrentItem(2);
                    } else if (checkedId == R.id.rb_4) {
                        binding.vp1.setCurrentItem(3);
                    } else if (checkedId == R.id.rb_5) {
                        binding.vp1.setCurrentItem(4);
                    }
                }
            });
    
            binding.vp1.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
                }
    
                @Override
                public void onPageSelected(int position) {
                    binding.rg1.check(binding.rg1.getChildAt(position).getId());
                }
    
                @Override
                public void onPageScrollStateChanged(int state) {
    
                }
            });
        }
    }

#### 5、效果图 ####

7b3639d4876833163d84b6b0640650