android - 对齐视图以模仿数学积分表达式

Question

我想要有一个复杂的视图排列，最终应该看起来像这样

 ______________
 | upper limit|
 ==============
      ____
      |  |
      |  | ___________
      |  | |Integrand|
      |  | ===========
      ====
    ________
    | low  |
    ========

当然，我尝试了令人讨厌的事情。彼此下方的三个视图 layout_centerHorizo​​ntal 将它们很好地居中，但是相对于整个布局。

我想让 Integrand 的视图向内移动到长垂直视图的右侧。但是，其他视图的中心对齐方式使其无法实现这一目标。

如果我在单独的布局中将三个视图彼此居中对齐，如果上限和下限视图变大，第四个视图将与长垂直视图相距太远。

我认为有一个简单的技巧可以实现它，非常感谢您的帮助。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.example.nestviews.InputView
android:id="@+id/sum_upperlimit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="10" />
<com.example.nestviews.LabelView
android:id="@+id/sum_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="-10dp"
android:layout_below="@id/sum_upperlimit"
android:layout_centerHorizontal="true"
android:textSize="40dp"
android:text="\u2211" />
<com.example.nestviews.InputView
android:id="@+id/sum_function"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/sum_label"
android:layout_toRightOf="@id/sum_label"
android:layout_centerHorizontal="false"
android:text="n^2+1" />
<com.example.nestviews.InputView
android:id="@+id/sum_lowerlimit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="@id/sum_label"
android:text="n=1" />
</RelativeLayout>

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

    <View
        android:id="@+id/sum_upperlimit"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_centerHorizontal="true"
        android:background="@android:color/holo_purple" />

    <View
        android:id="@+id/View01"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerHorizontal="true"
        android:background="@android:color/holo_blue_dark" />

    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/relativeLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/View01"
        android:layout_below="@+id/sum_upperlimit" >

        <View
            android:id="@+id/sum_label"
            android:layout_width="200dp"
            android:layout_height="50dp"
            android:layout_centerVertical="true"
            android:background="@android:color/holo_blue_light" />

        <View
            android:id="@+id/sum_function"
            android:layout_width="50dp"
            android:layout_height="300dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:background="@android:color/holo_orange_light" />

        <View
            android:id="@+id/anchor"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:background="@android:color/holo_blue_dark" />
    </RelativeLayout>
     <View
        android:id="@+id/sum_lowerlimit"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_below="@+id/relativeLayout1"
        android:layout_centerHorizontal="true"
        android:background="@android:color/black" />
</RelativeLayout>