Android横向滑动的选项卡

我们这里要实现的就是横向滑动的选项卡，然后点击选项卡的选项，对我们的fragment进行显示。

fragment方面的知识，不做赘述，我的文章Android Fragment的使用 ，我已经说过了，大家可以参考一下。

实现的滑动的选项卡并且切换fragment的效果图如下：

上面的选项卡是可以横向滑动的，相信截图方面还是可以看出来的，下面的显示girdview部分是fragment部分。

横向滑动的选项卡，首先是布局文件：

<LinearLayout
    android:id="@+id/ll_activity_tabbar_all"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/toolbar"
    android:orientation="vertical">

    <HorizontalScrollView
        android:id="@+id/hs_activity_tabbar"
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:background="#4c4c4c"
        android:fadingEdge="none"
        android:scrollbars="none">

        <LinearLayout
            android:id="@+id/ll_activity_tabbar_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"></LinearLayout>
    </HorizontalScrollView>

</LinearLayout>

<FrameLayout
    android:id="@+id/fragment_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="50dp">

</FrameLayout>

这个布局简单说明一下，就是利用横向滑动的选项卡+fragment来实现，从布局也可以看出。

头部的选项卡，使用horizontalScrollView，底部利用framelayout添加fragment。实现点击选项卡，切换相应的fragment页面。

布局完成，就看activity吧。

在我们的主activity中，需要完成的就是：

声明不必多说，这个fragment的声明。

/**
 * 当前的Fragment，以及目标的三个Fragment
 */
public Fragment mContent, fragment_in, fragment_qm, fragment_se;

private HorizontalScrollView hs_activity_tabbar;
private RadioGroup myRadioGroup;
private List<String> titleList;
private LinearLayout ll_activity_tabbar_content;
private float mCurrentCheckedRadioLeft;//当前被选中的RadioButton距离左侧的距离
private String channel;

接下来就是onCreate中的：

titleList = new ArrayList<String>();
titleList.add("入门训练");
titleList.add("启蒙训练");
titleList.add("初级训练");
titleList.add("入门训练");
titleList.add("娱乐");
titleList.add("足球");
titleList.add("巴萨");
titleList.add("汽车");
initGroup();

//三个fragment的创建，以及默认的fragment的设置
fragment_in = new MakePlanFragment();
fragment_qm = new CourseFragment();
fragment_se = new MakePlanFragment();
setDefaultFragment(fragment_in);

然后实现横向滑动选项卡的具体设置：

private void initGroup() {
        hs_activity_tabbar = (HorizontalScrollView) this.findViewById(R.id.hs_activity_tabbar);
        ll_activity_tabbar_content = (LinearLayout) this.findViewById(R.id.ll_activity_tabbar_content);
        //选项卡布局
        myRadioGroup = new RadioGroup(this);
        myRadioGroup.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        myRadioGroup.setOrientation(LinearLayout.HORIZONTAL);
        ll_activity_tabbar_content.addView(myRadioGroup);
        for (int i = 0; i < titleList.size(); i++) {
            String channel = titleList.get(i);
            RadioButton radio = new RadioButton(this);
            radio.setButtonDrawable(android.R.color.transparent);
            radio.setBackgroundResource(R.drawable.bt_selector);
            ColorStateList csl = getResources().getColorStateList(R.color.edit_text_color_pre);
            radio.setTextColor(csl);
            LinearLayout.LayoutParams l = new LinearLayout.LayoutParams((int) SizeHelper.dp2px(this, 120), ViewGroup.LayoutParams.MATCH_PARENT, Gravity.CENTER);
            radio.setLayoutParams(l);
            radio.setTextSize(17);
//            radio.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
            radio.setGravity(Gravity.CENTER);
            radio.setText(channel);
            radio.setTag(channel);
            myRadioGroup.addView(radio);
        }


        myRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                int radioButtonId = group.getCheckedRadioButtonId();
                //根据ID获取RadioButton的实例
                RadioButton rb = (RadioButton) findViewById(radioButtonId);
                channel = (String) rb.getTag();
                mCurrentCheckedRadioLeft = rb.getLeft();//更新当前按钮距离左边的距离
                int width = (int) SizeHelper.dp2px(SettingPlanActivity.this, 200);
                hs_activity_tabbar.smoothScrollTo((int) mCurrentCheckedRadioLeft - width, 0);

		//根据checkedId对我们的对应的选项卡的位置进行事件的触发

if (checkedId == myRadioGroup.getChildAt(0).getId()) { switchContent(fragment_in); } if (checkedId == myRadioGroup.getChildAt(1).getId()) { switchContent(fragment_qm); } if (checkedId == myRadioGroup.getChildAt(2).getId()) { switchContent(fragment_se); } } }); //设定默认被选中的选项卡为第一项 if (!titleList.isEmpty()) { myRadioGroup.check(myRadioGroup.getChildAt(0).getId()); } } 触发fragment的切换交互，是switchContent（）：

//切换fragment的显示隐藏
public void switchContent(Fragment to) {
    if (mContent != to) {
        fm = getFragmentManager();
        ft = fm.beginTransaction();
        if (!to.isAdded()) {    // 先判断是否被add过
            ft.hide(mContent).add(R.id.fragment_content, to).commit(); // 隐藏当前的fragment，add下一个到Activity中
        } else {
            ft.hide(mContent).show(to).commit(); // 隐藏当前的fragment，显示下一个
        }
        mContent = to;
    }
}

设置当我们没有选择选项卡的时候，默认的选项卡的position是0，然后默认显示的fragment进行设置。setDefaultFragment（）：

//设置初始的Fragment
public void setDefaultFragment(Fragment fragment) {
    fm = getFragmentManager();
    ft = fm.beginTransaction();
    ft.add(R.id.fragment_content, fragment).commit();
    mContent = fragment;
}