调整文本以支持多个屏幕

Question

几周以来，我一直在尝试解决如何让我的 UI 文本支持各种不同的设备分辨率和密度的问题，但没有成功。在阅读了开发者指南和multiple stack posts之后，我尝试了很多东西。首先，我创建了layout directories，您可以在下图中看到（layout-sw320dp、layout-sw360dp 和layout-sw400dp）：

现在，如果我在几个不同的 emulators 上测试我的应用程序，UI 的文本 看起来不错，但是当我的 Alpha 测试人员在他们的手机上下载该应用程序时，UI 的文本 放错了位置。这是我试图在所有设备上实现的外观：

下面我添加了 alpha 测试人员使用的 7 种不同设备：

1) S8+ (2960x1440)(529dpi)

2) 三星 Galaxy j7 Prime (1920x1080) (401dpi)

3) S8+ (1440x2960)(~529dpi)

4) 三星 A3 (960x540)(245dpi)

5) Motor z play Droid (1920x1080) (403 dpi)

6) 三星 Galaxy S7 (1440x2560) (577dpi)

7) 索尼 Xperia xa (720x1280)

与他们取得联系后，这些是他们发回给我的图片（不是每个人都回答过）：

2)

5)

6)

7)

我还有这些代码行可以帮助我检查手机是 s8 还是 s8+（因为它们的 18:9 比例需要不同的布局样式）。这会导致问题吗？

        // Get the user's phone's height and width
    DisplayMetrics dm = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(dm);

    // screen size in inches
    int height = dm.heightPixels;
    int width = dm.widthPixels;
    double x = Math.pow(width/dm.xdpi,2);
    double y = Math.pow(height/dm.ydpi,2);
    double screenInches = Math.sqrt(x+y);
    Log.d("SIZE_INCHES", screenInches + "\"");

    // If it's an S8 or S8+ choose the appropriate layout
    if (height > 1920 && height <= 2220) { // FHD+ (2220x1080)
        if(screenInches <= 6.0) {
            setContentView(R.layout.cardview_s8); //s8
        } else {
            setContentView(R.layout.cardview_s8_plus); // s8+
        }
    } else if (height > 2220 && height <= 2960) { // S8 WQHD+ (2960x1440)
        if(screenInches <= 6.0) {
            setContentView(R.layout.cardview_s8_wqhd_res);
        } else {
            setContentView(R.layout.cardview_s8_plus_wqhd); // s8+
        }
    } else { // otherwise choose the appropriate layout for the user's phone based on it's swdp qualifier
        setContentView(R.layout.cardview);
    }

这是我的布局（设计视图）供参考：

这是 xml 代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="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:background="@drawable/card_view_bg"
tools:layout_editor_absoluteY="25dp">

<ImageView
    android:id="@+id/cardArtImageView"
    android:layout_width="400dp"
    android:layout_height="0dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_weight="1"
    android:adjustViewBounds="true"
    android:scaleType="fitCenter"
    app:layout_constraintBottom_toTopOf="@+id/cardDetailsImageView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/cardDetailsImageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:adjustViewBounds="true"
    android:cropToPadding="false"
    android:scaleType="fitXY"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:srcCompat="@drawable/card_details_box" />

<TextView
    android:id="@+id/leaderSkillDesc"
    android:layout_width="300dp"
    android:layout_height="19dp"
    android:layout_marginBottom="8dp"
    android:layout_marginStart="40dp"
    android:layout_marginTop="8dp"
    android:ellipsize="marquee"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:fontFamily="monospace"
    android:marqueeRepeatLimit="marquee_forever"
    android:scrollHorizontally="true"
    android:singleLine="true"
    android:textAlignment="viewStart"
    android:textColor="@color/white"
    android:textSize="13sp"
    android:textStyle="italic"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.496"
    app:layout_constraintStart_toStartOf="@+id/cardDetailsImageView"
    app:layout_constraintTop_toTopOf="@+id/guideline8"
    app:layout_constraintVertical_bias="0.626" />

<TextView
    android:id="@+id/superAttackDesc"
    android:layout_width="314dp"
    android:layout_height="21dp"
    android:layout_marginBottom="8dp"
    android:layout_marginStart="40dp"
    android:layout_marginTop="8dp"
    android:ellipsize="marquee"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:fontFamily="monospace"
    android:marqueeRepeatLimit="marquee_forever"
    android:scrollHorizontally="true"
    android:singleLine="true"
    android:textAlignment="viewStart"
    android:textColor="@android:color/white"
    android:textSize="13sp"
    android:textStyle="italic"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline9" />

<TextView
    android:id="@+id/superAttackTitle"
    android:layout_width="250dp"
    android:layout_height="15dp"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:fontFamily="monospace"
    android:textAlignment="viewStart"
    android:textColor="@android:color/holo_blue_light"
    android:textSize="14sp"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@+id/superAttackDesc"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<android.support.constraint.Guideline
    android:id="@+id/guideline8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="443dp" />

<android.support.constraint.Guideline
    android:id="@+id/guideline9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="596dp" />

</android.support.constraint.ConstraintLayout>

我在这里做错了什么？在我的安卓开发生活中，我从来没有像现在这样困惑过……这份工作有更明确的方法吗？我需要更多layout dirs 或其他什么吗？那 3 个layout dirs 正确吗？如果您知道任何可以帮助我的事情，请在下面发布。

PS：我正在为这部分 UI 使用约束布局，这些约束会导致问题吗？

Answer 1

@Gabe Sechan 已经解决了这个问题（任何人都可以回来查看），请查看帖子下方的 cmets！

Answer 2

您似乎有一张背景图片，并且您正试图将文本放置在该背景图片上的正确位置。您可以将背景图像拆分并用作按钮背景图像吗？更好地使用回收站视图？我现在意识到这些碎片可能无法正确对齐整个图像。艺术家有空吗？祝你好运，我知道让事情在每台设备上运行是多么困难。你似乎对这个概念有很好的理解