带有 RelativeLayout 的 ScrollView 弄乱了我的视图

Question

我的 xml 有问题。我有下面的 RelativeLayout.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.maps.spotme.BranchDetails" >

    <ImageView
        android:id="@+id/pointPicture"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="5dp"
        android:contentDescription="@string/contentDescriptor"
        android:scaleType="center"
        android:src="@drawable/piraios" />

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/pointPicture"
        android:layout_marginLeft="25dp"
        android:layout_toRightOf="@+id/pointPicture"
        android:ellipsize="marquee"
        android:gravity="left"
        android:textSize="17sp"
        android:textStyle="bold" />

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:layout_alignLeft="@+id/pointPicture"
        android:layout_below="@+id/pointPicture"
        android:layout_marginTop="20dp"
        android:background="#000000"
        android:contentDescription="@string/contentDescriptor"
        android:src="@android:drawable/divider_horizontal_bright" />

    <TextView
        android:id="@+id/province"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/street"
        android:layout_below="@+id/street"
        android:ellipsize="marquee"
        android:gravity="left"
        android:scrollHorizontally="true"
        android:singleLine="false"
        android:textSize="14sp" />

    <ImageView
        android:id="@+id/addressIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/pointPicture"
        android:layout_below="@+id/pointPicture"
        android:layout_marginTop="40dp"
        android:contentDescription="@string/contentDescriptor"
        android:src="@drawable/address" />

    <TextView
        android:id="@+id/street"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/addressIcon"
        android:layout_toRightOf="@+id/pointPicture"
        android:ellipsize="marquee"
        android:gravity="left"
        android:scrollHorizontally="true"
        android:singleLine="false"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/distanceMeters"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/distanceIcon"
        android:layout_marginBottom="7dp"
        android:layout_marginLeft="15dp"
        android:layout_toRightOf="@+id/distanceIcon"
        android:textSize="14sp" />

    <Button
        android:id="@+id/phone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/addressIcon"
        android:layout_below="@+id/province"
        android:layout_marginTop="20dp"
        android:background="?android:selectableItemBackground"
        android:drawableLeft="@drawable/phone"
        android:drawablePadding="15dp"
        android:paddingTop="0dp"
        android:textSize="14sp" />

    <ImageView
        android:id="@+id/distanceIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/phone"
        android:layout_below="@+id/phone"
        android:layout_marginTop="20dp"
        android:contentDescription="@string/contentDescriptor"
        android:src="@drawable/distance" />

    <ImageView
        android:id="@+id/openClose"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@+id/phone"
        android:layout_marginRight="45dp"
        android:layout_marginTop="7dp"
        android:contentDescription="@string/contentDescriptor"
        android:src="@drawable/open" />

    <Button
        android:id="@+id/toMap"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/distanceMeters"
        android:layout_alignBottom="@+id/distanceMeters"
        android:layout_alignLeft="@+id/openClose"
        android:background="?android:selectableItemBackground"
        android:drawableLeft="@drawable/map"
        android:drawablePadding="15dp"
        android:text="@string/toMap"
        android:textSize="14sp" />

    <Button
        android:id="@+id/showTimetable"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/distanceIcon"
        android:layout_below="@+id/distanceIcon"
        android:layout_marginTop="20dp"
        android:background="?android:selectableItemBackground"
        android:drawableLeft="@drawable/diary"
        android:drawablePadding="15dp"
        android:text="@string/timetable"
        android:textSize="14sp" />

    <Button
        android:id="@+id/reportBroken"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/showTimetable"
        android:layout_below="@+id/showTimetable"
        android:layout_marginTop="14dp"
        android:background="?android:selectableItemBackground"
        android:drawableLeft="@drawable/error"
        android:drawablePadding="15dp"
        android:text="@string/broken"
        android:textSize="14sp" />

</RelativeLayout>

这是这张图片中的视图（没有滚动视图）

https://imageshack.us/i/p8PI7EpSp

当我尝试添加滚动视图时，关闭的图标乱七八糟

https://imageshack.us/i/f0Fz1DPEp

我已经尝试了在 Whosebug 中找到的许多解决方案，如下所示（箭头表示 children）

相对 -> 滚动 -> 相对
滚动 -> 线性 -> 相对

但似乎无法解决问题。有什么想法吗？提前谢谢你

更新

滚动视图xml

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#FFFFFF"
    android:fillViewport="true"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.maps.spotme.BranchDetails" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <!-- The yellow imageView in the beginning  -->
        <ImageView
            android:id="@+id/pointPicture"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginTop="5dp"
            android:contentDescription="@string/contentDescriptor"
            android:scaleType="center"
            android:src="@drawable/piraios" />

        <!-- The name next to the yellow imageView  -->
        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/pointPicture"
            android:layout_marginLeft="25dp"
            android:layout_toRightOf="@+id/pointPicture"
            android:ellipsize="marquee"
            android:gravity="left"
            android:textSize="17sp"
            android:textStyle="bold" />

        <!-- The horizontal line  -->
        <ImageView
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:layout_alignLeft="@+id/pointPicture"
            android:layout_below="@+id/pointPicture"
            android:layout_marginTop="20dp"
            android:background="#000000"
            android:contentDescription="@string/contentDescriptor"
            android:src="@android:drawable/divider_horizontal_bright" />

        <!-- The second textView next to the road icon  -->
        <TextView
            android:id="@+id/province"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/street"
            android:layout_below="@+id/street"
            android:ellipsize="marquee"
            android:gravity="left"
            android:scrollHorizontally="true"
            android:singleLine="false"
            android:textSize="14sp" />

        <!-- The road icon  -->
        <ImageView
            android:id="@+id/addressIcon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/pointPicture"
            android:layout_below="@+id/pointPicture"
            android:layout_marginTop="40dp"
            android:contentDescription="@string/contentDescriptor"
            android:src="@drawable/address" />

        <!-- The first textView next to the road icon  -->
        <TextView
            android:id="@+id/street"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/addressIcon"
            android:layout_toRightOf="@+id/pointPicture"
            android:ellipsize="marquee"
            android:gravity="left"
            android:scrollHorizontally="true"
            android:singleLine="false"
            android:textSize="14sp" />

        <!-- The m. icon text  -->
        <TextView
            android:id="@+id/distanceMeters"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/distanceIcon"
            android:layout_marginBottom="7dp"
            android:layout_marginLeft="15dp"
            android:layout_toRightOf="@+id/distanceIcon"
            android:textSize="14sp" />

        <!-- The phone icon with the phone text -->
        <Button
            android:id="@+id/phone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/addressIcon"
            android:layout_below="@+id/province"
            android:layout_marginTop="20dp"
            android:background="?android:selectableItemBackground"
            android:drawableLeft="@drawable/phone"
            android:drawablePadding="15dp"
            android:paddingTop="0dp"
            android:textSize="14sp" />

        <!-- The m. icon  -->
        <ImageView
            android:id="@+id/distanceIcon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/phone"
            android:layout_below="@+id/phone"
            android:layout_marginTop="20dp"
            android:contentDescription="@string/contentDescriptor"
            android:src="@drawable/distance" />

        <!-- The closed icon (where the problem is) -->
        <ImageView
            android:id="@+id/openClose"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignTop="@+id/phone"
            android:layout_marginRight="45dp"
            android:layout_marginTop="7dp"
            android:contentDescription="@string/contentDescriptor"
            android:src="@drawable/open" />

        <!-- The map icon  -->
        <Button
            android:id="@+id/toMap"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/distanceMeters"
            android:layout_alignBottom="@+id/distanceMeters"
            android:layout_alignLeft="@+id/openClose"
            android:background="?android:selectableItemBackground"
            android:drawableLeft="@drawable/map"
            android:drawablePadding="15dp"
            android:text="@string/toMap"
            android:textSize="14sp" />

        <!-- The calendar icon  -->
        <Button
            android:id="@+id/showTimetable"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/distanceIcon"
            android:layout_below="@+id/distanceIcon"
            android:layout_marginTop="20dp"
            android:background="?android:selectableItemBackground"
            android:drawableLeft="@drawable/diary"
            android:drawablePadding="15dp"
            android:text="@string/timetable"
            android:textSize="14sp" />

        <!-- The exclamation mark(!) icon  -->
        <Button
            android:id="@+id/reportBroken"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/showTimetable"
            android:layout_below="@+id/showTimetable"
            android:layout_marginTop="14dp"
            android:background="?android:selectableItemBackground"
            android:drawableLeft="@drawable/error"
            android:drawablePadding="15dp"
            android:text="@string/broken"
            android:textSize="14sp" />
    </RelativeLayout>

</ScrollView>

Answer 1

我可能错了，但布局尺寸对我来说似乎不对。

您目前正在使用 wrap_content 在 ScrollView 上设置 width/height，这意味着 openClose 上的 45dp 边距导致内容溢出，我相信。

试试这个：

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    android:fillViewport="true"
    tools:context="com.maps.spotme.BranchDetails" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin" >

        <!-- Your Content Here -->

    </RelativeLayout>
</ScrollView>

带有 RelativeLayout 的 ScrollView 弄乱了我的视图

ScrollView with RelativeLayout messes up my view

android

scrollview

android-layout

android-relativelayout