调整文字以支持多个屏幕

时间:2017-12-20 18:54:50

标签: android xml android-layout android-studio android-emulator

我几周来一直试图解决如何让我的UI文本支持各种不同的设备分辨率和密度而没有成功的问题。在阅读开发人员指南多个堆栈帖子后,我尝试了很多东西。首先,我创建了layout directories,您可以在下面的图片中看到layout-sw320dplayout-sw360dplayout-sw400dp):

layout dirs

现在,如果我在几个不同的emulators上测试我的应用,用户界面的文字似乎很好,但当我的 Alpha测试人员下载应用时在他们的手机上,用户界面的文字会被放错地方。以下是我试图在所有设备上实现的外观:

desired look

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

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

2)三星galaxy j7 prime(1920x1080)(401dpi)

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

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

5)Motor z播放Droid(1920x1080)(403 dpi)

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

7)Sony Xperia xa(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的这一部分使用约束布局,约束是否可能导致问题?

2 个答案:

答案 0 :(得分:0)

问题已由@Gabe Sechan解决(对于任何检查的人),请查看帖子下方的评论!

答案 1 :(得分:-1)

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