LayoutInflater弄乱了UI

Question

我的目标

1. 导航到导航标签栏上的项目（ViewPager上的视图会打开）。

2. 然后我点击ViewPager显示的视图内的按钮，按钮方法是postForm（下面的代码）。

3. 它应该隐藏ViewPager，并在其上显示ConstraintLayout和inflate activity_post_form.xml。

4. 工作但是弄乱了用户界面。

代码

public void postForm(View view) {
    //Set ViewPager Invisible
    ViewPager viewp = (ViewPager) findViewById(R.id.vp_horizontal_ntb);
    viewp.setVisibility(View.GONE);

    //Set the constraint layout visible so we can inflate the view on it
    ConstraintLayout item = (ConstraintLayout) findViewById(R.id.inConstraint);
    item.setVisibility(View.VISIBLE);

    //Inflate and add
    View child = getLayoutInflater().inflate(R.layout.activity_post_form, null);
    item.addView(child);
}

设计



结果



主要活动



主要活动的XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="#423752"
    android:orientation="vertical"
    android:id="@+id/linearRootView">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/inConstraint"
        android:visibility="gone"
        android:layout_weight="1"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_horizontal_ntb"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <devlight.io.library.ntb.NavigationTabBar
        android:id="@+id/ntb_horizontal"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:ntb_badge_gravity="top"
        app:ntb_badge_position="right"
        app:ntb_badged="true"
        app:ntb_scaled="true"
        app:ntb_tinted="true"
        app:ntb_title_mode="all"
        app:ntb_titled="true"
        app:ntb_swiped="true"/>

</LinearLayout>