Android - 将视图中心对齐到其他视图的底部

Android - Align view center to bottom of other view

图片胜于长篇大论:

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

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

感谢您的帮助!

在相对布局中尝试 2 个视图。将 1 放在其他下方(使用下方 属性)。 也使它们都 layout_centerHorizontal=true.

你可以对底部进行负填充以将其提升到上方。

祝你好运:)

<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" />

这里我用了两种不同的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 设置为其高度的负一半。所以红色容器的中心在黑色容器的底部。

尝试反其道而行之。首先锚定较小的视图,然后相应地放置另一个视图。像这样:

<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>

最后,我用更程序化的方式解决了这个问题,因为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);
                }
            });

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

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 代码中更改视图的大小,锚点也会保留。

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

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

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

通过将下视图的 top/bottom 约束到上视图的底部,布局将调整为沿底部居中。这是蓝图的完整代码和屏幕截图:

<?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>