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

Ответ 1

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

<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>

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

Ответ 2

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

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 отвечает за управление позиционированием и определение размеров визуальных компонентов (также называемых виджетами) он содержит.

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

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

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"/>

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