调整文本以支持多个屏幕

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了调整文本以支持多个屏幕相关的知识，希望对你有一定的参考价值。

几周以来，我一直在努力解决如何使我的UI文本支持各种不同的设备分辨率和密度而没有成功的问题。阅读开发人员指南和多个堆栈帖子后，我尝试了很多东西。首先，我创建了layout directories，你可以在下图中看到（layout-sw320dp，layout-sw360dp和layout-sw400dp）：

layout dirs

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

desired look

下面我将添加7个不同的设备，alpha测试人员使用这些设备：

1）S8 +（2960x1440）（529dpi）

2）三星galaxy j7 prime（1920x1080）（401dpi）

3）S8 +（1440x2960）（~529dpi）

h）三星I（960540）（245p）

5）Moto z玩Droid（1920x1080）（403 dpi）

I）三星Galaxy True（1440为0行）（hdb）

7）索尼Xperia遥控器（720x1280）

与他们取得联系后，这些是他们寄回给我的照片（并非所有人都回答）：

2）2nd

5）5th

6）6th

7）7th

我也有这些代码行，可以帮助我检查手机是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);
    }

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

layout

这是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>

我在这做错了什么？我在Android开发过程中的生活中从未如此困惑......是否有更明确的工作方式？我需要更多layout dirs或其他什么？这3个layout dirs是正确的吗？如果你知道任何可以帮助我的事情，请在下面发布。

PS：我在UI的这一部分使用约束布局，约束是否可能导致问题？

答案

这个问题已经被@Gabe Sechan解决了（对于任何检查过的人），请查看帖子下方的评论！

另一答案

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

以上是关于调整文本以支持多个屏幕的主要内容，如果未能解决你的问题，请参考以下文章

支持动态或静态片段的不同屏幕尺寸？

如何调整textview的大小以不超出屏幕

调整按钮以适应不同的屏幕尺寸

如何调整 UIButton 的大小以适应文本而不使其比屏幕更宽？

调整 UILabel 以对齐屏幕右侧

textView自动调整文本以填充宽度