在 Android 的 RelativeLayout 中从底部和顶部定位视图

Question

我有一个非常简单的布局，有两个 TextViews 一个在另一个下面，在这些 TextViews 下面我有三个水平对齐 ImageViews。

当设置位置彼此下方并指定上边距时，我能够相对放置这些视图。但是对于三个ImageViews，我希望能够设置距屏幕底部的边距。不幸的是，我无法使用 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:id="@+id/layoutMain"
    tools:context=".MainActivity$PlaceholderFragment">

    <TextView android:id="@+id/section_label" android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_width="300sp"
        android:layout_height="300sp"
        android:textSize="250sp"
        android:textStyle="bold"
        android:textColor="@android:color/black"
        android:textAlignment="center"
        android:gravity="center"
        android:id="@+id/imgItem"
        android:layout_marginTop="2sp"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="35sp"
        android:textStyle="bold"
        android:textColor="@android:color/black"
        android:textAlignment="center"
        android:gravity="center"
        android:text="Large Text"
        android:id="@+id/txtItemSmall"
        android:layout_below="@+id/imgItem"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10sp" />

    <View
        android:layout_width="match_parent"
        android:id="@+id/dividerTop"
        android:alpha="0.5"
        android:layout_height="3dp"
        android:background="@android:color/black"
        android:layout_below="@id/imgItem"
        android:layout_marginTop="115sp"/>

    <ImageView
        android:layout_width="64sp"
        android:layout_height="64sp"
        android:alpha="0.5"
        android:layout_marginTop="10sp"
        android:id="@+id/btnRandom"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/dividerTop"
        android:src="@drawable/ic_random"/>

    <ImageView
        android:layout_width="64sp"
        android:layout_height="64sp"
        android:alpha="0.5"
        android:layout_marginTop="10sp"
        android:layout_marginRight="50sp"
        android:id="@+id/btnPrevious"
        android:layout_below="@id/dividerTop"
        android:layout_toLeftOf="@id/btnRandom"
        android:src="@drawable/ic_previous"/>

    <ImageView
        android:layout_width="64sp"
        android:layout_height="64sp"
        android:alpha="0.5"
        android:layout_marginTop="10sp"
        android:layout_marginLeft="50sp"
        android:id="@+id/btnNext"
        android:layout_below="@id/dividerTop"
        android:layout_toRightOf="@id/btnRandom"
        android:src="@drawable/ic_next"/>

    <View
        android:layout_width="match_parent"
        android:id="@+id/dividerBottom"
        android:alpha="0.5"
        android:layout_height="3dp"
        android:background="@android:color/black"
        android:layout_below="@id/btnRandom"
        android:layout_marginTop="10sp"/>

</RelativeLayout>

Answer 1

将三个 ImageView 包裹在水平线性布局中并将线性布局与底部父级对齐并设置 Margin_Bottom

 <RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="64sp"
  android:layout_marginTop="10dp"
  android:layout_below="@id/dividerTop"
  android:layout_alignParentBottom="true"
  android:layout_marginbottom="50dp" > <-- your own offset from bottom --!>

    <ImageView
        android:layout_width="64sp"
        android:layout_height="64sp"
        android:alpha="0.5"
        android:id="@+id/btnRandom"
        android:layout_centerHorizontal="true"
        android:src="@drawable/ic_random"/>

    <ImageView
        android:layout_width="64sp"
        android:layout_height="64sp"
        android:alpha="0.5"
        android:layout_marginRight="50sp"
        android:id="@+id/btnPrevious"
        android:layout_toLeftOf="@id/btnRandom"
        android:src="@drawable/ic_previous"/>

    <ImageView
        android:layout_width="64sp"
        android:layout_height="64sp"
        android:alpha="0.5"
        android:layout_marginLeft="50sp"
        android:id="@+id/btnNext"
        android:layout_toRightOf="@id/btnRandom"
        android:src="@drawable/ic_next"/>

 </RelativeLayout>

Answer 2

您可以使用 LinearLayout 或 RelativeLayout 包装 ImageView。然后使用 android:layout_alignParentBottom="true"

    <RelativeLayout
        ...
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="100dp">

        <ImageView
        ...
    </RelativeLayout>

Answer 3

你可以这样做

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layoutMain"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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=".MainActivity$PlaceholderFragment">

    <TextView
        android:id="@+id/section_label"
        android:layout_width="wrap_content"
        android:text="Hiii"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/imgItem"
        android:layout_width="300sp"
        android:layout_height="300sp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="2sp"
        android:gravity="center"
        android:textAlignment="center"
        android:text="Hiiii2"
        android:textColor="@android:color/black"
        android:textSize="250sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/txtItemSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imgItem"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10sp"
        android:gravity="center"
        android:text="Large Text"
        android:textAlignment="center"
        android:textColor="@android:color/black"
        android:textSize="35sp"
        android:textStyle="bold" />

    <View
        android:id="@+id/dividerTop"
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:layout_above="@id/btnRandom"
        android:alpha="0.5"
        android:background="@android:color/black" />

    <ImageView
        android:id="@+id/btnRandom"
        android:layout_width="64sp"
        android:layout_height="64sp"
        android:layout_above="@id/dividerBottom"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="10dp"
        android:alpha="0.5"
        android:src="@drawable/ic_random" />

    <ImageView
        android:id="@+id/btnPrevious"
        android:layout_width="64sp"
        android:layout_height="64sp"
        android:layout_above="@id/dividerBottom"
        android:layout_marginRight="50sp"
        android:layout_marginBottom="10dp"
        android:layout_toLeftOf="@id/btnRandom"
        android:alpha="0.5"
        android:src="@drawable/ic_previous" />

    <ImageView
        android:id="@+id/btnNext"
        android:layout_width="64sp"
        android:layout_height="64sp"
        android:layout_above="@id/dividerBottom"
        android:layout_marginLeft="50sp"
        android:layout_marginBottom="10dp"
        android:layout_toRightOf="@id/btnRandom"
        android:alpha="0.5"
        android:src="@drawable/ic_next" />

    <View
        android:id="@+id/dividerBottom"
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:layout_alignParentBottom="true"
        android:alpha="0.5"
        android:background="@android:color/black" />

</RelativeLayout>

并使用 dp 而不是 sp 作为边距。

Answer 4

终于明白了自己。需要按照您希望从底部定位的顺序添加视图，并且不能按照它们在屏幕上出现的顺序进行添加。以下是更新后的布局，完全符合预期。

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:id="@+id/layoutMain"
    tools:context=".MainActivity$PlaceholderFragment">

    <TextView android:id="@+id/section_label" android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_width="300sp"
        android:layout_height="300sp"
        android:textSize="250sp"
        android:textStyle="bold"
        android:textColor="@android:color/black"
        android:textAlignment="center"
        android:gravity="center"
        android:id="@+id/imgItem"
        android:layout_marginTop="2sp"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="35sp"
        android:textStyle="bold"
        android:textColor="@android:color/black"
        android:textAlignment="center"
        android:gravity="center"
        android:text="Large Text"
        android:id="@+id/txtItemSmall"
        android:layout_below="@+id/imgItem"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10sp" />



    <View
        android:id="@+id/dividerBottom"
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="70sp"
        android:alpha="0.5"
        android:background="@android:color/black" />



    <ImageView
        android:layout_width="64sp"
        android:layout_height="64sp"
        android:alpha="0.5"
        android:id="@+id/btnRandom"
        android:layout_centerHorizontal="true"
        android:layout_above="@id/dividerBottom"
        android:layout_marginBottom="10sp"
        android:src="@drawable/ic_random"/>

    <ImageView
        android:layout_width="64sp"
        android:layout_height="64sp"
        android:alpha="0.5"
        android:layout_marginRight="50sp"
        android:id="@+id/btnPrevious"
        android:layout_above="@id/dividerBottom"
        android:layout_marginBottom="10sp"
        android:layout_toLeftOf="@id/btnRandom"
        android:src="@drawable/ic_previous"/>

    <ImageView
        android:layout_width="64sp"
        android:layout_height="64sp"
        android:alpha="0.5"
        android:layout_marginLeft="50sp"
        android:id="@+id/btnNext"
        android:layout_above="@id/dividerBottom"
        android:layout_marginBottom="10sp"
        android:layout_toRightOf="@id/btnRandom"
        android:src="@drawable/ic_next"/>

    <View
        android:layout_width="match_parent"
        android:id="@+id/dividerTop"
        android:alpha="0.5"
        android:layout_height="3dp"
        android:background="@android:color/black"
        android:layout_above="@id/btnRandom"
        android:layout_marginBottom="10sp" />

</RelativeLayout>

在 Android 的 RelativeLayout 中从底部和顶部定位视图

Positioning of Views from bottom as well as top in RelativeLayout in Android

android

android-layout

android-relativelayout