代码之家 › 专栏 › 技术社区 › Stelios Papamichail

调整文本以支持多个屏幕

android-emulator android-studio android-layout xml android

Stelios Papamichail · 技术社区 · 8 年前

几周来,我一直在努力解决如何使UI的文本支持各种不同的设备分辨率和密度的问题,但没有成功。阅读后 开发人员指南 和 多个堆叠柱 ,我尝试了很多东西。首先,我创建了 layout directories 如下图所示( layout-sw320dp , layout-sw360dp 和 layout-sw400dp ) :

现在如果我在几个不同的平台上测试我的应用程序 emulators 这个 UI的文本 看起来不错但当我 阿尔法测试器 在他们的手机上下载应用程序 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)

在与他们取得联系后,这些是他们发给我的图片(还不是每个人都回答):

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

我做错了什么?在我的android开发生涯中,我从未如此困惑过。。。这项工作有没有更明确的方法?我需要更多吗 layout dirs 还是什么?那是3个吗 布局目录 对的如果你知道什么可以帮助我,请把它贴在下面。

PS:我正在为UI的这一部分使用约束布局,这些约束会导致问题吗?

2 回复 | 直到 8 年前

Stelios Papamichail 8 年前

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

-1

Pomagranite 8 年前

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