Viewpager + radiobutton imitation QQ Effect

Radiobutton is customized by yourself. Set Android: button = "@ null" and then set backgroud.

Problems involved:

1. How to keep the radiogroup at the bottom and the radiogroup and viewpager are not blocked:

First define radiogroup and set alignparentbottom to true;

Define viewpager and set alignparenttop = true (not available) and align_abve = "@ ID/radiogroup"

This solves this problem perfectly.

2. How to customize radiobutton:

Set Android: button = "@ null" of radiobutton ";

Set Android: Background of radiobutton to a custom selector.

3. Basic code ideas:

When you click radiobutton, set the item (viewpager. setcurrentitem (POS) to be displayed in viewpager according to the radiobutton ID ));

When sliding viewpager, set the radiobutton (radiogroup. Check (R. Id. xx) to be selected based on the position of the viewpager item displayed first ))

Layout file:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity" >    <RadioGroup        android:id="@+id/group"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:orientation="horizontal" >        <RadioButton            android:id="@+id/one"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:background="@drawable/radio_bg"            android:button="@null"            android:padding="10dip"            android:text="@string/page_one"            android:textSize="20sp" />        <RadioButton            android:id="@+id/two"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:background="@drawable/radio_bg"            android:button="@null"            android:padding="10dip"            android:text="@string/page_two"            android:textSize="20sp" />        <RadioButton            android:id="@+id/three"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:background="@drawable/radio_bg"            android:button="@null"            android:padding="10dip"            android:text="@string/page_three"            android:textSize="20sp" />        <RadioButton            android:id="@+id/four"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:background="@drawable/radio_bg"            android:button="@null"            android:padding="10dip"            android:text="@string/page_four"            android:textSize="20sp" />    </RadioGroup>    <android.support.v4.view.ViewPager        android:id="@+id/content"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_above="@id/group"        android:layout_alignParentTop="true" /></RelativeLayout>

Radio_bg:

<selector xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:state_checked="false" android:drawable="@android:color/white" />    <item android:state_checked="true" android:drawable="@android:color/holo_green_light" /></selector>

Define a fragment:

public class Frag extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater,@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {TextView tv = new TextView(getActivity());tv.setText(getArguments().getString("key"));return tv;}}

Mainactivity:

public class MainActivity extends FragmentActivity {private ViewPager mPager;private RadioGroup mGroup;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mPager = (ViewPager) findViewById(R.id.content);mGroup = (RadioGroup) findViewById(R.id.group);mGroup.setOnCheckedChangeListener(new CheckedChangeListener());mGroup.check(R.id.one);mPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));mPager.setOnPageChangeListener(new PageChangeListener());mPager.setOffscreenPageLimit(4);}private class CheckedChangeListener implements OnCheckedChangeListener {@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {switch (checkedId) {case R.id.one:mPager.setCurrentItem(0);break;case R.id.two:mPager.setCurrentItem(1);break;case R.id.three:mPager.setCurrentItem(2);break;case R.id.four:mPager.setCurrentItem(3);break;}}}private class PageChangeListener implements OnPageChangeListener {@Overridepublic void onPageSelected(int position) {switch (position) {case 0:mGroup.check(R.id.one);break;case 1:mGroup.check(R.id.two);break;case 2:mGroup.check(R.id.three);break;case 3:mGroup.check(R.id.four);break;}}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}}private class MyPagerAdapter extends FragmentPagerAdapter {public MyPagerAdapter(FragmentManager fm) {super(fm);}@Overridepublic Fragment getItem(int position) {Frag frag = new Frag();Bundle bundle = new Bundle();bundle.putString("key", "hello world " + position);frag.setArguments(bundle);return frag;}@Overridepublic int getCount() {return 4;}}}

Effect:

Viewpager + radiobutton imitation QQ Effect