Мой интерфейс выглядит по-разному в конструкторе и на устройстве

Question

Разрешение моего телефона составляет 720x1280, и я использую это разрешение в Android Studio при разработке своего приложения. Я скопировал изображения и источник 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">

<TextView
    android:id="@+id/textView19"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:text="Államadósság-Kezelő Központ"
    android:textAppearance="@style/TextAppearance.AppCompat.Large"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />


    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="515dp"

        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView19"
        app:layout_constraintVertical_bias="0.0">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"

            android:layout_height="match_parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="1.0">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <LinearLayout
                    android:id="@+id/linearLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="8dp"
                    android:layout_marginEnd="8dp"
                    android:orientation="horizontal"
                    android:visibility="visible"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent">

                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_weight="0.6"
                        android:paddingStart="0dp"
                        android:paddingTop="16dp"
                        android:paddingBottom="16dp"
                        android:text="A központi költségvetés adóssága:"
                        android:textSize="18sp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/date1"
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="0.2"
                        android:gravity="center"
                        android:text="2018.11.30"
                        android:textAlignment="center" />

                    <TextView
                        android:id="@+id/data1"
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="0.2"
                        android:gravity="center"
                        android:text="29005,02 Mrd Ft"
                        android:textAlignment="center" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/linearLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="8dp"
                    android:layout_marginEnd="8dp"
                    android:orientation="horizontal"
                    android:visibility="visible"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent">

                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:layout_weight="0.6"
                        android:paddingStart="0dp"
                        android:paddingTop="16dp"
                        android:paddingBottom="16dp"
                        android:text="Maastrichti adósságráta:"
                        android:textSize="18sp"
                        android:textStyle="bold" />

                    <TextView
                        android:id="@+id/date2"
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="0.2"
                        android:gravity="center"
                        android:text="2018.11.30"
                        android:textAlignment="center" />

                    <TextView
                        android:id="@+id/data2"
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="0.2"
                        android:gravity="center"
                        android:text="72.8%"
                        android:textAlignment="center" />
                </LinearLayout>
            </LinearLayout>

        </android.support.constraint.ConstraintLayout>
    </ScrollView>

</android.support.constraint.ConstraintLayout>

В андроид студии мой дизайн выглядит так: но на моем телефоне это выглядит иначе:

Answer 1

Дело в том, что Android поддерживает самые разные устройства. Посмотрите, на каком устройстве Android Studio делает «предварительный просмотр». Предварительный просмотр - это то, что вы видите сверху в своем вопросе. Это может быть другое устройство, чем ваш эмулятор.

Кроме того, обратите внимание на эту строку: android:textSize="18sp". Вы используете SP в качестве измерения -> что означает независимый от шкалы PIXELS. Возьмите посмотрите здесь для получения дополнительной информации. Короче говоря, SP учитывает предпочтения размера текста пользователя. Это означает, что в настройках каждого телефона Android есть возможность изменить размер текста на маленький, средний, большой, очень большой и т. Д. Таким образом, тот, кто установит Large , получит текст, занимающий гораздо больше места, чем кто-то, кто выбрал маленький .

Решение

Это не просто решить, и я не знаю, чего вы пытаетесь достичь, но вы должны попробовать использовать:

• хорошие ограничения (т. Е. Не допускать совпадения материала)

• maxWidth свойство

• ellipsize свойство вашего TextViews (добавляет "..." в конце / середине / начале длинного текста, если оно не помещается)
• maxLines если вы не хотите, чтобы он проходил через некоторое количество строк

ConstraintLayout очень мощный, и вы должны больше в него вникнуть. Вы, вероятно, должны выровнять левый или правый края материала, который вы хотите выровнять, также установив ширину в 0, поскольку, когда он знает, где должны быть левый и правый края, ему не нужно иметь ширину.