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.
- ScrollView oculta el diseño lineal inferior
- ¿Cambiar el fondo también cambia el relleno de un LinearLayout?
- ¿Es Android diseño realmente exponencial duro?
- Cómo alinear un elemento a la derecha en LinearLayout horizontal?
- Android: dibujable junto a TextView con el peso de cada TextView en LinearLayout
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
Cómo se ve en 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>
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:
- Cómo Inflar Extended LinearLayout de XML
- RecyclerView 23.2.x height = 0dp hace que onBind llame a todos los elementos y scrollToPosition no funciona
- Android Linear Layout de peso mediante programación
- ¿Cómo puedo especificar el relleno según el tamaño de la pantalla
- cómo hacer una disposición lineal horizontalmente desplazable
- Cómo deshabilitar / habilitar a todos los niños en LinearLayout en Android
- Vista personalizada que divide el diseño en diagonal con diferentes vistas secundarias
- Ajustar GridView a todos los tamaños de pantalla
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:
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:
- Cree otro diseño para
-small
. - Cambie su diseño para que funcione con
layout_weight
oRelativeLayout
.
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.
- AsyncTask, RejectedExecutionException y límite de tarea
- PreferenceInternet no se abre con PreferenceFragmentCompat