android - il layout sembra incasinato in alcuni dispositivi

Question

Sto avendo un problema molto strano con un layout. Sembra progettato nell'editor XML di eclipse e nella mia galassia Samsung, ma è incasinato nel mio vecchio telefono xperia x10 mini. Posso solo supporre che ciò si verifichi anche in altri dispositivi.

Se qualcuno potesse contribuire a risolvere questo, sarei grato.

Ecco le due schermate e il codice XML.

come appare nel layout editor Eclipse e nel mio Samsung Galaxy S4 mini

come appare in 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> 

e questo è lo stile di 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> 

Qualche idea ???

MODIFICA: Ho diviso tutti i valori di dp per 2 per vedere se il problema era che stavo usando alti valori di dp. Questo è il risultato avere entrambe le versioni contemporaneamente:

Answer 1

Un layout vincolo può facilmente regolare per adattarsi a qualsiasi schermo, senza complesse gerarchie, in questo modo:

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

Per regolare i margini, basta cambiare border_margin in dimens.xml. Ho usato il seguente valore nello screenshot qui sotto, che è possibile regolare a proprio piacimento:

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

Ecco uno screenshot:

Answer 2

Uso elevati valori dp soprattutto portare in distorsione piccoli schermi. Se si intende supportare questi dispositivi, è possibile eseguire due operazioni:

1. Creare un altro layout per i dispositivi -small.
2. Modifica il layout per lavorare con layout_weight o RelativeLayout.

Fare entrambe le cose sarà la migliore pratica, secondo me, anche se la prima è più importante.

Answer 3

Sospetto che il problema riscontrato in questo momento sia dovuto allo schermo relativamente piccolo dell'Xperia X10 (240x320 px). Quando si tenta di impostare layout_marginTop e layout_marginLeft su un valore relativamente alto dp, questo potrebbe effettivamente superare la larghezza/altezza del telefono, determinando il layout che si sta visualizzando.

Si consiglia di utilizzare più LinearLayout s all'interno di un RelativeLayout per ottenere un layout più scalabile. Puoi avere 4 LinearLayout s, ciascuno lungo un bordo dello schermo, e all'interno di questi layout puoi posizionare il tuo ImageView s. Dando a ogni ImageView lo stesso layout_weight, possono essere distribuiti uniformemente lungo la lunghezza dello LinearLayout.

Answer 4

Si può dare un'occhiata a questo library. Questa libreria ti aiuterà a ridimensionare le tue visualizzazioni in base alle diverse dimensioni dello schermo.

MODIFICA: questo è il modo in cui la libreria funziona.

Si può semplicemente utilizzare @dimen/_sdp, invece della normale dp cui si utilizza

Per esempio

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

E inoltre si prega di notare che i valori che ho usato sopra sono solo per riferimento. Dovrai cercare di scoprire quale valore si adatta alle tue necessità.

Answer 5

Dalla linea guida ufficiale su Supporting Multiple Screens.

Android viene eseguito su una varietà di dispositivi che offrono diverse dimensioni dello schermo e densità. Per le applicazioni, il sistema Android fornisce un ambiente di sviluppo coerente su dispositivi e gestisce la maggior parte di il lavoro per regolare l'interfaccia utente di ciascuna applicazione sullo schermo su che viene visualizzato. Allo stesso tempo, il sistema fornisce API che consentono di controllare l'interfaccia utente dell'applicazione per dimensioni dello schermo specifiche e densità, al fine di ottimizzare la progettazione dell'interfaccia utente per diverse configurazioni dello schermo .

Per esempio, si potrebbe desiderare un interfaccia utente per tablet che è diverso dall'interfaccia utente per handsets.Although Il sistema esegue di scala e il ridimensionamento per rendere il vostro lavoro di applicazione su diversi schermi, si dovrebbe fare lo sforzo di ottimizzare la tua domanda per dimensioni dello schermo e densità differenti. In tal modo, a massimizzare l'esperienza utente per tutti i dispositivi e gli utenti ritiene che la propria applicazione è stato effettivamente progettato per i loro dispositivi, piuttosto che semplicemente

allungato per adattarsi allo schermo sui propri dispositivi.

Per supportare le diverse dimensioni dello schermo è necessario disporre di immagini di dimensioni diverse che verranno salvate in varie cartelle.

Drawable Logic

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 

Leggi Responsive UI with ConstraintLayout

proposito

ConstraintLayout è responsabile della gestione del posizionamento e dimensionamento comportamento dei componenti visivi (indicati anche come widget) che contiene.