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

时间:2015-07-29 09:56:41

标签: android view alignment

一张图片讲述的不仅仅是冗长的演讲: enter image description here

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

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

感谢您的帮助!

7 个答案:

答案 0 :(得分:24)

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代码中视图的大小,锚也将保持不变。

答案 1 :(得分:9)

也可以使用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>

enter image description here

答案 2 :(得分:3)

最后,我使用更加编程的方式来解决这个问题,因为视图的大小并不固定。

这里是解决方案:

布局:

        <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);
                }
            });

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

答案 3 :(得分:0)

在相对布局中尝试2个视图。将1放在其他下方(使用以下属性)。 同时使它们都为layout_centerHorizo​​ntal = true。

你可以在底部填充一个负填充物,将它从上部填充。

祝你好运:)

答案 4 :(得分:0)

<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 :(得分:0)

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

答案 6 :(得分:0)

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

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