Android – el diseño parece desordenado en algunos dispositivos

Estoy teniendo un problema muy extraño con un diseño. Se ve como diseñado en el editor de eclipse XML y en mi galaxia de Samsung, pero está desordenado en mi viejo teléfono xperia x10 mini. Sólo puedo asumir que esto ocurriría en otros dispositivos también.

Si alguien pudiera ayudar a arreglar esto, yo estaría agradecido.

Aquí están las dos capturas de pantalla y el código XML.

Cómo se ve en el editor de diseño de eclipse y en mi Samsung galaxia S4 mini

Introduzca aquí la descripción de la imagen

Cómo se ve en Sony xperia x10 mini

Introduzca aquí la descripción de la imagen

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

Y este es el estilo de 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> 

¿¿¿Algunas ideas???

EDIT: Yo dividí todos los valores de dp por 2 para ver si el problema era que yo estaba usando altos valores de dp. Este es el resultado de tener ambas versiones simultáneamente:

Introduzca aquí la descripción de la imagen

Un diseño de restricción puede ajustarse fácilmente para adaptarse a cualquier pantalla, sin ninguna jerarquía compleja, como esto:

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

Para ajustar los márgenes, cambie border_margin en dimens.xml . He utilizado el siguiente valor en la captura de pantalla de abajo, que puede ajustar a voluntad:

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

Aquí hay una captura de pantalla:

Captura de pantalla del diseño de restricciones

De la guía oficial sobre el apoyo a varias pantallas .

Android se ejecuta en una variedad de dispositivos que ofrecen diferentes tamaños de pantalla y densidades. Para aplicaciones, el sistema Android proporciona un entorno de desarrollo consistente en todos los dispositivos y gestiona la mayor parte del trabajo para ajustar la interfaz de usuario de cada aplicación a la pantalla en la que se muestra. Al mismo tiempo, el sistema proporciona API que le permiten controlar la interfaz de usuario de su aplicación para tamaños y densidades de pantalla específicos, con el fin de optimizar su diseño de interfaz de usuario para diferentes configuraciones de pantalla.

Por ejemplo, es posible que desee una interfaz de usuario para tablets que sea diferente de la interfaz de usuario de los teléfonos. Aunque el sistema realice escalas y redimensionamiento para hacer que su aplicación funcione en diferentes pantallas, debería esforzarse por optimizar su aplicación para diferentes tamaños y densidades de pantalla. Al hacerlo, maximiza la experiencia del usuario para todos los dispositivos y sus usuarios creen que la aplicación se diseñó realmente para sus dispositivos, en lugar de simplemente

Estirado para ajustar la pantalla en sus dispositivos.

Para soportar los diferentes tamaños de pantalla debe tener imágenes de diferentes tamaños que se guardarán en varias carpetas.

Lógica Dibujable

 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 

Leer la interfaz de usuario de respuesta con ConstraintLayout

FYI

ConstraintLayout es responsable de gestionar el comportamiento de posicionamiento y dimensionamiento de los componentes visuales (también denominados widgets) que contiene.

Sospecho que el problema que ves ahora es debido a la pantalla relativamente pequeña de Xperia x10 (240x320px). Cuando intenta establecer layout_marginTop y layout_marginLeft en dp relativamente alto, puede que realmente exceda el ancho / alto del teléfono, lo que resulta en el diseño que está viendo.

Recomiendo aprovechar múltiples LinearLayout s dentro de un RelativeLayout para obtener un diseño más escalable. Puede tener 4 LinearLayout s, cada uno a lo largo de un borde de la pantalla, y dentro de esos diseños puede colocar su ImageView . Al dar a cada ImageView el mismo layout_weight , pueden distribuirse uniformemente a lo largo de LinearLayout .

El uso de valores altos de dp conduce principalmente a la distorsión en pantallas pequeñas. Si tiene la intención de admitir estos dispositivos, hay dos cosas que puede hacer:

  1. Cree otro diseño para -small .
  2. Cambie su diseño para que funcione con layout_weight o RelativeLayout .

Hacerlos a ambos será la mejor práctica, en mi opinión, aunque la primera es más importante.

Puedes echar un vistazo a esta biblioteca . Esta biblioteca le ayudará a escalar sus vistas según diferentes tamaños de pantalla.

EDIT: Así funciona la biblioteca.

Simplemente puede utilizar @dimen/_sdp lugar del dp normal que está utilizando

Por ejemplo

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

Y también tenga en cuenta que los valores que he utilizado anteriormente son sólo para referencia. Usted tendrá que tratar de averiguar qué valor se adapte a su necesidad.

  • La barra de herramientas de Android se mueve hacia arriba cuando aparece el teclado
  • TextView reinicia Marquee al cambiar otro TextView en LinearLayout mismo
  • Android: Agregar vista dinámicamente en un diseño anidado
  • ¿Por qué no se ajusta el diseño con el peso especificado?
  • Comportamiento molesto para un ShapeDrawable en Android
  • Estilos / atributos de divisor predeterminados de ListView de Android
  • Resolver conflictos entre android: gravedad y android: layout_gravity
  • AlphaAnimation no funciona en Sandwich de helado
  • Android: ClassCastException al agregar una vista de encabezado a ExpandableListView
  • Android - overdraw diseño permite toque a través de LinearLayout
  • Android - LinearLayout en ScrollView en Relativelayout
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.