视图重叠

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 内。考虑以下片段布局文件的示例摘录：

<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）。

- Picture 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 所示，为每个分辨率的同义词创建一个单独的“布局”文件夹。然后将标准布局文件夹中的文件复制到新创建的文件夹中并调整它们，或者您也可以以不同的顺序放置项目。但是还有一点工作要做。