ScrollView 内的 PercentRelativeLayout

Question

我使用ScrollView 创建了一个布局，它的子级为PercentRelativeLayout。它不适用于 Lollipop 和旧设备，但适用于 Marshmallow 设备。请检查以下代码：

<ScrollView
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <android.support.percent.PercentRelativeLayout
        android:id="@+id/scrollContent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_heightPercent="100%"
        app:layout_widthPercent="50%">

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_red_dark"
            android:text="kkjknadko"
            android:textColor="@android:color/black"
            app:layout_heightPercent="10%"
            app:layout_widthPercent="50%"/>

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textView1"
            android:text="Abcaad"
            android:textColor="@android:color/black"
            app:layout_heightPercent="10%"
            app:layout_marginTopPercent="10%"
            app:layout_widthPercent="50%"/>

        <TextView
            android:id="@+id/textview3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textview2"
            android:background="@android:color/holo_red_dark"
            android:text="Abcd"
            android:textColor="@android:color/black"
            app:layout_heightPercent="10%"
            app:layout_marginTopPercent="10%"
            app:layout_widthPercent="50%"/>

        <TextView
            android:id="@+id/textview4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textview3"
            android:text="Abcd"
            android:textColor="@android:color/black"
            app:layout_heightPercent="10%"
            app:layout_marginTopPercent="10%"
            app:layout_widthPercent="50%"/>

        <TextView
            android:id="@+id/textview5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textview4"
            android:background="@android:color/holo_red_dark"
            android:text="Abcd"
            android:textColor="@android:color/black"
            app:layout_heightPercent="10%"
            app:layout_marginTopPercent="10%"
            app:layout_widthPercent="50%"/>

        <TextView
            android:id="@+id/textview6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textview5"
            android:text="Abcd"
            android:textColor="@android:color/black"
            app:layout_heightPercent="10%"
            app:layout_marginTopPercent="10%"
            app:layout_widthPercent="50%"/>

        <TextView
            android:id="@+id/textview7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textview6"
            android:text="Abcd"
            android:textColor="@android:color/black"
            app:layout_heightPercent="10%"
            app:layout_marginTopPercent="10%"
            app:layout_widthPercent="50%"/>

        <TextView
            android:id="@+id/textview8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textview7"
            android:text="Abcd"
            android:textColor="@android:color/black"
            app:layout_heightPercent="10%"
            app:layout_marginTopPercent="10%"
            app:layout_widthPercent="50%"/>

    </android.support.percent.PercentRelativeLayout>
</ScrollView>

还有我android:fillViewport="true"，它在 Lollipop 和较早的 Android 版本中没有显示任何内容。

不幸的是，百分比布局不适用于 M 之前的 ScrollView。原因是它们取决于测量步骤中传递的尺寸提示。在 M 之前，大多数布局在发送未指定的度量规范时会提供大小提示 0。

您可以尝试通过创建自己的 ScrollView 子类来解决此问题 并覆盖 measureChild 和 measureChildWithMargins （幸运的是两者都受到保护）以提供尺寸提示。

来源 - plus.google.com。

有人可以帮助我创建自定义 ScrollView 以使其正常工作吗？

Answer 1

创建一个自定义scrollview 并根据需要设置Measured Height 和Width例如

自定义滚动视图

public class CustomScrollView extends ScrollView {


    public CustomScrollView(Context context) {
        super(context);
    }

    public CustomScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public CustomScrollView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int size = 0;
        int width = getMeasuredWidth();
        int height = getMeasuredHeight();

        if (width > height) {
            size = height;
        } else {
            size = width;
        }
        setMeasuredDimension(size, size);
    }
}

在您的 xml 中使用 customscrollview。

    <yourscrollviewclasspath.CustomScrollView           // here you have scrollview path like com.yourpackage.folder_where_your_scrollview_lies
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        >
</yourscrollviewclasspath.CustomScrollView >

希望这会有所帮助。

Answer 2

据我了解，问题是：我希望这些 TextView 的宽度为父视图的 50%。

适合我的方法是：

<Space
    android:layout_width="20dp"
    android:layout_height="20dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:id="@+id/space" />

然后将视图与其对齐。 RelativeLayout 或 TextViews。你失去了对相对布局百分比的控制（如果你曾经有过的话）。我倾向于这样做：

    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceMedium"

这有帮助吗？

Answer 3

我在使用 android K 和 android L 时遇到了同样的问题。

您可以使用约束布局而不是百分比相对布局，但似乎也存在滚动问题。即使是其他答案中建议的自定义滚动视图也对我没有帮助。

虽然有办法。

将您的百分比相对布局转换为相对布局，并根据您的设备高度以编程方式设置视图的高度。

相对布局滚动似乎没有问题。您可以使用“空间”视图作为 TextView 之间的边距。这不是一个非常优雅的解决方案，但对我来说它有效。

Java 代码：

int height = getWindowManager().getDefaultDisplay().getHeight();
int width = getWindowManager().getDefaultDisplay().getWidth();

// to set height to each textview to 10% of screen
textView1.getLayoutParams().height = (int) (height * 0.10);
textView2.getLayoutParams().height = (int) (height * 0.10);
textView3.getLayoutParams().height = (int) (height * 0.10);
textView4.getLayoutParams().height = (int) (height * 0.10);
textView5.getLayoutParams().height = (int) (height * 0.10);
textView6.getLayoutParams().height = (int) (height * 0.10);

// to set width to each textview to 50% of screen
textView1.getLayoutParams().width = (int) (width * 0.50);
textView2.getLayoutParams().width = (int) (width * 0.50);
textView3.getLayoutParams().width = (int) (width * 0.50);
textView4.getLayoutParams().width = (int) (width * 0.50);
textView5.getLayoutParams().width = (int) (width * 0.50);
textView6.getLayoutParams().width = (int) (width * 0.50);

// for margin between textviews
space1.getLayoutParams().height = (int) (height * 0.10);
space2.getLayoutParams().height = (int) (height * 0.10);
space3.getLayoutParams().height = (int) (height * 0.10);
space4.getLayoutParams().height = (int) (height * 0.10);
space5.getLayoutParams().height = (int) (height * 0.10);

XML 代码：

<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">

<RelativeLayout
    android:id="@+id/scrollContent"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_red_dark"
        android:text="kkjknadko"
        android:textColor="@android:color/black"/>

    <android.support.v4.widget.Space
        android:id="@+id/space1"
        android:layout_below="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/space1"
        android:text="Abcaad"
        android:textColor="@android:color/black"/>

    <android.support.v4.widget.Space
        android:id="@+id/space2"
        android:layout_below="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/space2"
        android:background="@android:color/holo_red_dark"
        android:text="Abcd"
        android:textColor="@android:color/black"/>

    <android.support.v4.widget.Space
        android:id="@+id/space3"
        android:layout_below="@+id/textView3"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/space3"
        android:text="Abcd"
        android:textColor="@android:color/black"/>

    <android.support.v4.widget.Space
        android:id="@+id/space4"
        android:layout_below="@+id/textView4"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content" />

    <TextView
        android:id="@+id/textview5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/space4"
        android:background="@android:color/holo_red_dark"
        android:text="Abcd"
        android:textColor="@android:color/black"/>

    <android.support.v4.widget.Space
        android:id="@+id/space5"
        android:layout_below="@+id/textview5"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content" />

    <TextView
        android:id="@+id/textview6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/space5"
        android:text="Abcd"
        android:textColor="@android:color/black"/>

</RelativeLayout>

Answer 4

在 ScrollView 之后添加一个 Layout，因为 ScrollView 只能与一个子布局一起使用。

<?xml version="1.0" encoding="utf-8" ?>
<ScrollView
    android:id="@+id/scrollView"
    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"
    android:fillViewport="true">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.percent.PercentRelativeLayout
            android:id="@+id/scrollContent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_heightPercent="100%"
            app:layout_widthPercent="50%">

            <TextView
                android:id="@+id/textView1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/holo_red_dark"
                android:text="kkjknadko"
                android:textColor="@android:color/black"
                app:layout_heightPercent="10%"
                app:layout_widthPercent="50%"/>

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/textView1"
                android:text="Abcaad"
                android:textColor="@android:color/black"
                app:layout_heightPercent="10%"
                app:layout_marginTopPercent="10%"
                app:layout_widthPercent="50%"/>

            <TextView
                android:id="@+id/textview3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/textView2"
                android:background="@android:color/holo_red_dark"
                android:text="Abcd"
                android:textColor="@android:color/black"
                app:layout_heightPercent="10%"
                app:layout_marginTopPercent="10%"
                app:layout_widthPercent="50%"/>

            <TextView
                android:id="@+id/textview4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/textview3"
                android:text="Abcd"
                android:textColor="@android:color/black"
                app:layout_heightPercent="10%"
                app:layout_marginTopPercent="10%"
                app:layout_widthPercent="50%"/>

            <TextView
                android:id="@+id/textview5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/textview4"
                android:background="@android:color/holo_red_dark"
                android:text="Abcd"
                android:textColor="@android:color/black"
                app:layout_heightPercent="10%"
                app:layout_marginTopPercent="10%"
                app:layout_widthPercent="50%"/>

            <TextView
                android:id="@+id/textview6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/textview5"
                android:text="Abcd"
                android:textColor="@android:color/black"
                app:layout_heightPercent="10%"
                app:layout_marginTopPercent="10%"
                app:layout_widthPercent="50%"/>

            <TextView
                android:id="@+id/textview7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/textview6"
                android:text="Abcd"
                android:textColor="@android:color/black"
                app:layout_heightPercent="10%"
                app:layout_marginTopPercent="10%"
                app:layout_widthPercent="50%"/>

            <TextView
                android:id="@+id/textview8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/textview7"
                android:text="Abcd"
                android:textColor="@android:color/black"
                app:layout_heightPercent="10%"
                app:layout_marginTopPercent="10%"
                app:layout_widthPercent="50%"/>

        </android.support.percent.PercentRelativeLayout>

    </LinearLayout>

</ScrollView>