使用RadioGroup+ViewPager+Fragment实现带滑动的页卡效果TabHost时遇到的问题

最近的项目中有一两个界面需要实现带滑动的页卡效果，我这次的需求是大概是这样的：有三个tab，左边的tab要求他的左上角与左下角都是带圆角的，右上角和右下角都是不带圆角的。中间的tab左上角与左下角右上角和右下角都是不带圆角的，右边的tab要求他的左上角与左下角都是不带圆角的，右上角和右下角都是带圆角的；通常我都是使用ViewPagerIndicator这个库，但是由于我这次要实现的样式用ViewPagerIndicator实现起来比较麻烦。因为ViewPagerIndiator的每个Tab的样式都是一样的。于是我就使用RadioGroup+ViewPager+Fragment来实现。

布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context="com.hotkeyfinance.finance.TradingRecordActivity">

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/top_tab"
        android:orientation="horizontal"
        android:padding="15dp">

        <RadioButton
            android:id="@+id/left_tab"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/investment_tab_left_selector"
            android:button="@null"
            android:checked="true"
            android:gravity="center"
            android:padding="10dp"
            android:text="招标中"
            android:textColor="@color/investment_tab_color_list" />

        <RadioButton
            android:id="@+id/center_tab"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/investment_tab_center_selector"
            android:button="@null"
            android:gravity="center"
            android:padding="10dp"
            android:text="还款中"
            android:textColor="@color/investment_tab_color_list" />

        <RadioButton
            android:id="@+id/right_tab"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/investment_tab_right_selector"
            android:button="@null"
            android:gravity="center"
            android:padding="10dp"
            android:text="已还清"
            android:textColor="@color/investment_tab_color_list" />
    </RadioGroup>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

java代码：

package com.hotkeyfinance.finance;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.widget.RadioButton;
import android.widget.RadioGroup;

import com.hotkeyfinance.finance.fragment.BiddingFragment;
import com.hotkeyfinance.finance.fragment.PaymentingFragment;

import java.util.ArrayList;

public class InvestmentManagementActivity extends BaseActivity implements RadioGroup.OnCheckedChangeListener, ViewPager.OnPageChangeListener {

    private ViewPager mViewPager;
    private RadioGroup mTopTab;

    private TradingRecordPagerAdapter mAdapter;

    private ArrayList<Fragment> mFragments;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_investment_management);
        initView();
    }

    private void initView() {

        setTitle("交易记录");
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mViewPager.setOnPageChangeListener(this);

        mTopTab = (RadioGroup) findViewById(R.id.top_tab);
        mTopTab.setOnCheckedChangeListener(this);

        mFragments = new ArrayList<Fragment>();
        mFragments.add(new BiddingFragment());
        mFragments.add(new PaymentingFragment());
        mFragments.add(new BiddingFragment());

        mAdapter = new TradingRecordPagerAdapter(getSupportFragmentManager());
        mAdapter.bindData(mFragments);
        mViewPager.setAdapter(mAdapter);

    }

    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {

        int currentItem = mViewPager.getCurrentItem();

     switch (checkedId) {
            case R.id.left_tab:
                if (currentItem != 0) {
                    mViewPager.setCurrentItem(0);
                }
                break;
            case R.id.center_tab:

                if (currentItem != 1) {
                    mViewPager.setCurrentItem(1);
                }
                break;
            case R.id.right_tab:
                if (currentItem != 2) {
                    mViewPager.setCurrentItem(2);
                }
                break;

        }

    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {

        switch (position) {
            case 0:
                mTopTab.check(R.id.left_tab);
                break;
            case 1:
                mTopTab.check(R.id.center_tab);
                break;
            case 2:
                mTopTab.check(R.id.right_tab);
                break;
        }

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    private static class TradingRecordPagerAdapter extends FragmentPagerAdapter {

        private ArrayList<Fragment> fragments = new ArrayList<Fragment>();

        public TradingRecordPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        public void bindData(ArrayList<Fragment> fragments) {
            if (fragments != null) {
                this.fragments = fragments;
            }

        }

        @Override
        public Fragment getItem(int position) {
            return fragments.get(position);
        }

        @Override
        public int getCount() {
            return fragments.size();
        }
    }
}

这样就基本实现我要的效果了，我也是认为我完成了这个效果了，但是当我使用别人的软件的时候发现它们的滑动很流畅。而我的却有一点小卡。当我慢慢滑动ViewPager的时候发现它还会出现tab与他指示的ViewPager页面不一致的问题（快速滑动ViewPager不会出现这个问题，那会我闲得蛋疼，就慢慢的滑动ViewPager居然出现了这个bug），后来通过不懈的努力终于解决了这个问题。其实方法很简单，就是把上边的

switch (position) {
            case 0:
                mTopTab.check(R.id.left_tab);
                break;
            case 1:
                mTopTab.check(R.id.center_tab);
                break;
            case 2:
                mTopTab.check(R.id.right_tab);
                break;
        }

替换成： ((RadioButton)mTopTab.getChildAt(position)).performClick();

然后发现ViewPager的滑动流畅了，tab与他指示的ViewPager页面也不会不一致了。具体原因我正在分析中，当然你要是知道原因不妨告诉我一下。