RadioGroup和ViewPager实现Tab

时间:2024-07-13 14:36:44

Activity的布局文件

<LinearLayout 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"
    android:orientation="vertical"
    android:gravity="center_horizontal">
    <RadioGroup
        android:id="@+id/mainmedia_group"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/media_local"
            android:checked="true"
            style="@style/main_tab_bottom"
            android:drawableTop="@drawable/media_local"
            android:text="@string/media_local"/>
        <RadioButton
            android:id="@+id/media_online"
            style="@style/main_tab_bottom"
            android:drawableTop="@drawable/media_online"
            android:text="@string/media_online"/>
    </RadioGroup>

    <android.support.v4.view.ViewPager
       android:id="@+id/viewpager"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="@color/background"
        />

</LinearLayout>

RadioButton的样式

    <style name="main_tab_bottom">
        <item name="android:textColor">#ffffffff</item>
        <item name="android:textSize">12.0sp</item>
        <item name="android:ellipsize">marquee</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:paddingTop">2.0dp</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:button">@null</item>
        <item name="android:singleLine">true</item>
        <item name="android:layout_weight">1</item>
        <item name="android:background">@drawable/selector_home_bg</item>
    </style>

设置ViewPager的Apterda

mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()){
    @Override
    public int getCount() {
        return 2;
    }
    @Override
    public Fragment getItem(int arg0) {
        Fragment fragment = null;
        switch (arg0) {
        case 1:
            fragment = new FragmentOnlineMedia();
            break;
        case 0:
        default:
            fragment = new FragmentLocalMedia();
            break;
        }
        return fragment;
    }
});

给ViewPager加上页面切换监听

    mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
        @Override
        public void onPageSelected(int currItem) {
            // TODO Auto-generated method stub
            switch (currItem) {
            case 1:
                onlineMedia.setChecked(true);
                break;
            case 0:
            default:
                localMedia.setChecked(true);
                break;
            }
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
            // TODO Auto-generated method stub
        }
        @Override
        public void onPageScrollStateChanged(int currItem) {
            // TODO Auto-generated method stub
        }
    });

给RadioGroup加上按钮改变监听

@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
    // TODO Auto-generated method stub
    switch (checkedId) {
    case R.id.media_online:
        mViewPager.setCurrentItem(1);
        break;
    case 0:
    default:
        mViewPager.setCurrentItem(0);
        break;
    }
} 

这样就可完整地实现使用RadioGroup和ViewPager做页面切换了