android xml中屏幕外的元素

Question

所以我正在尝试在一个 android 项目上修复我的 UI，但是某些元素最终会在我当前的 xml 中脱离屏幕。我不知道为什么，这就是我问这个问题的原因。

我有一个包含歌曲的列表视图和两个带有当前歌曲的艺术家和歌曲名称的文本视图。在其中，我有 3 个浮动操作按钮。 （前进、播放/暂停/下一个）

代码：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listContainer"
        android:layout_marginBottom="100dp"
        >
        <ListView
            android:id="@+id/list_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clipToPadding="false"
            android:paddingBottom="@dimen/activity_vertical_margin"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:paddingTop="@dimen/activity_vertical_margin"/>
    </LinearLayout>
    <TextView
        android:id="@+id/currentSongName"
        android:layout_below="@+id/listContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#B2B6B8"
        android:text="TEST"
        />
    <TextView
        android:id="@+id/currentSongArtist"
        android:layout_below="@+id/currentSongName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#B2B6B8"
        android:text="TEST"
        />
    <LinearLayout
        android:layout_below="@+id/currentSongArtist"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:weightSum="3"
        android:background="#B2B6B8"
        >

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/prev_song"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin"
            android:src="@android:drawable/ic_media_previous" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/play_pause"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin"
            android:src="@android:drawable/ic_media_pause" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/next_song"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="@dimen/fab_margin"
            android:src="@android:drawable/ic_media_next" />

    </LinearLayout>
</RelativeLayout>

但是，当我使用时；

android:layout_below="@+id/listContainer"

在第一个 textView 中，listContainer 下面的所有 UI 元素都消失了。 当我删除它时，所有所说的元素都与列表视图的顶部和顶部对齐。

为什么会这样，如何放置文本字段和按钮线性布局，使其在列表视图边距下方对齐？

Answer 1

问题是您的ListView 及其父LinearLayout 的高度为match_parent。这意味着这两个元素将与父元素一样高。

如果您尝试将视图放置在占据整个屏幕高度的视图下方，它们将位于屏幕底部下方的某个位置。

“正确”的解决方案在某种程度上取决于您的具体目标。有时您需要从下而上而不是自上而下考虑布局。一种解决方案是这样的，它将底部视图与屏幕底部以及该视图上方的列表对齐：

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

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_view" />

    <TextView
        android:id="@+id/bottom_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" />

</RelativeLayout>