首页 > 代码库 > ViewPager+RadioButton仿QQ效果
ViewPager+RadioButton仿QQ效果
RadioButton是自己定制的, 设置android:button="@null" 然后再设置backgroud。
涉及到的问题:
1、如何让RadioGroup在底部,且RadioGroup和Viewpager互不遮挡:
先定义RadioGroup,设置alignparentbottom=true;
再定义ViewPager,设置alignparenttop=true(可以没有)和align_above="@id/radiogroup"
这样就完美的解决了这个问题。
2、如何定制RadioButton:
设置radiobutton的android:button="@null";
设置radiobutton的android:background为一个自定义selector
3、代码的基本思路:
点击radiobutton的时候根据radiobutton的id设置viewpager要显示的item(viewPager.setCurrentItem(pos));
滑动viewpager的时候,要根据当先显示的viewpager的item的位置,设置要选中的radiobutton(radiogroup.check(R.id.xx))
布局文件:
<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>
定义一个Fragment:
public class Frag extends Fragment { @Override public 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; @Override protected 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 { @Override public 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 { @Override public 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; } } @Override public void onPageScrollStateChanged(int arg0) { } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } } private class MyPagerAdapter extends FragmentPagerAdapter { public MyPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { Frag frag = new Frag(); Bundle bundle = new Bundle(); bundle.putString("key", "hello world " + position); frag.setArguments(bundle); return frag; } @Override public int getCount() { return 4; } } }
效果:
ViewPager+RadioButton仿QQ效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。