我們這裡要實現的就是橫向滑動的選項卡，然後點選選項卡的選項，對我們的fragment進行顯示。

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;
}