一:效果图:
二:代码:
首先 根据我们有几个页面就设置几个Fragment,
主函数:
public class MainActivity extends AppCompatActivity {
private ViewPager viewpager;
private RadioButton one;
private RadioButton two;
private RadioButton three;
private RadioButton four;
private RadioButton five;
private RadioGroup radio;
private List<Fragment> list = new ArrayList<>();
private OneFragment oneFragment = new OneFragment();
private TwoFragment twoFragment = new TwoFragment();
private ThreeFragment threeFragment = new ThreeFragment();
private FourFragment fourFragment = new FourFragment();
private FiveFragment fiveFragment = new FiveFragment();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
//添加Fragment
list.add(oneFragment);
list.add(twoFragment);
list.add(threeFragment);
list.add(fourFragment);
list.add(fiveFragment);
viewpagerAdapter adapter = new viewpagerAdapter(getSupportFragmentManager(),list);
viewpager.setAdapter(adapter);
//radioGroup的点击事件
radio.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.one:
viewpager.setCurrentItem(0);
break;
case R.id.two:
viewpager.setCurrentItem(1);
break;
case R.id.three:
viewpager.setCurrentItem(2);
break;
case R.id.four:
viewpager.setCurrentItem(3);
break;
case R.id.five:
viewpager.setCurrentItem(4);
break;
}
}
});
//滑动也能切换button的图片
viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int i, float v, int i1) {
}
@Override
public void onPageSelected(int i) {
switch (i) {
case 0:
one.setChecked(true);
break;
case 1:
two.setChecked(true);
break;
case 2:
three.setChecked(true);
break;
case 3:
four.setChecked(true);
break;
case 4:
five.setChecked(true);
break;
}
}
@Override
public void onPageScrollStateChanged(int i) {
}
});
}
private void initView() {
viewpager = (ViewPager) findViewById(R.id.viewpager);
one = (RadioButton) findViewById(R.id.one);
two = (RadioButton) findViewById(R.id.two);
three = (RadioButton) findViewById(R.id.three);
four = (RadioButton) findViewById(R.id.four);
five = (RadioButton) findViewById(R.id.five);
radio = (RadioGroup) findViewById(R.id.radio);
}
}
布局:
<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"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="7"
></android.support.v4.view.ViewPager>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<RadioGroup
android:id="@+id/radio"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="match_parent">
<RadioButton
android:textColor="@drawable/textss"
android:checked="true"
android:id="@+id/one"
android:text="新品"
android:gravity="center_horizontal"
android:drawableTop="@drawable/news"
android:textSize="18sp"
android:button="@null"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent" />
<RadioButton
android:textColor="@drawable/textss"
android:id="@+id/two"
android:text="精选"
android:gravity="center_horizontal"
android:drawableTop="@drawable/jing"
android:textSize="18sp"
android:button="@null"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent" />
<RadioButton
android:textColor="@drawable/textss"
android:id="@+id/three"
android:text="分类"
android:gravity="center_horizontal"
android:drawableTop="@drawable/fen"
android:textSize="18sp"
android:button="@null"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent" />
<RadioButton
android:textColor="@drawable/textss"
android:id="@+id/four"
android:text="我的衣橱"
android:gravity="center_horizontal"
android:drawableTop="@drawable/dress"
android:textSize="18sp"
android:button="@null"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent" />
<RadioButton
android:textColor="@drawable/textss"
android:id="@+id/five"
android:text="个人中心"
android:gravity="center_horizontal"
android:drawableTop="@drawable/mine"
android:textSize="18sp"
android:button="@null"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent" />
</RadioGroup>
</LinearLayout>
</LinearLayout>
pagerAdapter:
public class pagerAdapter extends FragmentPagerAdapter {
private List<Fragment> list;
public pagerAdapter(FragmentManager fm, List<Fragment> list) {
super(fm);
this.list = list;
}
@Override
public Fragment getItem(int i) {
return list.get(i);
}
@Override
public int getCount() {
return list.size();
}
}
滑动时文字颜色的切换:(在drawable里面设置资源文件)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#ED5379"></item>
<item android:state_checked="false" android:color="#000000"></item>
</selector>
滑动时button图片的切换:(在drawable里面设置资源文件)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/wardrobe_icon_press"></item>
<item android:state_checked="false" android:drawable="@drawable/wardrobe_icon"></item>
</selector>