底部导航栏实现页面的切换（三）：Fragment + RadioGroup + ViewPager

本文主要是介绍底部导航栏实现页面的切换（三）：Fragment + RadioGroup + ViewPager，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

底部导航栏实现页面的切换（三）：Fragment + RadioGroup + ViewPager

知识点

效果图：

逻辑

布局：顶部是LinearLayout，里面放了TextView；底部是RadioGroup，其中里面水平放置4个RadioButton,比例是1:1:1:1；其余是ViewPager填充满剩余空间.
代码逻辑：ViewPager可以滑动实现页面的切换 + RadioGroup点击可以实现页面的切换；实现页面切换的时候viewpager与RadioGroup要同步。

相关方法

类	方法	子方法	含义
ViewPager	setCurrentItem(int item)	子方法	含义
–	setOnPageChangeListener(ViewPager.OnPageChangeListener listener)	–	过时方法，现在用addOnPageChangeListener（…）
–	addOnPageChangeListener(ViewPager.OnPageChangeListener listener)	–	页面切换的监听
–	–	onPageScrolled(int position,float positionOffset,int positionOffsetPixels)	正在滑动时
–	–	onPageSelected(int position)	滑动完成
–	–	onPageScrollStateChanged(int state)	//滑动状态改变，默认值有0/1,2，也可以在这里设置tab为true（先要判断state == 2）；0:没有滑动，静止状态；1:正在滑动；2:滑动完成
RadioGroup	setOnCheckedChangeListener (RadioGroup.OnCheckedChangeListener listener)	–	check监听
–		onCheckedChanged(RadioGroup radioGroup, int checkId)	checkId选中的radioButton的id
RadioButton	setChecked (boolean checked)	–	RadioButton是否选中

底部文字颜色 + 背景色 + 图片 的切换与上一篇一样。如下：

注意：如果是Text的颜色切换，那么用color;如果是控件背景色的切换，必须用drawable。

文字颜色： text_bottom_selector.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/colorAccent"/><item android:color="@color/colorBlack"/>
</selector>

图片切换： tab1_icon_selector.xml ###

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

背景色切换： tab_bottom_bg_selector.xml ###

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

下面通过代码学习

主要逻辑

@Override
protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);supportRequestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);findViews();initData();initViews();//默认点击第一个viewPager.setCurrentItem(0);tab1.setChecked(true);
}

Step 1 findViews()：通过id找到所有的view

private void findViews() {radioGroup = (RadioGroup) findViewById(R.id.radioGroup);viewPager = (ViewPager) findViewById(R.id.viewPager);tab1 = (RadioButton) findViewById(R.id.tab1);tab2 = (RadioButton) findViewById(R.id.tab2);tab3 = (RadioButton) findViewById(R.id.tab3);tab4 = (RadioButton) findViewById(R.id.tab4);
}

Step 2 initData():初始化数据

private void initData() {list.clear();frag1 = new Frag1();frag2 = new Frag2();frag3 = new Frag3();frag4 = new Frag4();list.add(frag1);list.add(frag2);list.add(frag3);list.add(frag4);
}

Step 3 initViews()：设置radioGroup + viewPager的监听

private void initViews() {//RadioGroup点击的时实现viewpager的切换radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup radioGroup, int checkId) {switch (checkId) {case R.id.tab1:viewPager.setCurrentItem(0);break;case R.id.tab2:viewPager.setCurrentItem(1);break;case R.id.tab3:viewPager.setCurrentItem(2);break;case R.id.tab4:viewPager.setCurrentItem(3);break;}}});MyViewPagerAdapter adapter = new MyViewPagerAdapter(getSupportFragmentManager(), list);viewPager.setAdapter(adapter);//viewpager滑动的时候让RadioGroup切换
//        viewPager.setOnPageChangeListener(OnPageChangeListener mOnPageChangeListener);//过时方法viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {//正在滑动时Log.d("tag", "position=" + position + "---positionOffset" + positionOffset + "---positionOffsetPixels" + positionOffsetPixels);}@Overridepublic void onPageSelected(int position) {//滑动完成switch (position) {case 0:tab1.setChecked(true);break;case 1:tab2.setChecked(true);break;case 2:tab3.setChecked(true);break;case 3:tab4.setChecked(true);break;}}@Overridepublic void onPageScrollStateChanged(int state) {//滑动状态改变，默认值有0/1,2，也可以在这里设置tab为true（先要判断state == 2）//0:没有滑动，静止状态//1:正在滑动//2:滑动完成}});
}

Step 4 默认设置第一页

//默认点击第一个
viewPager.setCurrentItem(0);
tab1.setChecked(true);

禁止ViewPager的滑动

app通常导航栏可以点击，但viewpager是不可以滑动的，这是怎么实现的呢？

解决方法：

创建类NoScrollViewPager继承ViewPager，通过重写onInterceptTouchEvent(MotionEvent ev) 和 onTouchEvent(MotionEvent ev) 实现不可滑动。

需要修改哪些

1. 创建类NoScrollViewPager继承ViewPager，通过重写onInterceptTouchEvent(MotionEvent ev) 和 onTouchEvent(MotionEvent ev) 实现不可滑动
2. 将布局和代码中的控件ViewPager改成NoScrollViewPager
3. 注释掉viewpager的viewPager.setCurrentItem(0) + viewPager.addOnPageChangeListener(…}

代码：

/*** Created by ${cqc} on 2016/9/8.* 禁止viewpager的滑动*/
public class NoScrollViewPager extends ViewPager {public NoScrollViewPager(Context context) {super(context);}public NoScrollViewPager(Context context, AttributeSet attrs) {super(context, attrs);}//是否拦截事件向内部传递，true:拦截; false：不拦截.@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {return false;}//viewpager本身是否处理事件，true:处理; false：不处理.@Overridepublic boolean onTouchEvent(MotionEvent ev) {return false;}
}

源码：https://github.com/s1168805219/FragmentTab
对应的Module是：app3

也可以这样

tabBtn1.setBackgroundResource(R.drawable.tab_1_hover);//默认选择tab1
tab1.setOnClickListener(v -> {tabBtn1.setBackgroundResource(R.drawable.tab_1_hover);tabBtn2.setBackgroundResource(R.drawable.tab_2);tabBtn3.setBackgroundResource(R.drawable.tab_3);tabBtn4.setBackgroundResource(R.drawable.tab_4);mainPager.setCurrentItem(0);
});

这篇关于底部导航栏实现页面的切换（三）：Fragment + RadioGroup + ViewPager的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---