Разный результат в телефоне и макете

#android #android-studio #kotlin

#Android #android-studio #kotlin

Вопрос:

Когда я пробую макет в xml и запускаю отладку на моем телефоне, все по-другому, вы можете видеть, что левый снимок экрана и мой телефон, а правый — мой макет в android studio.Мой телефон 720 x 1520 с 6,22 дюйма

Изображение макета

Я использую макет ограничения и переношу содержимое, я также уже настраиваю размер xml и делаю его одинаковым с размером моего телефона с помощью обычного телефона, но я получил другой результат, и несколько макетов были вырезаны.
Вот мой код:

   <androidx.constraintlayout.widget.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="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:scaleType="fitXY"
    tools:context=".Activity1">


    <ImageView
    android:id="@ id/ivfoto"
    android:layout_width="145dp"
    android:layout_height="181dp"
    android:layout_marginStart="108dp"
    android:layout_marginTop="60dp"
    android:scaleType="centerCrop"
    android:src="@drawable/ic_baseline_image_24"
    app:layout_constraintStart_toEndOf="@ id/etnamabelakang"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="ContentDescription" />

    <Button
    android:id="@ id/btnpilih"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="40dp"
    android:layout_marginEnd="16dp"
    android:text="@string/pilihgamber"
    app:layout_constraintEnd_toEndOf="@ id/ivfoto"
    app:layout_constraintTop_toBottomOf="@ id/ivfoto" />

    <Button
    android:id="@ id/btnpilih"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="40dp"
    android:layout_marginEnd="16dp"
    android:text="@string/pilihgamber"
    app:layout_constraintEnd_toEndOf="@ id/ivfoto"
    app:layout_constraintTop_toBottomOf="@ id/ivfoto" />

    <TextView
    android:id="@ id/Pilihartis"
    android:layout_width="wrap_content"
    android:layout_height="27dp"
    android:layout_marginStart="32dp"
    android:layout_marginTop="40dp"
    android:text="@string/PilihGenre"
    android:textSize="@dimen/textsize"
    app:layout_constraintStart_toEndOf="@ id/etpassword"
    app:layout_constraintTop_toBottomOf="@ id/btnpilih" />

   <EditText
    android:id="@ id/etnamadepan"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="28dp"
    android:layout_marginTop="48dp"
    android:hint="@string/namadepan"
    android:inputType="textPersonName"
    android:textSize="@dimen/textsize"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="Autofill" />

   <EditText
    android:id="@ id/etnamabelakang"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:hint="@string/namabelakang"
    android:inputType="textPersonName"
    android:textSize="@dimen/textsize"
    app:layout_constraintStart_toStartOf="@ id/etnamadepan"
    app:layout_constraintTop_toBottomOf="@ id/etnamadepan"
    tools:ignore="Autofill" />

   <EditText
    android:id="@ id/etasalnegara"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:hint="@string/asalnegara"
    android:inputType="textPersonName"
    android:textSize="@dimen/textsize"
    app:layout_constraintStart_toStartOf="@ id/etnamabelakang"
    app:layout_constraintTop_toBottomOf="@ id/etnamabelakang"
    tools:ignore="Autofill" />

   <EditText
    android:id="@ id/etumur"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="4dp"
    android:layout_marginTop="30dp"
    android:hint="@string/Umur"
    android:inputType="number"
    app:layout_constraintStart_toStartOf="@ id/etpassword"
    app:layout_constraintTop_toBottomOf="@ id/etpassword"
    tools:ignore="Autofill" />

<EditText
    android:id="@ id/etemail"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:ems="10"
    android:hint="@string/email"
    android:inputType="textEmailAddress"
    app:layout_constraintStart_toStartOf="@ id/etasalnegara"
    app:layout_constraintTop_toBottomOf="@ id/etasalnegara"
    tools:ignore="Autofill" />

   <EditText
    android:id="@ id/etpassword"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:ems="10"
    android:hint="@string/Pass2"
    android:inputType="textPersonName"
    app:layout_constraintStart_toStartOf="@ id/etemail"
    app:layout_constraintTop_toBottomOf="@ id/etemail"
    tools:ignore="Autofill,TextFields" />


    <TextView
    android:id="@ id/Pilihartis"
    android:layout_width="wrap_content"
    android:layout_height="27dp"
    android:layout_marginStart="32dp"
    android:layout_marginTop="40dp"
    android:text="@string/PilihGenre"
    android:textSize="@dimen/textsize"
    app:layout_constraintStart_toEndOf="@ id/etpassword"
    app:layout_constraintTop_toBottomOf="@ id/btnpilih" />

   <Button
    android:id="@ id/btnback"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="568dp"
    android:layout_marginEnd="32dp"
    android:text="@string/backbutton"
    android:textColor="@color/black"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@ id/btnregis"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="568dp"
    android:layout_marginEnd="144dp"
    android:text="@string/register"
    android:textColor="@color/black"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

    <Spinner
    android:id="@ id/sppilihanmusic"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="40dp"
    android:entries="@array/PilihanMusic"
    app:layout_constraintEnd_toEndOf="@ id/Pilihartis"
    app:layout_constraintTop_toBottomOf="@ id/Pilihartis" />

    <Spinner
    android:id="@ id/sptanggal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="24dp"
    android:entries="@array/Pilihtanggal"
    app:layout_constraintStart_toStartOf="@ id/etumur"
    app:layout_constraintTop_toBottomOf="@ id/etumur" />

   <Spinner
    android:id="@ id/sppilihbulan"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="28dp"
    android:layout_marginTop="40dp"
    android:entries="@array/PilihBulan"
    app:layout_constraintStart_toEndOf="@ id/sptanggal"
    app:layout_constraintTop_toBottomOf="@ id/sppilihanmusic" />

   </androidx.constraintlayout.widget.ConstraintLayout>`

1. Где остальная часть макета, материал с левой стороны? Электронная почта, пароль и т. Д. Похоже, что они слишком широкие, поэтому все это не поместится на меньшем экране

2. я пытаюсь скопировать несколько вещей, я боюсь, что если я напишу это здесь, это станет слишком длинным,

3. Нет, лучше, если вы включите все, информация важна! Я напишу ответ через минуту

Ответ №1:

Хорошо, итак, я вставил ваш макет, и вот как он выглядит на Pixel 3 (1280 x 2160 — я чувствую, что ваше изображение Vivo Y91 настроено неправильно, у него больше места в дизайнере макетов!):

Я добавил вид в ширину 380dp вверху, который в основном заполняет всю ширину. Таким образом, у вас есть чуть менее 400dp горизонтального пространства для работы.

Короткая версия: вы используете wrap_content для своего EditText s, но размер этого содержимого определяется несколькими факторами:

длина вашего hint текста (например, Nama Belakang)
ems значение, которое задает ширину относительно размера шрифта (поля электронной почты и пароля)
независимо @dimen/textSize от того, что установлено (если это значение, в sp котором оно должно быть, текст будет масштабироваться в соответствии с настройками пользователя — если они используют «огромный» текст, он будет больше и займет больше места!)

Это фиксирует размер полей слева, занимает место и отодвигает содержимое справа дальше. Если у вас нет места для него, он будет удален с экрана, как на изображении.

Ваше изображение имеет ширину 145dp, плюс это поле 108dp слева (между изображением и etnamabelakang текстовым полем). Если вы уменьшите это поле, оно поместится, но на меньшем экране или с большими текстовыми полями может и не поместиться.

На вашем месте я бы:

установите фиксированный предел ширины материала слева
переместите правую часть изображения в правую часть экрана
зафиксируйте левую часть изображения на самом широком элементе слева, затем вы можете центрировать его

вы можете прокручивать текстовые поля, если нет места для отображения всего текста — я имею в виду, если нет места, вам нужно пойти на компромисс, верно? И лучше иметь небольшие текстовые поля, чем части пользовательского интерфейса, удаленные с экрана на небольших дисплеях. Если это неприемлемо, вам может потребоваться пересмотреть свой макет. Разве вам не нравится работа с пользовательским интерфейсом ?!

Я внес несколько быстрых изменений в несколько вещей, чтобы показать вам, что вы можете сделать (также я разорвал все строки)

 <androidx.constraintlayout.widget.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="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:scaleType="fitXY"
tools:context=".Activity1">

<view
    android:id="@ id/this_is_380dp_wide"
    android:layout_width="400dp"
    android:layout_height="30dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    />

<ImageView
    android:id="@ id/ivfoto"
    android:layout_width="145dp"
    android:layout_height="181dp"
    android:layout_marginTop="60dp"
    android:scaleType="centerCrop"
    android:src="@drawable/ic_baseline_image_24"
    app:layout_constraintStart_toEndOf="@ id/guideline"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="ContentDescription" />

<Button
    android:id="@ id/btnpilih"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="40dp"
    android:text="pilihgamber"
    app:layout_constraintEnd_toEndOf="@ id/ivfoto"
    app:layout_constraintStart_toStartOf="@id/ivfoto"
    app:layout_constraintTop_toBottomOf="@ id/ivfoto" />


<EditText
    android:id="@ id/etnamadepan"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="28dp"
    android:layout_marginTop="48dp"
    android:maxWidth="150sp"
    android:hint="namadepan"
    android:inputType="textPersonName"
    android:textSize="@dimen/textsize"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="Autofill" />

<EditText
    android:id="@ id/etnamabelakang"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:maxWidth="150sp"
    android:hint="namabelakang"
    android:inputType="textPersonName"
    android:textSize="@dimen/textsize"
    app:layout_constraintStart_toStartOf="@ id/etnamadepan"
    app:layout_constraintTop_toBottomOf="@ id/etnamadepan"
    tools:ignore="Autofill" />

<EditText
    android:id="@ id/etasalnegara"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:maxWidth="150sp"
    android:hint="asalnegara"
    android:inputType="textPersonName"
    android:textSize="@dimen/textsize"
    app:layout_constraintStart_toStartOf="@ id/etnamabelakang"
    app:layout_constraintTop_toBottomOf="@ id/etnamabelakang"
    tools:ignore="Autofill" />

<EditText
    android:id="@ id/etumur"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="4dp"
    android:layout_marginTop="30dp"
    android:hint="Umur"
    android:inputType="number"
    app:layout_constraintStart_toStartOf="@ id/etpassword"
    app:layout_constraintTop_toBottomOf="@ id/etpassword"
    tools:ignore="Autofill" />

<EditText
    android:id="@ id/etemail"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:hint="email"
    android:inputType="textEmailAddress"
    app:layout_constraintStart_toStartOf="@ id/etasalnegara"
    app:layout_constraintEnd_toStartOf="@id/guideline"
    app:layout_constraintTop_toBottomOf="@ id/etasalnegara"
    tools:ignore="Autofill" />

<EditText
    android:id="@ id/etpassword"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:hint="Pass2"
    android:inputType="textPersonName"
    app:layout_constraintStart_toStartOf="@ id/etemail"
    app:layout_constraintEnd_toStartOf="@id/guideline"
    app:layout_constraintTop_toBottomOf="@ id/etemail"
    tools:ignore="Autofill,TextFields" />


<TextView
    android:id="@ id/Pilihartis"
    android:layout_width="wrap_content"
    android:layout_height="27dp"
    android:layout_marginTop="40dp"
    android:text="PilihGenre"
    android:textSize="@dimen/textsize"
    app:layout_constraintStart_toEndOf="@ id/guideline"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@ id/btnpilih" />

<Button
    android:id="@ id/btnback"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="568dp"
    android:layout_marginEnd="32dp"
    android:text="backbutton"
    android:textColor="@color/black"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@ id/btnregis"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="568dp"
    android:layout_marginEnd="16dp"
    android:text="register"
    android:textColor="@color/black"
    app:layout_constraintEnd_toStartOf="@id/btnback"
    app:layout_constraintTop_toTopOf="parent" />

<Spinner
    android:id="@ id/sppilihanmusic"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="40dp"
    android:entries="@array/PilihanMusic"
    app:layout_constraintStart_toEndOf="@ id/guideline"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@ id/Pilihartis" />

<Spinner
    android:id="@ id/sptanggal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="24dp"
    android:entries="@array/Pilihtanggal"
    app:layout_constraintStart_toStartOf="@ id/etumur"
    app:layout_constraintTop_toBottomOf="@ id/etumur" />

<Spinner
    android:id="@ id/sppilihbulan"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="28dp"
    android:layout_marginTop="40dp"
    android:entries="@array/PilihBulan"
    app:layout_constraintStart_toEndOf="@ id/sptanggal"
    app:layout_constraintTop_toBottomOf="@ id/sppilihanmusic" />

<androidx.constraintlayout.widget.Guideline
    android:id="@ id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_end="173dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

Это в основном:

сделано Guideline для разделения двух сторон, при этом представления с обеих сторон ограничены. Вы можете перемещать его туда, куда нужно.
Изображение ImageView ограничено направляющей и правой стороной экрана и центрировано. Я ограничил Button нижнюю часть этим, остальные материалы ниже сосредоточены между руководством / родителем — в зависимости от того, что вам подходит!
Все ваши верхние 3 текстовых поля имеют разную длину в зависимости от подсказки — я установил maxWidth для них (в sp ), чтобы они не пересекали руководство, если вы добавите более длинную подсказку, но она не будет работать на экранах меньшего размера, и вам лучше скопировать электронное письмо, ограниченное руководством,заполнение пространства
Я ограничил вашу кнопку внизу слева от другой, вместо того, чтобы использовать больший запас, чтобы больше смещать ее от родительской

Выглядит так на телефоне 480×800:

(посмотрите, что я имею в виду о maxWidth том, что он не работает на экранах меньшего размера, хотя другие поля в порядке! Также обратите внимание, что вид 380dp больше не отображается на экране, но макет все еще работает)

хорошо, это был большой отклик, я надеюсь, что это поможет!

1. Извините, что поздно сказал спасибо, теперь я действительно понимаю это, и на это нужно 2 дня, используя ваш ответ, я очень благодарен !!! :))))))

2. Нет проблем, рад, что это помогает!

3. Потому что я действительно любитель, как дизайнер пользовательского интерфейса / UX делает их макет идеальным для всех устройств, они создают макет один за другим?

4. Сложно, но Google «отзывчивый макет», чтобы увидеть общую идею. ConstraintLayout позволяет размещать объекты относительно других объектов, поэтому все это перемещается по мере увеличения или уменьшения пространства. Но если он станет слишком маленьким, вам понадобится новый макет! Попробуйте это, если у вас есть время: codelabs.developers.google.com/codelabs/constraint-layout /…