Android – макет выглядит перепутанным на некоторых устройствах

У меня очень странная проблема с макетом. Он выглядит как разработанный в редакторе XML eclipse и в моей галактике Samsung, но это испортилось в моем старом телефоне xperia x10 mini. Я могу только предположить, что это произойдет и в других устройствах.

Если бы кто-то мог это исправить, я был бы благодарен.

Вот два скриншота и XML-код.

Как это выглядит в редакторе макета eclipse и в моей галактике Samsung S4 mini

Введите описание изображения здесь

Как выглядит в Sony xperia x10 mini

Введите описание изображения здесь

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:orientation="vertical" android:gravity="center" android:layout_height="wrap_content" > <FrameLayout android:layout_marginTop="7dp" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content"> <View android:layout_marginTop="19dp" android:layout_marginLeft="19dp" android:layout_height="249dp" android:layout_width="2dp" android:background="#B2CFEF"/> <View android:layout_marginTop="19dp" android:layout_marginLeft="189dp" android:layout_height="249dp" android:layout_width="2dp" android:background="#B2CFEF"/> <View android:layout_marginTop="18dp" android:layout_marginLeft="20dp" android:layout_height="2dp" android:layout_width="170dp" android:background="#B2CFEF"/> <View android:layout_marginTop="267dp" android:layout_marginLeft="19dp" android:layout_height="2dp" android:layout_width="171dp" android:background="#B2CFEF"/> <ImageView style="@style/ta_img" android:id="@+id/ta_lu" android:layout_marginTop="52dp" /> <ImageView style="@style/ta_img" android:id="@+id/ta_lc" android:layout_marginTop="124dp" /> <ImageView style="@style/ta_img" android:id="@+id/ta_ld" android:layout_marginTop="197dp" /> <ImageView style="@style/ta_img" android:id="@+id/ta_ru" android:layout_marginLeft="170dp" android:layout_marginTop="52dp" /> <ImageView style="@style/ta_img" android:id="@+id/ta_rc" android:layout_marginLeft="170dp" android:layout_marginTop="124dp" /> <ImageView style="@style/ta_img" android:id="@+id/ta_rd" android:layout_marginLeft="170dp" android:layout_marginTop="197dp" /> <ImageView style="@style/ta_img" android:id="@+id/ta_tl" android:layout_marginLeft="37dp" /> <ImageView style="@style/ta_img" android:id="@+id/ta_tc" android:layout_marginLeft="84dp" /> <ImageView style="@style/ta_img" android:id="@+id/ta_tr" android:layout_marginLeft="132dp" /> <ImageView style="@style/ta_img" android:id="@+id/ta_bl" android:layout_marginLeft="37dp" android:layout_marginTop="249dp" /> <ImageView style="@style/ta_img" android:id="@+id/ta_bc" android:layout_marginLeft="84dp" android:layout_marginTop="249dp" /> <ImageView style="@style/ta_img" android:id="@+id/ta_br" android:layout_marginLeft="132dp" android:layout_marginTop="249dp" /> </FrameLayout> </LinearLayout> 

И это стиль ImageViews

 <style name="ta_img" > <item name="android:layout_width">40dp</item> <item name="android:layout_height">40dp</item> <item name="android:clickable">true</item> <item name="android:src">@drawable/ta</item> </style> 

Есть идеи???

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

Введите описание изображения здесь

Макет ограничения может легко настраиваться под любой экран без каких-либо сложных иерархий, например:

 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"> <View android:id="@+id/left_border" android:layout_width="2dp" android:layout_height="0dp" android:layout_margin="@dimen/border_margin" android:background="#B2CFEF" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" /> <ImageView android:id="@+id/ta_lu" style="@style/ta_img" app:layout_constraintLeft_toLeftOf="@id/left_border" app:layout_constraintRight_toRightOf="@id/left_border" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toTopOf="@id/ta_lc" /> <ImageView android:id="@+id/ta_lc" app:layout_constraintLeft_toLeftOf="@id/left_border" app:layout_constraintRight_toRightOf="@id/left_border" app:layout_constraintTop_toBottomOf="@id/ta_lu" app:layout_constraintBottom_toTopOf="@id/ta_ld" style="@style/ta_img" /> <ImageView android:id="@+id/ta_ld" app:layout_constraintLeft_toLeftOf="@id/left_border" app:layout_constraintRight_toRightOf="@id/left_border" app:layout_constraintTop_toBottomOf="@id/ta_lc" app:layout_constraintBottom_toBottomOf="parent" style="@style/ta_img" /> <View android:id="@+id/right_border" android:layout_width="2dp" android:layout_height="0dp" android:layout_margin="@dimen/border_margin" android:background="#B2CFEF" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> <ImageView android:id="@+id/ta_ru" style="@style/ta_img" app:layout_constraintLeft_toLeftOf="@id/right_border" app:layout_constraintRight_toRightOf="@id/right_border" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toTopOf="@id/ta_rc" /> <ImageView android:id="@+id/ta_rc" app:layout_constraintLeft_toLeftOf="@id/right_border" app:layout_constraintRight_toRightOf="@id/right_border" app:layout_constraintTop_toBottomOf="@id/ta_ru" app:layout_constraintBottom_toTopOf="@id/ta_rd" style="@style/ta_img" /> <ImageView android:id="@+id/ta_rd" app:layout_constraintLeft_toLeftOf="@id/right_border" app:layout_constraintRight_toRightOf="@id/right_border" app:layout_constraintTop_toBottomOf="@id/ta_rc" app:layout_constraintBottom_toBottomOf="parent" style="@style/ta_img" /> <View android:id="@+id/top_border" android:layout_width="0dp" android:layout_height="2dp" android:layout_margin="@dimen/border_margin" android:background="#B2CFEF" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> <ImageView android:id="@+id/ta_tl" style="@style/ta_img" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="@id/ta_tc" app:layout_constraintTop_toTopOf="@id/top_border" app:layout_constraintBottom_toBottomOf="@id/top_border" /> <ImageView android:id="@+id/ta_tc" style="@style/ta_img" app:layout_constraintLeft_toLeftOf="@id/ta_tl" app:layout_constraintRight_toRightOf="@id/ta_tr" app:layout_constraintTop_toTopOf="@id/top_border" app:layout_constraintBottom_toBottomOf="@id/top_border" /> <ImageView android:id="@+id/ta_tr" style="@style/ta_img" app:layout_constraintLeft_toLeftOf="@id/ta_tc" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="@id/top_border" app:layout_constraintBottom_toBottomOf="@id/top_border" /> <View android:id="@+id/bottom_border" android:layout_width="0dp" android:layout_height="2dp" android:layout_margin="@dimen/border_margin" android:background="#B2CFEF" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> <ImageView android:id="@+id/ta_bl" style="@style/ta_img" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="@id/ta_bc" app:layout_constraintTop_toTopOf="@id/bottom_border" app:layout_constraintBottom_toBottomOf="@id/bottom_border" /> <ImageView android:id="@+id/ta_bc" style="@style/ta_img" app:layout_constraintLeft_toLeftOf="@id/ta_bl" app:layout_constraintRight_toRightOf="@id/ta_br" app:layout_constraintTop_toTopOf="@id/bottom_border" app:layout_constraintBottom_toBottomOf="@id/bottom_border" /> <ImageView android:id="@+id/ta_br" style="@style/ta_img" app:layout_constraintLeft_toLeftOf="@id/ta_bc" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="@id/bottom_border" app:layout_constraintBottom_toBottomOf="@id/bottom_border" /> 

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

  <dimen name="border_margin">40dp</dimen> 

Вот скриншот:

Скриншот схемы ограничения

От официального руководства по поддержке нескольких экранов .

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

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

Растягиваются, чтобы соответствовать экрану на их устройствах.

Для поддержки разных размеров экрана у вас должны быть изображения разных размеров, которые вы сохраните в разных папках.

Локальная логика

 sw720dp 10.1” tablet 1280x800 mdpi sw600dp 7.0” tablet 1024x600 mdpi sw480dp 5.4” 480x854 mdpi sw480dp 5.1” 480x800 mdpi xxhdpi 5.5" 1080x1920 xxhdpi xxhdpi 5.5" 1440x2560 xxhdpi xhdpi 4.7” 1280x720 xhdpi xhdpi 4.65” 720x1280 xhdpi hdpi 4.0” 480x800 hdpi hdpi 3.7” 480x854 hdpi mdpi 3.2” 320x480 mdpi ldpi 3.4” 240x432 ldpi ldpi 3.3” 240x400 ldpi ldpi 2.7” 240x320 ldpi 

Читайте отзывчивый пользовательский интерфейс с ConstraintLayout

FYI

ConstraintLayout отвечает за управление позиционированием и определением размера визуальных компонентов (также называемых виджетами), которые он содержит.

Я подозреваю, что проблема, которую вы видите сейчас, связана с относительно небольшим экраном Xperia x10 (240×320 пикселей). Когда вы пытаетесь установить layout_marginTop и layout_marginLeft на относительно высокий уровень dp , это может фактически превышать ширину / высоту телефона, в результате чего вы видите макет.

Я рекомендую использовать несколько LinearLayout s в RelativeLayout чтобы получить более масштабируемый макет. У вас может быть 4 LinearLayout s, каждый по одному краю экрана, и в этих макетах вы можете разместить свои ImageView . Предоставляя каждому ImageView тот же layout_weight , они могут распределяться равномерно по длине LinearLayout .

Использование высоких значений dp в основном приводит к искажениям на небольших экранах. Если вы намерены поддерживать эти устройства, вы можете сделать две вещи:

  1. Создайте еще один макет для -small устройств.
  2. Измените макет для работы с layout_weight или RelativeLayout .

По их мнению, их выполнение станет лучшей практикой, хотя первая важнее.

Вы можете посмотреть эту библиотеку . Эта библиотека поможет вам масштабировать свои представления в соответствии с различными размерами экрана.

EDIT: Так работает библиотека.

Вы можете просто использовать @dimen/_sdp вместо обычного dp который вы используете

Например, для

  <View android:layout_marginTop="@dimen/_15sdp" android:layout_marginLeft="@dimen/_15sdp" android:layout_height="@dimen/_200sdp" android:layout_width="@dimen/_2sdp" android:background="#B2CFEF"/> 

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

Intereting Posts