ViewPager+RadioGroup+RadioButton實現滑動切換頁面與點選按鈕切換頁面
阿新 • • 發佈：2018-12-01
一:效果圖:
二:程式碼:
首先 根據我們有幾個頁面就設定幾個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>