底部导航栏实现页面的切换(三):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() {
@Override
public 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() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//正在滑动时
Log.d("tag", "position=" + position + "---positionOffset" + positionOffset + "---positionOffsetPixels" + positionOffsetPixels);
}
@Override
public 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;
}
}
@Override
public 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) 实现不可滑动。
需要修改哪些
- 创建类NoScrollViewPager继承ViewPager,通过重写onInterceptTouchEvent(MotionEvent ev) 和 onTouchEvent(MotionEvent ev) 实现不可滑动
- 将布局和代码中的控件ViewPager改成NoScrollViewPager
- 注释掉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:不拦截.
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return false;
}
//viewpager本身是否处理事件,true:处理; false:不处理.
@Override
public 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);
});