radiobutton + horizontalScrollvi

1533885385603.jpg

1、页面布局

fragment_train.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <View
            style="@style/horizontal_line"
            android:layout_centerVertical="true"></View>

        <HorizontalScrollView
            android:id="@+id/horizontalscrollview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/padding_large"
            android:fillViewport="false"
            android:scrollbars="none"></HorizontalScrollView>

    </RelativeLayout>

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

product_view.xml

<?xml version="1.0" encoding="utf-8"?>
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:id="@+id/radio_group">
</RadioGroup>

2、核心代码

public class TrainFragment extends BaseFragment<TrainPresenter> implements TrainContact.View {


    @BindView(R.id.horizontalscrollview)
    HorizontalScrollView mHorizontalscrollview;
    @BindView(R.id.viewpager)
    ViewPager mViewpager;
    private ArrayList<Fragment> mFragments = new ArrayList<>();
    RadioGroup mRadioGroup;
    private final String[] mTitles = {
            "全部", "培训一", "培训二"
            , "培训三"
    };
    private int _id = 1000;

    @Override
    protected int getLayoutId() {
        return R.layout.fragment_train;
    }

    @Override
    protected void createPresenter() {

    }

    @Override
    protected void initData() {

    }

    @Override
    protected void initView(View rootView) {

        for (int i = 0; i < mTitles.length; i++) {
            mFragments.add(TrainListFragment.getInstance());
        }
        mViewpager.setOffscreenPageLimit(mTitles.length);
        BaseFragmentPagerAdapter adapter = new BaseFragmentPagerAdapter(getChildFragmentManager());
        mViewpager.setAdapter(adapter);
        adapter.setData(mFragments);
        View view = View.inflate(mContext, R.layout.product_view, null);
        mRadioGroup = (RadioGroup) view.findViewById(R.id.radio_group);
        for (int i = 0; i < mTitles.length; i++) {
            //添加radiobutton及设置参数(方便动态加载radiobutton)
            RadioButton rb = new RadioButton(mContext);
            rb.setId(_id + i);
            rb.setText(mTitles[i]);
            rb.setTextSize(16);
            rb.setGravity(Gravity.CENTER);
            //根据需要设置显示初始标签的个数，这里显示4个
            RadioGroup.LayoutParams layoutParams = new RadioGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            layoutParams.setMargins(10, 0, 0, 0);
            rb.setPadding(10, 10, 10, 10);
            rb.setBackgroundResource(R.drawable.selector_blue_coner_bg);
            //**原生radiobutton是有小圆点的，要去掉圆点而且最好按以下设置，设置为null的话在4.x.x版本上依然会出现**
            rb.setButtonDrawable(new ColorDrawable(Color.TRANSPARENT));
            ColorStateList colorStateList = mContext.getResources().getColorStateList(R.drawable.selector_rb_text);
            rb.setTextColor(colorStateList);
            //向radiogroup中添加radiobutton
            mRadioGroup.addView(rb, layoutParams);
        }
        //设置初始check对象（第一个索引从0开始）
        ((RadioButton) mRadioGroup.getChildAt(0)).setChecked(true);
        //监听check对象
        mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                int RadiobuttonId = group.getCheckedRadioButtonId();
                //获取radiobutton对象
                RadioButton bt = (RadioButton) group.findViewById(RadiobuttonId);
                //获取单个对象中的位置
                int index = group.indexOfChild(bt);
                //设置滚动位置，可使点击radiobutton时，将该radiobutton移动至第二位置
                mHorizontalscrollview.smoothScrollTo(bt.getLeft() - (bt.getWidth()), 0);
                //根据点击的radiobutton跳转至不同webview界面
//                webUrlRefresh(ParentItemArr, index);
                mViewpager.setCurrentItem(index);
                float mCurrentCheckedRadioLeft = bt.getLeft();
                mHorizontalscrollview.smoothScrollTo((int) mCurrentCheckedRadioLeft, 0);
            }
        });
        //在mHorizontalScrollView加载mRadioGroup布局
        mHorizontalscrollview.addView(mRadioGroup);

        mViewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            /**
             * 滑动ViewPager的时候,让上方的HorizontalScrollView自动切换
             */
            @Override
            public void onPageSelected(int position) {
                RadioButton radioButton = (RadioButton) getActivity().findViewById(_id + position);
                radioButton.performClick();
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }


}

3、样式文件

selector_blue_coner_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/shape_blue_corner" android:state_checked="true"></item>
    <item android:drawable="@drawable/shape_white_corner" android:state_checked="false"></item>
    <item android:drawable="@drawable/shape_white_corner"></item>

</selector>

shape_blue_corner.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="@dimen/dp5" />
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp" />

    <solid android:color="@color/theme_btn_blue" />
</shape>

shape_blue_corner.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="@dimen/dp5" />
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp" />

    <solid android:color="@color/white" />
    <stroke
        android:width="1dp"
        android:color="@color/theme_divide_line_gray"/>
</shape>

selector_rb_text.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/white" android:state_checked="true"></item>
    <item android:color="@color/theme_text_black" android:state_checked="false"></item>
    <item android:color="@color/theme_text_black"></item>

</selector>