Android - 将视图中心与其他视图的底部对齐答案

【问题标题】：Android - Align view center to bottom of other viewAndroid - 将视图中心与其他视图的底部对齐
【发布时间】：2015-07-29 09:56:40
【问题描述】：

一张图片比冗长的演讲更能说明问题：

我想将红色部分的中心与黑色部分的中间垂直对齐。我没有容器的约束（RelativeLayout、FrameLayout、LinearLayout oO）。

我尝试了一个高度为 0dp 的视图与黑色视图的底部对齐，红色视图的 alignBaseline 与它对齐，但它不起作用...

感谢您的帮助！

【问题讨论】：

使用 FrameLayout 作为父级，然后将重力设置为底部。在子设置上边距为子高度/2

标签： android view alignment

【解决方案1】：

这也可以使用ConstraintLayout。类似于如何将视图的开始/结束与父视图对齐，使其在父视图中居中，我们可以使用该概念沿视图的边缘居中。

这个布局的关键是我们底视图的两个约束：

app:layout_constraintTop_toBottomOf="@id/top_view"
app:layout_constraintBottom_toBottomOf="@id/top_view"

通过将下视图的顶部/底部都限制到上视图的底部，布局将调整为沿该底部居中。这是蓝图的完整代码和截图：

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

    <View
        android:id="@+id/top_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/green"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/bottom_view"
        android:layout_width="58dp"
        android:layout_height="58dp"
        android:background="@color/red"
        app:layout_constraintBottom_toBottomOf="@id/top_view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/top_view" />

</android.support.constraint.ConstraintLayout>

【讨论】：

@IgniteCoders 很高兴为您提供帮助！
@AdamMc331 好答案！

【解决方案2】：

Android 现在支持带有 CoordinatorLayout 的布局锚：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <View android:id="@+id/black_view"
        android:layout_width="match_parent" android:layout_height="@dimen/black_height"/>

    <View android:id="@+id/red_view"
        android:layout_width="@dimen/red_width" android:layout_height="@dimen/red_height"
        app:layout_anchor="@id/black_view" app:layout_anchorGravity="bottom|center"/>

</android.support.design.widget.CoordinatorLayout>

如果您在 Java 代码中更改视图的大小，锚点也会保持不变。

【讨论】：

这确实是最好的答案。 CoordinatorLayout 允许精确放置 JosselinTD 试图实现的视图。
非常感谢！ CoordinatorLayout 摇滚！ :)
救命稻草。谢谢
不工作！！它将红色视图与黑色视图的底部对齐，但它重叠了 100%，而不仅仅是 50%！
元问题：为什么这个伟大的答案没有冒泡到顶部？在找到它之前我几乎要继续前进。

【解决方案3】：

最后我用更程序化的方式来解决这个问题，因为Views的大小是不固定的。

这里的解决方案：

布局：

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

            <View
                android:id="@+id/black"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"/>

            <View
                android:id="@+id/red"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true">
        </RelativeLayout>

代码：

            red.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                public void onGlobalLayout() {
                    red.getViewTreeObserver().removeOnGlobalLayoutListener(this);

                    LayoutParams params = new LayoutParams(
                            LayoutParams.MATCH_PARENT,      
                            LayoutParams.WRAP_CONTENT
                            );
                    params.setMargins(0, 0, 0, red.getHeight()/2);
                    black.setLayoutParams(params);
                }
            });

感谢您的帮助！它帮助我找到了这个！

【讨论】：

太棒了！几个月以来，我一直在努力将图像（标记）置于地图的中心，这个解决方案帮助我实现了它！

【解决方案4】：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="25dp"
    android:background="#EEFFFFFF"
    android:orientation="vertical">
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true" />

【讨论】：

【解决方案5】：

在相对布局中尝试 2 个视图。把 1 放在其他下面（使用下面的属性）。也让它们都 layout_centerHorizontal=true。

你可以在底部做一个负填充，把它提升到上面。

祝你好运:)

【讨论】：

【解决方案6】：

这里我使用两个不同的View 作为黑色和红色。

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

    <View
        android:layout_width="match_parent"
        android:layout_height="300dp" 
        android:background="@android:color/black"
        android:id="@+id/blackContainer" />

    <View
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@android:color/holo_red_light"
        android:layout_below="@+id/blackContainer"
        android:layout_marginTop="-50dp"/>

</RelativeLayout>

诀窍是我将红色容器放在黑色容器下方，并将其 marginTop 设置为其高度的负一半。所以红色容器的中心在黑色容器的底部。

【讨论】：

【解决方案7】：

尝试做相反的事情。首先锚定较小的视图并相应地放置另一个视图。像这样的：

<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<View
    android:layout_width="100dp"
    android:layout_height="200dp"
    android:layout_centerHorizontal="true"
    android:layout_alignBottom="@+id/anchor"
    android:background="@color/black" />

<View
    android:layout_width="80dp"
    android:layout_height="50dp"
    android:layout_centerInParent="true"
    android:background="@color/light_grey"/>

<View
    android:id="@+id/anchor"
    android:layout_centerInParent="true"
    android:layout_width="0dp"
    android:layout_height="0dp"/>

</RelativeLayout>

【讨论】：