具有滚动功能的自动可调整视图分页器答案

【问题标题】：Auto-Rezisable viewpager with scrolling具有滚动功能的自动可调整视图分页器
【发布时间】：2015-12-27 18:01:34
【问题描述】：

我希望有和活动来显示一些统计数据。在这个活动中，我想输入开始和结束日期，并用它们显示一些统计数据和一些图形。为此，我创建了一个活动，其中我选择输入日期的顶部（如果已修复）。然后我有一个 TablLayout 和一个 viewpager，我在其中显示统计数据和图形。所有这些似乎都可以正常工作，这是result on the activity。但是，我的问题是双重的：一方面，我无法自动调整 viewpager 的大小以适应活动高度并正确显示片段的内容。如果我将 viewpager 设置为 wrap_content 并将片段设置为 match_parent，则不会显示任何内容。但是，如果我手动强制 viewpager 高度，那么我可以看到 viewpager 工作（但不能正确调整活动高度）。另一方面，当我能够看到 viewpager 内容时，我只想滚动 viewpager 的内容。但是，如果我插入一个滚动视图或一个嵌套滚动视图，整个活动就会滚动，这是我不想要的。这是我想将所有这些放在一起的活动布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.app.asaak.activities.InformesActivity"
    tools:showIn="@layout/activity_informes">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_margin="10dp"
        >
        <!-- ================ LAYOUT BOTONES ================ -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            android:weightSum="2"
            >
            <!-- ================ BOTON DESDE ================ -->
            <Button
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/informes_boton_desde"
                android:text="DESDE"
                android:layout_weight="1"
                />
            <!-- ================ BOTON HASTA ================ -->
            <Button
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/informes_boton_hasta"
                android:text="HASTA"
                android:layout_weight="1"
                />
        </LinearLayout>
        <!-- ================ LAYOUT TEXT ================ -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:weightSum="2"
            >
            <!-- ================ TEXTVIEW DESDE ================ -->
            <com.app.asaak.textViews.CTextViewName
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="dd/mm/aaaa"
                android:id="@+id/informes_text_desde"
                android:textSize="20sp"
                android:textAlignment="center"
                />
            <!-- ================ TEXTVIEW HASTA ================ -->
            <com.app.asaak.textViews.CTextViewName
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="dd/mm/aaaa"
                android:id="@+id/informes_text_hasta"
                android:textSize="20sp"
                android:textAlignment="center"
                />
        </LinearLayout>

        <!--        VIEWPAGER               -->
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs_informes"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />

            <!--  VIEWPAGER -->
            <android.support.v4.view.ViewPager
                android:id="@+id/pager_informes"
                android:layout_width="match_parent"
                android:layout_height="1000dp"
                android:layout_below="@id/tabs_informes"
                />

    </LinearLayout>
</RelativeLayout>

这是我想放在标签通知或标签图形上的两个内容的示例。

标签图形：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto">

    <!-- GRAPHICS AND INFORMATION HERE THAT DOESN'T FIT THE ACTIVITY SO MUST BE SCROLLED -->

</LinearLayout>

你可以看到 viewpager 的高度是强制的，如果我放 wrap_content 我什么都看不到。

我该怎么做？谢谢！！

【问题讨论】：

标签： android android-layout android-viewpager android-tablayout

【解决方案1】：

试试这个

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.app.asaak.activities.InformesActivity"
    tools:showIn="@layout/activity_informes">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_margin="10dp"
        >
        <!-- ================ LAYOUT BOTONES ================ -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            android:weightSum="2"
            >
            <!-- ================ BOTON DESDE ================ -->
            <Button
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/informes_boton_desde"
                android:text="DESDE"
                android:layout_weight="1"
                />
            <!-- ================ BOTON HASTA ================ -->
            <Button
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:id="@+id/informes_boton_hasta"
                android:text="HASTA"
                android:layout_weight="1"
                />
        </LinearLayout>
        <!-- ================ LAYOUT TEXT ================ -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:weightSum="2"
            >
            <!-- ================ TEXTVIEW DESDE ================ -->
            <com.app.asaak.textViews.CTextViewName
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="dd/mm/aaaa"
                android:id="@+id/informes_text_desde"
                android:textSize="20sp"
                android:textAlignment="center"
                />
            <!-- ================ TEXTVIEW HASTA ================ -->
            <com.app.asaak.textViews.CTextViewName
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="dd/mm/aaaa"
                android:id="@+id/informes_text_hasta"
                android:textSize="20sp"
                android:textAlignment="center"
                />
        </LinearLayout>

        <!--        VIEWPAGER               -->
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs_informes"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            />

            <!--  VIEWPAGER -->
            <android.support.v4.view.ViewPager
                android:id="@+id/pager_informes"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@id/tabs_informes"
                />

    </LinearLayout>
</RelativeLayout>

将外部linearlayout 高度更改为match_parent。将 TabLayout 高度更改为 0dp 和重量 1。将ViewPager 高度更改为match_parent。

【讨论】：

抱歉，不工作 :/ 我不明白这里的 weight=1。
布局有什么变化吗？
我做了建议的更改，但现在当我按下选项卡时，viewpager 上没有显示任何内容
按钮高度设置为match_parent。换成wrap_content看看能不能用。

【解决方案2】：

将 Tablayout 和 viewpager 更改为：

<!--        TABLAYOUT               -->
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs_informes"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />


            <!--  VIEWPAGER -->
            <android.support.v4.view.ViewPager
                android:id="@+id/pager_informes"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@id/tabs_informes"
                />

每个 tab_layout 的宽度和高度 = match_parent 我现在可以看到已填充的选项卡。但是，我仍然遇到无法滚动 viewpager 内容的问题，所以我只能看到完整内容的一部分。

【讨论】：

【解决方案3】：

实际上我也遇到了同样的情况。我有一个工作。

可以通过扩展 ViewPager 类来实现。创建一个类似

的类

public class WrapContentHeightViewPager extends ViewPager {

    /**
     * Constructor
     *
     * @param context the context
     */
    public WrapContentHeightViewPager(Context context) {
        super(context);
    }

    /**
     * Constructor
     *
     * @param context the context
     * @param attrs   the attribute set
     */
    public WrapContentHeightViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        // find the first child view
        View view = getChildAt(0);
        if (view != null) {
            // measure the first child view with the specified measure spec
            view.measure(widthMeasureSpec, heightMeasureSpec);
        }

        setMeasuredDimension(getMeasuredWidth(), measureHeight(heightMeasureSpec, view));
    }

    /**
     * Determines the height of this view
     *
     * @param measureSpec A measureSpec packed into an int
     * @param view        the base view with already measured height
     * @return The height of the view, honoring constraints from measureSpec
     */
    private int measureHeight(int measureSpec, View view) {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        if (specMode == MeasureSpec.EXACTLY) {
            result = specSize;
        } else {
            // set the height from the base view if available
            if (view != null) {
                result = view.getMeasuredHeight();
            }
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }
}

这个类保证view pager的高度和里面的view一致。

创建类后，只需将布局中的 ViewPager 替换为您创建的自定义视图寻呼机。喜欢：

<com.your.packagename.WrapContentHeightViewPager
                android:id="@+id/pager_informes"
                android:layout_width="match_parent"
                android:layout_height="1000dp"
                android:layout_below="@id/tabs_informes"
                />

希望这会奏效！

【讨论】：

好的，我做了您建议的更改，但内容仍然不适合我的 Galaxy SIV，因此我需要上下滚动查看器的内容，但我不能。我尝试启用嵌套滚动，但没有任何变化。
布局中视图寻呼机的布局高度是多少？ @asaak
我尝试了 wrap_contet 并使用第一个片段，而不是第二个片段。第二个片段没有显示任何内容，而我之前能够看到这两个图表
哦，你的页面高度是动态的？
顺便说一句，我使用的是 viewpagerstateadapter

【解决方案4】：

在尝试了建议的解决方案后，我添加了一个滚动视图：

<ScrollView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                <!--  VIEWPAGER -->
                <com.app.asaak.support.HeightAdaptableViewPager
                    android:id="@+id/pager_informes"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp"
                    android:layout_marginBottom="20dp"
                    android:layout_below="@id/tabs_informes"
                    />

                </ScrollView>

现在它适用于第一个选项卡，但是当我更改为第二个选项卡时（其中我有这个：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:layout_marginTop="10dp"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <com.jjoe64.graphview.GraphView
        android:layout_width="match_parent"
        android:layout_height="200dip"
        android:id="@+id/grafico_turnos" />

    <com.jjoe64.graphview.GraphView
        android:layout_width="match_parent"
        android:layout_height="200dip"
        android:layout_marginTop="10dp"
        android:id="@+id/grafico_reservas" />

</LinearLayout>

我看不到它们，即使我在其标签上上下滚动。看起来图表在某个地方，但我无法滚动到达它们，因为我无法滚动足够多。

另一个奇怪的事情是，即使我在片段中插入边距，当我显示统计边距时，底部边距也不会得到尊重，因此选项卡末尾的边距不会正确显示。

【讨论】：

【解决方案5】：

事实证明这比我想象的要容易！经过大量尝试并在您的帮助下，我找到了解决方案。只需使用常规 viewPager 并设置 height = match_parent。然后在两个选项卡的布局中插入一个具有 height = wrap_content 的 Scrollview 就可以了，按预期工作！

谢谢你们！

【讨论】：