如何将一个盒子的中心与另一个盒子的左边缘对齐？答案

【问题标题】：How to align the center of a box with the left edge of another box?如何将一个盒子的中心与另一个盒子的左边缘对齐？
【发布时间】：2016-05-21 15:29:02
【问题描述】：

Image of what I want to do

我想将较小的红色框的中心与黑框的左边缘对齐。红色框的宽度和高度设置为 wrap_content 并且里面有一个文本视图。黑框占据了屏幕宽度的一半。它采用线性布局，左右两侧各有一个垫片，垫片的重量为 0.25，而黑盒的重量为 0.5。

我更喜欢在 XML 中执行此操作不使用边距。红框可能包含2个或20个字符，内容来自服务器。

只有“toLeftOf”和“alignLeft”。我想要做的基本上是“将盒子的中心对齐到另一个盒子的左边缘”。

【问题讨论】：

标签： android layout alignment center android-relativelayout

【解决方案1】：

这是您想要的仅使用 XML 的简单实现。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
    android:layout_width="100dp"
    android:layout_height="50dp"
    android:id="@+id/imageView"
    android:background="#000000"
    android:layout_marginLeft="50dp" />
<ImageView
    android:layout_width="50dp"
    android:layout_height="25dp"
    android:id="@+id/imageView2"
    android:background="#ff0000"
    android:layout_marginTop="-40dp"
    android:layout_marginLeft="25dp" />

【讨论】：

这使用边距意味着事先知道大小。
框中的文本可能是 2 个字符或 20 个字符，我不能使用边距。
你能发布一份你当前的 XML 的副本吗，我可以根据它来回答。

【解决方案2】：

您可以根据自己的目的尝试此 xml。但是你想要动态内容的黑框中心，但不推荐，原因是，如果内容太长或太短，在 UI 中都不会好看，因为你想动态保持红框的宽度以及左边缘的中心也是。所以黑盒大小也需要每次都改变。这是不好的。请尝试我的解决方案，您可以随时根据您的思考过程修改此布局。

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

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


        <View
            android:id="@+id/view_1"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_marginLeft="50dp"
            android:layout_marginRight="50dp"
            android:background="#000000" />


        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/view_1"
            android:layout_centerVertical="true"
            android:background="#ff0000">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="10dp"
                android:text="Hi"
                android:textColor="#ffffff" />


        </RelativeLayout>

    </RelativeLayout>
</RelativeLayout>

希望对你有帮助！

【讨论】：