RadioButton+Fragment+VP开发实践

底部导航栏的实现方式之一。其他实现方式有: Tablayout+Fragment+VP,Bottom Nav+VP

我的其他控件开发实践:TableLayout+Fragment+VP开发实践

主要步骤

  1. RadioButton:写布局与设置样式、实现OnCheckedChangeListener接口并重写onCheckedChanged方法、设定初始值check
  2. Fragment:初始化并添加 Fragment<List>、使用FragmentManager、设置适配器FragmentPagerAdapter
  3. ViewPager:实现接口重写OnPageChangeListener方法、添加适配器与监听addOnPageChangeListener

XML

activity_min.xml:


<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" <!--设置布局的Radiogroup位置-->
    tools:context=".MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/mainViewPager"
        android:layout_width="match_parent"
        android:layout_gravity="bottom"
        android:layout_height="0dp"
        android:layout_weight="1">

    </androidx.viewpager.widget.ViewPager>

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

        <RadioButton
            android:id="@+id/Frag1Btn"
            android:button="@null" <!--去除原生按钮-->
            android:text="@string/fragment1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:gravity="center">
        </RadioButton>

        <RadioButton
            android:id="@+id/Frag2Btn"
            android:button="@null"
            android:text="@string/fragment2"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:gravity="center">
        </RadioButton>

        <RadioButton
            android:id="@+id/Frag3Btn"
            android:button="@null"
            android:text="@string/fragment3"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:gravity="center">
        </RadioButton>

        <RadioButton
            android:id="@+id/Frag4Btn"
            android:button="@null"
            android:text="@string/fragment4"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:gravity="center">
        </RadioButton>

    </RadioGroup>

</LinearLayout>

单个Fragment页面此处省略。

MainActivity

声明:RadioButton、RadioGroup、Fragment、FragmentPagerAdapter(可选)、ViewPager

Fragment

初始化与添加fragment到集合中(两种写法):

private List<Fragment> fragmentList;           fragmentList = new ArrayList<Fragment>()
 //初始化fragment                               //实例化mlist数组
 frag1 = new Fragment1();                      fragOne = new Frag_One(); 
 frag2 = new Fragment2();                      fragTwo = new Frag_Two();
 frag3 = new Fragment3();         =            fragThree = new Frag_Three(); 
 frag4 = new Fragment4();                      fragmentList.add(fragOne);
                                               fragmentList.add(fragTwo);
 fragmentList = new ArrayList<>();             fragmentList.add(fragThree);
 fragmentList.add(frag1);                               
 fragmentList.add(frag2);                            
 fragmentList.add(frag3);                             
 fragmentList.add(frag4);

.add方法:添加到数组中

FragmentManager

定义FragmentManager

FragmentPagerAdapter

创建Fragment适配器,用于显示每一个页面的内容(此处可为外部类或内部类):

  1. 实例化FragmentPagerAdapter并传入ArrayList
MainFragmentPagerAdapter mainFragmentPagerAdapter = new MainFragmentPagerAdapter(getSupportFragmentManager(),fragmentList);

重写三个方法:

public class mainFragmentPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> fragmentList;
public MainViewPagerAdapter(FragmentManager fragmentManager, List<Fragment> fragmentList) {
      super(fragmentManager);
      this.fragmentList = fragmentList;
}
   
  @Override
  public Fragment getItem(int position) { //返回每个位置(position)的fragment对象/当前显示的是第几个
    return fragmentList.get(position);
  }
   
  @Override
  public int getCount() { //获得个数
    return fragmentList.size(); //返回fragmentlist的个数
  		}
}

RadioGroup

  1. 实现RadioGroup.OnpageChangeListener接口,重写OnCheckedChanged方法:
@Override
    public void onCheckedChanged(RadioGroup radioGroup, int checkedID) {

        switch(checkedID) {
            case R.id.Frag1Btn:
                viewPager.setCurrentItem(0, true); 
								//此处第二个参数smoothScrool为页面切换动画的启用
            case R.id.Frag2Btn:
                viewPager.setCurrentItem(1, true);
            case R.id.Frag3Btn:
                viewPager.setCurrentItem(2, true);
            case R.id.Frag4Btn:
                viewPager.setCurrentItem(3, true);
            default:
                break;

        }
    }

设置radiogroup监听与初始选择:

radioGroup.setOnCheckedChangeListener(this); //设置点击监听
radioGroup.check(R.id.Frag1Btn);//设置初始选中按钮

ViewPager

实现ViewPager.OnpageChangeListener接口,重写其中setOnPageChangeListener:滑动选择方法


@Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }
    
    @Override
    public void onPageSelected(int position) {
        switch (position) {
            case 0:
                radioGroup.check(R.id.Frag1Btn);
                break;
            case 1:
                radioGroup.check(R.id.Frag2Btn);
                break;
            case 2:
                radioGroup.check(R.id.Frag3Btn);
                break;
            case 3:
                radioGroup.check(R.id.Frag4Btn);
                break;
            default:
                break;
        }
    
    }
    
    @Override
    public void onPageScrollStateChanged(int state) {
    
    }

ViewPager

设置ViewPager:

mainViewPager.setAdapter(mainViewPagerAdapter);//添加适配器
mainViewPager.addOnPageChangeListener(this); //设置viewpager页面监听
mainViewPager.setCurrentItem(0); //设置第一个页面

参考链接

Android ViewPager+RadioGroup+Fragment超高仿微信主界面

使用ViewPager+Fragment+RadioGroup实现类似微信主界面

RadioGroup+ViewPager+Fragment的组合使用

Android底部导航栏创建——ViewPager + RadioGroup

RadioButton点击事件不起作用的坑

 wechat
产品北里,讲述产品和人性、涉及设计、技术和运营的公众号。
你们的赞赏是我更新的动力~