Android - ScrollView 和 PercentRelativeLayout

Question

我在将 android.support.percent.PercentRelativeLayout 与 ScrollView 结合时遇到问题。以下xml文件

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

<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:background="@color/white"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    >
    <ImageView
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        app:layout_marginTopPercent="5%"
        app:layout_marginLeftPercent="5%"
        android:src="@drawable/o"
        android:id="@+id/imageView3" />
    <ImageView
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        app:layout_marginTopPercent="30%"
        app:layout_marginLeftPercent="5%"
        android:src="@drawable/o"
        android:layout_below="@+id/imageView3"
        android:layout_alignStart="@+id/imageView3"
        android:layout_marginTop="151dp" />
</android.support.percent.PercentRelativeLayout>

打印这个

使用RelativeLayout 可以正常工作。 有谁知道问题出在哪里？谢谢！

编辑：如果我将 ScrollView 高度设置为 1000dp，它也可以正常工作，但我希望高度与元素一样多

Answer 1

我想学习如何使用宽度高度和边距的百分比选项，以便我可以像在 html、css 中一样使用它们。我想将边距设置为 % 而不是 dp 的宽度和高度。

相信您可以以这种方式在 Android 中完成所有布局，这会给您带来麻烦。如果您正在学习 Android 中的 UI 布局，那么第一步就是忘记您所知道的有关 HTML 布局的一切。 HTML 主要是关于文档的。一个好的移动设备 UI 不应该看起来像一个文档。

让我们举一个非常简单的例子：一个按钮。假设您想在布局中放置一个按钮。它应该有多大？好吧，它应该足够大以显示按钮的整个文本。它也不应该占用太多过多的空间。

在设计布局时，您必须记住，您不知道用户的屏幕会有多大。所以如果你说，“我想让我的按钮宽度占屏幕的 20%”，在某些设备上你可能没有足够的空间来显示按钮的整个文本。在其他屏幕上，您可能有一个令人尴尬的空间按钮，其中文本只占实际按钮的很小一部分。

至于边距，Google UI 指南建议以 16dp 为单位的网格间距。所以在手机上，典型的边距是 16dp。在您有更多空间的平板电脑上，48dp 的边距会更合适。使用百分比指定边距会在小型设备上创建打包布局，而在大型布局上会浪费空间。

您必须了解三个主要的尺寸概念：

1. 以与密度无关的像素 (dp) 为单位的绝对测量值。这通常用于边距和填充。

2. match_parent。我希望我的组件占据父组件的整个宽度/高度。

3. wrap_content。我希望我的组件只占用它需要适当显示的宽度/高度，而不是更多。通常这只会用于宽度或高度，但不能同时用于两者。大多数小部件大小调整算法要求至少一侧是“已知”尺寸，以便确定它在另一维度上需要多少空间。

仅使用这三种尺寸，您就可以进行大量的 UI 布局。按钮的最佳尺寸是多少？在手机上，在纵向模式下，android:width="match_parent" 和 android:height="wrap_content"。取手机的整个宽度，但将高度限制为刚好足以显示所有按钮文本。完美。

当然，最终你会想要一个包含两个组件并排的布局。现在你做什么？这是一个使用LinearLayout 并使用android:layout_weight 属性表示的好地方：我希望这两个组件具有相同的宽度（即屏幕宽度的50%）。

然后您可能最终会尝试为平板电脑等更大的设备进行更复杂的布局。这是PercentRelativeLayout 可能最合适的地方。 PercentageRelativeLayout 是一个专门的容器，旨在处理一些更复杂的布局。

如果你想要一个有两个垂直图像并滚动到较小屏幕的布局，我会使用这个：

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:src="@drawable/image1"
            android:adjustViewBounds="true" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/image2"
            android:adjustViewBounds="true" />
    </LinearLayout>
</ScrollView>

滚动容器中的两个图像，与设备一样宽。

谈到ImageView，有一个关于尺寸的技巧。 android:adjustViewBounds="true" 表示：因为我的高度是“wrap_content”（即灵活），所以让我的高度保持与宽度的纵横比。

我建议您阅读有关 UI 布局的 Android 教程，并查看示例项目以了解如何在 Android 中完成布局。

哥们，我明白了。当我第一次学习 Android 布局时，我很惊讶地发现没有标准的百分比类型大小。但随着我在 Android 中进行越来越多的布局，我开始了解组件大小调整的工作原理并变得更好。然后我开始编写自定义组件，使用 Android 内置的功能实现自己的大小调整算法。

坚持下去，在您使用布局一段时间后，一切都会变得有意义。