android - 对齐 View 以模拟数学积分表达式

Question

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

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

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

我想让被积函数的 View 向内移动到长垂直 View 的右侧。然而，其他 View 的中心对齐使得无法实现这一点。

如果我在单独的布局中将三个 View 居中对齐，如果上限和下限 View 变大，第四个 View 将离长垂直 View 太远。

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

<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

我在相对布局中使用了相对布局，并为此布局使用了 anchor 。

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