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