视图重叠

Question

在我的Android应用程序中，我有一个RelativeLayout，其中包含一些片段。 但是，此布局不能缩放到不同的屏幕尺寸。 当屏幕尺寸为对角线5.2英寸，1080x1920分辨率420dpi时，请考虑以下屏幕截图：（理想的输出）

当我将手机更改为5.0英寸，1080x1920分辨率xxhdpi时，得到以下显示：

如您所见，右侧两列上的按钮重叠，这是我要问的问题。

这是主要的活动XML文件，其中包含各种片段

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:style="http://schemas.android.com/apk/res-auto"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="8dp">

    <!--This is the box appearing at the top of the layout-->
    <TextView
        android:id="@+id/window"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/window_border"
        android:fontFamily="monospace"
        android:minLines="1"
        android:text=""
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textIsSelectable="true"/>

    <!--This is the first row of buttons, there are 4 of them-->
    <fragment
        android:id="@+id/screenOps"
        android:name="net.magnistudio.deskcalculator.ScreenOps"
        android:layout_width="wrap_content"
        android:layout_alignEnd="@+id/digits"
        android:layout_height="wrap_content"
        android:layout_below="@+id/window"
        tools:layout="@layout/layout_screen_ops"/>

    <!--This is the 3x3 rectangle appearing directly below the screenOps
        frag -->
    <fragment
        android:id="@+id/digits"
        android:name="net.magnistudio.deskcalculator.Digits"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        tools:layout="@layout/layout_digits"
        android:layout_alignBottom="@+id/basicOps"/>

    <!--This is the rightmost fragment-->
    <fragment
        android:id="@+id/basicOps"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:name="net.magnistudio.deskcalculator.BasicOps"
        tools:layout="@layout/layout_basic_ops"
        android:layout_alignParentEnd="true"
        android:layout_below="@+id/window"/>

    <!--Lower fragment, it is 6x4-->
    <fragment
        android:id="@+id/scientific"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:name="net.magnistudio.deskcalculator.Scientific"
        tools:layout="@layout/layout_scientific"
        android:layout_below="@+id/digits"/>
</RelativeLayout>

每个按钮都有这种风格

<style name="calcBtnAppearance">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">@color/calcBtn</item>
    <item name="android:textStyle">normal</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:layout_width">0dp</item>
</style>

我认为一种解决方案是根据当前手机的大小以编程方式调整布局的大小，但是也许这只是在地毯下扫除了其他问题（布局本身）？

同样，每个按钮都位于LinearLayout内，该位置位于片段的LinearLayout的内部。 请考虑以下来自片段布局文件的样本摘录：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="3">

        <Button
            android:id="@+id/dig7"
            style="@style/calcBtnAppearance"


            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text=""/>
        more buttons
    </LinearLayout>
<LinearLayout>

Answer 1

在RelativeLayout中，根据子项之间的相对形式来排列子项。 据我所知，如果分辨率或屏幕尺寸发生变化，RelativeLayout不会缩放包含的元素。

也许您应该在这里看看：[ https://stackoverflow.com/a/21381065/6908102 ] [1]

可能的解决方案：

要将按钮的大小调整为相应的分辨率，请为每个分辨率创建一个单独的“值”文件夹。 （另请参见图2标记为蓝色）。

-图片2-

然后在每个文件夹中创建一个新的“ dimens.xml”文件。

举个例子：

res / values / dimens.xml ：

<resources>
<!-- ButtonSize -->
    <dimen name="dimenButtonHeight">15dp</dimen>
    <dimen name="dimenButtonWidth">25dp</dimen>
</resources>

res / values-xxhdpi / dimens.xml ：

<resources>
<!-- ButtonSize -->
    <dimen name="dimenButtonHeight">10dp</dimen>
    <dimen name="dimenButtonWidth">20dp</dimen>
</resources>

当然，您仍然必须根据布局调整尺寸规格。

res / values / style.xml ：在Style.xml文件中，您必须添加以下行：

<style name="calcBtnAppearance">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">@color/calcBtn</item>
    <item name="android:textStyle">normal</item>
    <item name="android:textAllCaps">false</item>

    <item name="android:layout_height">@dimen/dimenButtonHeight</item>
    <item name="android:layout_width">@dimen/dimenButtonWidth</item>
</style>

也许那可以解决您的问题。 否则，如图2所示，您可以为每个Resolution创建一个单独的“ layout”文件夹。 然后将文件从标准布局文件夹复制到新创建的文件夹中并进行调整，或者您也可以按不同的顺序放置项目。 但是还有更多工作要做。