我想做一个顶部tab的ViewPager搭配FragmentPagerAdapter,但是写出来的效果很奇怪，Fragment的界面会整个挡住TabLayout。
如图：

我的代码如下：
其中一个Fragment

 public class FragmentA extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.frag_a,container,false);
        TextView textView = (TextView) view.findViewById(R.id.tvA);
        textView.setText("这个就是踌躇满志");
        return view;
    }
}

它所对应的XML

    

    


这是MainActivity:
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;                            //定义TabLayout
private ViewPager viewPager;                             //定义viewPager
private ViewPagerAdapter pagerAdapter;                               //定义adapter

private List fragments;                                //定义要装fragment的列表
private String[] titles = new String[]{"踌躇满志","混吃等死","吾日三省"};                                     //tab名称数组


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                    .setAction("Action", null).show();
        }
    });
    initView();
}

private void initView() {
    viewPager = (ViewPager) findViewById(R.id.vp);
    tabLayout = (TabLayout) findViewById(R.id.tl);
    fragments = new ArrayList<>();
    Fragment fragmentA = new FragmentA();
    Fragment fragmentW = new FragmentW();
    Fragment fragmentR = new FragmentR();
    fragments.add(fragmentA);
    fragments.add(fragmentW);
    fragments.add(fragmentR);
    pagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(),fragments,titles);
    tabLayout.setTabMode(TabLayout.MODE_FIXED);
    viewPager.setAdapter(pagerAdapter);
    tabLayout.setupWithViewPager(viewPager);
}
........

这是主布局：

同样的Fragment及其布局使用同样的代码，TabLayout替换成第三方的indicator则不会有此问题。
下面是布局和Fragment都没有改，替换indicator之后的截图：

求大神给小白解惑，我是更喜欢用TabLayout的毕竟设置样式不用到style里面去改，很方便。有大神遇到过这个问题么？