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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<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到集合中(两种写法):

1
2
3
4
5
6
7
8
9
10
11
12
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

    1
    MainFragmentPagerAdapter mainFragmentPagerAdapter = new MainFragmentPagerAdapter(getSupportFragmentManager(),fragmentList);
  2. 重写三个方法:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    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方法:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    @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;

    }
    }
  2. 设置radiogroup监听与初始选择:

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

ViewPager

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@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:

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

参考链接

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

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

RadioGroup+ViewPager+Fragment的组合使用

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

RadioButton点击事件不起作用的坑

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