交换ViewPager单片段

我有一个活动，其根布局是一个抽屉布局，主要内容是一个观点寻呼机（和com.astuetz.viewpager.extensions.PagerSlidingTabStrip协助viewpager。现在我想做的事情是，当一个特定的产品在导航抽屉选择，视图寻呼机（带标签名条沿）获取一个片段取代我的活动布局文件是这样的：

I have an activity whose root layout is a drawer layout, with main content being a view pager (and com.astuetz.viewpager.extensions.PagerSlidingTabStrip to assist viewpager. Now what i want to do is that when a particular item is selected in the navigation drawer, the view pager (along with the tab names strip) gets replaced by a single fragment. My activity layout file is this:

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools" 
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <com.astuetz.viewpager.extensions.PagerSlidingTabStrip
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="48dip"
            android:background="@drawable/background_tab"
            app:underlineColor="#E67E22"
            app:indicatorColor="#E67E22" />

        <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tabs"
            tools:context=".UserActivity" >
        </android.support.v4.view.ViewPager>


        <FrameLayout android:id="@+id/fragmentToSwap"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    </RelativeLayout>

    <ListView android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="#666"
        android:background="#E8E8E8"
        />
</android.support.v4.widget.DrawerLayout>

现在这就是我试图取代片段的观点寻呼机。我不知道这个我自己，有点糊涂把这些元素替代方法。

Now this is what i am trying to replace the view pager with fragment. I am not sure about this myself, a bit confused which element to put in replace method.

UserProfileActivity userProfileFragment = new UserProfileActivity();
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
transaction.replace(R.id.fragmentToSwap, userProfileFragment);
transaction.addToBackStack(null);
transaction.commit();

目前什么正在发生的是新的片段元素重叠视图寻呼机，而我仍然能够使用的视图寻呼机的背景。请帮我找到答案。

What currently is happening is the new fragment elements overlap the view pager while i am still able to use the view pager in background. Please help me figure it out.