我的UI在设计器和设备上看起来都不同

时间:2019-01-20 14:45:55

标签: android android-layout android-screen-support screen-density

我的手机分辨率为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>

在android studio中,我的设计如下所示: enter image description here 但在我的手机上看起来却不同:

enter image description here

1 个答案:

答案 0 :(得分:2)

问题是Android支持多种不同的设备。看一下Android Studio在哪个设备上执行“预览”。 预览是您在问题顶部看到的内容。它可能是与仿真器不同的设备。 enter image description here

此外,请注意以下一行:android:textSize="18sp"。您正在使用SP作为尺寸->表示SCALE独立的PIXELS。请使用look here了解更多信息。但是长话短说,SP考虑了用户的文本大小首选项。这意味着在每部Android手机的设置中,您可以选择将文本大小更改为小,中,大,特大等。因此,设置 Large 的人将占用更多的文本空间比选择的人。

解决方案

解决这个问题并不简单,我也不知道您要实现什么,但是您应该尝试使用:

  • 良好的约束条件(即,不让内容重叠)

  • maxWidth属性

  • ellipsize上的{li> TextViews属性(如果不适合,则在长文本的末尾/中间/开始处添加“ ...”)
  • maxLines,如果您不希望它越过某些行

ConstraintLayout非常强大,您应该对其进行更多研究。您可能应该对齐需要对齐的东西的左边缘或右边缘,并将width设置为0,因为当它知道左边缘和右边缘应该在哪里时,就不需要宽度了。