Question

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

我遇到了困难，因为需要使用LinearLayout来均衡三个按钮，但是在RelativeLayout和FrameLayout中最容易完成重叠视图（我需要支持＆lt; 21 SDK，所以我不能使用z-index的LinearLayout）。

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

如何将FrameLayout与OR圈分成三等分以正确放置圆圈？

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

Answer 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

如何将三个大小相同的视图重叠在一起？

2 个答案: