如何重叠三个大小相同的视图，它们之间的视图较小？答案

【问题标题】：How do I overlap three equally-sized views with smaller views between them?如何重叠三个大小相同的视图，它们之间的视图较小？
【发布时间】：2016-10-13 17:30:04
【问题描述】：

我正在尝试使三个按钮等距并垂直对齐，它们之间的圆圈重叠如下：

我遇到了困难，因为需要一个 LinearLayout 来平衡三个按钮的权重，但重叠视图最容易在 RelativeLayout 和 FrameLayout 中完成（我需要支持

当我将“OR”圆圈放在 Frame/RelativeLayouts 中时，没有简单的方法可以将它们设置为视图高度的 1/3，以便它们位于按钮之间。

如何将带有 OR 圆圈的 FrameLayout 分成三份以正确放置圆圈？

【问题讨论】：

我几乎用 PercentRelativeLayout 和负边距来处理“或”，但即使有代码，我仍然无法让那些虫子出现在按钮前面。
呵呵，PercentRelativeLayout我没用过……只要显示中最顶部的view在RelativeLayout的底部，就应该显示在顶部？
这就是我所做的，但它们仍然在按钮下方。我认为这与按钮可点击而文本视图不可点击的事实有关。我什至尝试过bringToFront()，但无法成功。

标签： android android-layout android-linearlayout android-xml android-framelayout

【解决方案1】：

我做了以下 xml 编码并生成类似的输出

    <?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="3"
        android:gravity="center"
         >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:text="dd"
            android:background="#CCCCCC"
            android:gravity="center"
            android:layout_margin="5dp"
            android:layout_weight="1"/>



        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:text="dd"
            android:layout_margin="5dp"
            android:background="#CCCCCC"
            android:gravity="center"
            android:layout_weight="1"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_margin="5dp"
            android:text="dd"
            android:background="#CCCCCC"
            android:gravity="center"
            android:layout_weight="1"/>

    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:weightSum="3"
        android:gravity="center"
        android:layout_height="match_parent">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <TextView
                android:layout_width="30dp"
                android:background="#000000"
                android:text="OR"
                android:textColor="#FFFFFF"
                android:gravity="center"
                android:layout_height="30dp" />
        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <TextView
                android:layout_width="30dp"
                android:background="#000000"
                android:text="OR"
                android:textColor="#FFFFFF"
                android:gravity="center"
                android:layout_height="30dp" />
        </LinearLayout>



    </LinearLayout>

</FrameLayout>

【讨论】：

只是尝试将此代码粘贴到您的 xml 中它应该可以工作。我在我的 xml 中做过
经过测试，它与 XML 完美配合。它根本不会干扰我布局中的按钮。

【解决方案2】：

我找不到直接的解决方案，所以我正在回答我自己的问题！如果您有更好的解决方案，请告诉我。

我想出的解决方案是将按钮布局在 LinearLayout 中的 FrameLayout 中，并适当地调整它们的权重。 OR 圆圈放置在按钮之后的FrameLayout 中，以便将它们绘制在顶部。但是，它们并没有定位在 xml 中。

在onCreate() 中，我用按钮测量了LinearLayout 的绘制大小，然后将 OR 圆移动了三分之一加上圆的半径。

这里是相关的 XML。重点是：

FrameLayout 包装器，匹配父级以显示全区域按钮。
LinearLayout 按钮的包装器，匹配父级。
Button 高度全部设置为 0dp 和 layout_weight="1"

TextViews 用于 OR 圆圈水平居中，但不垂直调整。注意它们的直径是30dp

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/buttons_container">

    <Button
        android:id="@+id/record_topic_option_1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:onClick="topic1"
        android:theme="@style/PrimaryButton"/>

    <Button
        android:id="@+id/record_topic_option_2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp"
        android:onClick="topic2"
        android:theme="@style/PrimaryButton" />

    <Button
        android:id="@+id/record_topic_option_3"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:onClick="topic3"
        android:theme="@style/PrimaryButton" />
</LinearLayout>

<TextView
    android:id="@+id/top_or"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:textAlignment="center"
    android:text="OR"
    android:layout_gravity="center_horizontal"
    android:gravity="center"
    android:textSize="@dimen/material_text_caption"
    android:textColor="@android:color/white"
    android:background="@drawable/or_circle_background"
    />

<TextView
    android:id="@+id/bottom_or"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:textAlignment="center"
    android:layout_gravity="center_horizontal"
    android:gravity="center"
    android:text="OR"
    android:textSize="@dimen/material_text_caption"
    android:textColor="@android:color/white"
    android:background="@drawable/or_circle_background" />

一旦设置好，诀窍就是在onCreate()中以编程方式调整圆圈

final View buttonContainer = findViewById(R.id.buttons_container);
View topOr = findViewById(R.id.top_or);
View bottomOr = findViewById(R.id.bottom_or);

//Get the 15dp radius in pixels at the current screen density.
final int added_height_for_radius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
15, getResources().getDisplayMetrics());

//Use a ViewTreeObserver to make sure that the view is drawn and you get an accurate measurement of the LinearLayout with buttons
buttonContainer.getViewTreeObserver().addOnGlobalLayoutListener(
        new ViewTreeObserver.OnGlobalLayoutListener() {
    @SuppressLint("NewApi")
    @SuppressWarnings("deprecation")
    @Override
    public void onGlobalLayout() {
        int width = buttonContainer.getWidth();
        int height = buttonContainer.getHeight();

        //Moving the topOr and bottomOr by setting the top margin to height/3-radius and 2*height/3-radius
        FrameLayout.LayoutParams params = (FrameLayout.LayoutParams)topOr.getLayoutParams();
        params.setMargins(0, (height/3)-added_height_for_radius, 0, 0);
        topOr.setLayoutParams(params);

        FrameLayout.LayoutParams params2 = (FrameLayout.LayoutParams)bottomOr.getLayoutParams();
        params2.setMargins(0, (2*height/3)-added_height_for_radius, 0, 0);
        bottomOr.setLayoutParams(params2);
        buttonContainer.getViewTreeObserver().removeOnGlobalLayoutListener(this);
    }
});

感谢 Get height and width of a layout programmatically

【讨论】：