Question

我想做一些像这样的布局。

这些观点代表：

A是一个消息框。
B是个人资料照片
C是应该在A＆amp; A的右侧的描述。与B

有些条件是： - A应高于B＆amp;与B水平居中 - A的宽度始终大于B. - C的高度始终小于B. - B和C之间应该没有差距

如果我将所有三个对象放在一个容器中，我找不到一种方法来水平对齐A和B中心。（layout_below将B置于A下但左对齐）

我也尝试制作一个包含A和B的容器，但如果是这样的话，我不能把C放在B之后（因为A的宽度大于B，它会导致B和C之间出现间隙）。

有什么办法可以用XML布局来存档吗？

Answer 1

我认为这种布局可能符合您的需求。

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

    <LinearLayout
        android:id="@+id/view_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/view_1"
        android:gravity="center">

        <View
            android:layout_width="100dp"
            android:layout_height="50dp"
            android:background="@android:color/holo_blue_dark"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/view_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/view_1"
        android:layout_alignRight="@id/view_1"
        android:layout_below="@id/view_1"
        android:gravity="center">

        <View
            android:layout_width="50dp"
            android:layout_height="100dp"
            android:background="@android:color/holo_green_dark"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/view_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/view_2"
        android:layout_alignTop="@id/view_2"
        android:layout_toRightOf="@id/view_2"
        android:gravity="center">

        <View
            android:layout_width="75dp"
            android:layout_height="50dp"
            android:background="@android:color/holo_red_dark"/>

    </LinearLayout>

</RelativeLayout>

它符合您的需求：

A：一个消息框应该高于B＆amp;用B
水平居中
B：个人资料照片

C：描述应该在A＆amp;的右侧。与B垂直居中

然而，基于一些假设：

宽度大于 B 宽度。
B 身高大于 C 身高

Answer 2

我个人认为，如果没有您的额外代码，就无法达到您的目的。

我可以通过在视图B中设置android:layout_marginLeft来达到您想要的效果。要使视图以A为中心，您必须始终通过以下公式设置边距：

android:layout_marginLeft = ( (width_from_A / 4) + (width_from_B / 2) )

在下面的示例中，width_from_A == 200dp和width_from_B == 50dp

所以，

android:layout_marginLeft = ( (200 / 4) + (50 / 2) )
android:layout_marginLeft = ( 50 + 25 )
android:layout_marginLeft = 75dp

<强>爪哇

如果视图的宽度不一样，则可以通过Java代码动态设置边距。这应该有效，因为在您的活动中，在向用户显示布局之前，您可以从A获得宽度，从B获得宽度，并为B手动设置LeftMarging。

@Override
protected void onResume() {

    int widthA = findViewById(R.id.viewA).getLayoutParams().width;
    int widthB = findViewById(R.id.viewB).getLayoutParams().width;

    // THIS LINE JUST WORK FOR API>17
    ((RelativeLayout.LayoutParams)findViewById(R.id.viewB).getLayoutParams()).setMarginStart(widthA/4 + widthB/2);

    //FOR ANY API
    ((RelativeLayout.LayoutParams)findViewById(R.id.viewB).getLayoutParams()).setMargins(widthA/4 + widthB/2,0,0,0);

    super.onResume();
}

<强>布局

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

    <TextView
        android:id="@+id/viewA"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:gravity="center"
        android:text="A"
        android:background="@android:color/holo_blue_dark"/>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/viewA">

        <TextView
            android:id="@+id/viewB"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:text="B"
            android:layout_marginLeft="75dp"
            android:background="@android:color/holo_green_dark"/>


        <TextView
            android:id="@+id/viewC"
            android:layout_width="150dp"
            android:layout_height="50dp"
            android:gravity="center"
            android:text="C"
            android:layout_toRightOf="@+id/viewB"
            android:background="@android:color/holo_red_dark"/>
    </RelativeLayout>
</RelativeLayout>

<强>结果

Android相对布局中心水平与另一个视图

2 个答案: