Android布局问题：如何阻止Tools视图占满屏幕？

我来帮你排查并解决这个布局问题！先理清楚你的需求：顶部固定高度的Chart Name，中间Tools只占自身内容高度，剩下的空间给ChartGrid，底部还有广告条。现在的问题是Tools直接撑满了屏幕，把ChartGrid挤没了，原因主要在ViewPager的高度计算和约束链配置上。

问题场景回顾 #

你要实现的垂直堆叠布局：

• 顶部：固定尺寸的Chart Name文本
• 中间：带3个标签页的Tools（ViewPager），仅占用自身所需空间
• 底部上方：ChartGrid填充剩余屏幕空间
• 最底部：广告条

但实际运行时，Tools视图占满了ChartGrid的位置，导致ChartGrid完全无法显示，移除Tools后ChartGrid正常。

相关代码 #

主布局代码

<android.support.constraint.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> 
    <TextView android:id="@+id/textViewChartName" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> 
    <fragment android:id="@+id/fragment_tools" android:name="com.path.appname.fragments.ToolsFragment" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toBottomOf="@+id/textViewChartName" tools:layout="@layout/fragment_tools" /> 
    <fragment android:id="@+id/fragment_chartGrid" android:name="com.path.appname.fragments.ChartGridFragment" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintBottom_toTopOf="@+id/au_adView" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/fragment_tools" app:layout_constraintVertical_chainStyle="spread" app:layout_constraintVertical_weight="5" tools:layout="@layout/fragment_chart_grid" /> 
    <com.google.android.gms.ads.AdView android:id="@+id/au_adView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_gravity="bottom" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> 
</android.support.constraint.ConstraintLayout>

Tools Fragment布局（fragment_tools.xml）

<android.support.constraint.ConstraintLayout android:id="@+id/chart_tools" android:layout_width="match_parent" android:layout_height="wrap_content"> 
    <android.support.constraint.ConstraintLayout android:layout_width="0dp" android:layout_height="wrap_content" android:id="@+id/toolsWrapper" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent"> 
        <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_height="wrap_content" android:layout_width="match_parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"/> 
        <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/tabs" /> 
    </android.support.constraint.ConstraintLayout> 
</android.support.constraint.ConstraintLayout>

ChartGrid Fragment布局（fragment_chartGrid.xml）

<android.support.constraint.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"> 
    <com.path.appname.models.ChartGrid android:id="@+id/chartGrid" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> 
</android.support.constraint.ConstraintLayout>

问题根源 #

1. ViewPager的wrap_content不生效：默认情况下，ViewPager不会自动计算当前显示Fragment的高度，它会尽可能占用所有可用空间，直接把Tools Fragment的高度撑大到填满剩余屏幕。
2. 主布局约束链不完整：Tools Fragment只设置了顶部约束，没有和下方的ChartGrid建立底部约束，导致ConstraintLayout无法正确分配空间，ChartGrid被挤得没有位置。

修复方案 #

1. 让ViewPager自动适配子页面高度 #

默认的ViewPager不支持wrap_content，我们需要给它添加监听，让它根据当前显示的Fragment高度调整自身高度。在ToolsFragment的代码里添加以下逻辑：

ViewPager pager = view.findViewById(R.id.pager);
pager.setAdapter(yourPagerAdapter);

// 页面切换时重新测量高度
pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

    @Override
    public void onPageSelected(int position) {
        pager.requestLayout();
    }

    @Override
    public void onPageScrollStateChanged(int state) {}
});

// 自定义测量逻辑，让ViewPager适应子Fragment高度
pager.setOnMeasureListener((widthMeasureSpec, heightMeasureSpec) -> {
    int desiredHeight = 0;
    View currentChild = pager.getChildAt(pager.getCurrentItem());
    if (currentChild != null) {
        // 测量子视图的高度
        currentChild.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
        desiredHeight = currentChild.getMeasuredHeight();
    }
    // 设置ViewPager的精确高度
    heightMeasureSpec = MeasureSpec.makeMeasureSpec(desiredHeight, MeasureSpec.EXACTLY);
    pager.onMeasure(widthMeasureSpec, heightMeasureSpec);
});

2. 完善主布局的约束链 #

给Tools Fragment添加底部约束，让它和ChartGrid形成完整的垂直约束关系，同时移除ChartGrid上不必要的权重配置：

修改主布局中的Tools Fragment：

<fragment android:id="@+id/fragment_tools" 
    android:name="com.path.appname.fragments.ToolsFragment" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    app:layout_constraintTop_toBottomOf="@+id/textViewChartName"
    app:layout_constraintBottom_toTopOf="@+id/fragment_chartGrid" <!-- 新增底部约束 -->
    tools:layout="@layout/fragment_tools" />

修改ChartGrid Fragment，移除多余的链样式和权重：

<fragment android:id="@+id/fragment_chartGrid" 
    android:name="com.path.appname.fragments.ChartGridFragment" 
    android:layout_width="match_parent" 
    android:layout_height="0dp" 
    app:layout_constraintBottom_toTopOf="@+id/au_adView" 
    app:layout_constraintEnd_toEndOf="parent" 
    app:layout_constraintStart_toStartOf="parent" 
    app:layout_constraintTop_toBottomOf="@+id/fragment_tools" 
    <!-- 移除这两行：app:layout_constraintVertical_chainStyle="spread" app:layout_constraintVertical_weight="5" -->
    tools:layout="@layout/fragment_chart_grid" />

3. 简化Tools Fragment的布局 #

Tools Fragment外层的ConstraintLayout是多余的，直接简化布局，同时给ViewPager添加底部约束：

<android.support.constraint.ConstraintLayout android:id="@+id/toolsWrapper" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 
    <android.support.design.widget.TabLayout android:id="@+id/tabs" 
        android:layout_height="wrap_content" 
        android:layout_width="match_parent" 
        app:layout_constraintTop_toTopOf="parent" 
        app:layout_constraintStart_toStartOf="parent"/> 
    <android.support.v4.view.ViewPager android:id="@+id/pager" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        app:layout_constraintStart_toStartOf="parent" 
        app:layout_constraintTop_toBottomOf="@+id/tabs" 
        app:layout_constraintBottom_toBottomOf="parent"/> <!-- 新增底部约束 -->
</android.support.constraint.ConstraintLayout>

做完这些修改后，Tools区域只会占用自身内容的高度，剩余空间会被ChartGrid自动填充，底部广告条也能正常显示，和你的预期效果一致。

内容的提问来源于stack exchange，提问作者Sharon