Pytanie Android - układ wygląda na pomieszany w niektórych urządzeniach


Mam bardzo dziwny problem z układem. Wygląda jak zaprojektowany w edytorze Eclipse XML iw mojej galaktyce Samsung, ale jest pomieszany w moim starym telefonie xperia x10 mini. Mogę tylko założyć, że wystąpiłoby to również w innych urządzeniach.

Jeśli ktoś mógłby pomóc to naprawić, byłbym wdzięczny.

Oto dwa zrzuty ekranu i kod XML.

jak to wygląda w edytorze Eclipse oraz w mojej Samsung Galaxy S4 mini

enter image description here 

jak to wygląda w Sony Xperia x10 mini

enter image description here

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

i to jest styl 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>

Jakieś pomysły???

EDYTOWAĆ: Wszystkie wartości dp podzieliłem na 2, aby sprawdzić, czy problem polegał na tym, że korzystałem z wysokich wartości dp. Jest to wynikiem posiadania obu wersji jednocześnie:

enter image description here


14
2017-10-07 20:31


pochodzenie


Jak chcesz, aby ten widok był skalowany? Czy zawsze powinna mieć mniej więcej taką samą szerokość / wysokość jak urządzenie, czy też ma pozostać taki sam rozmiar fizyczny na każdym urządzeniu? Powodem, dla którego pytam, jest to, że twój obecny układ nie jest bardzo dynamiczny i prawdopodobnie będzie wyglądać dziwnie na wielu urządzeniach. - NasaGeek
idealnie dopasuje się do wielkości urządzenia i będzie wyglądał na większe w większych urządzeniach. Wiem, że opublikowany przeze mnie xml nie jest skalowany, ale to dopiero pierwszy krok. - Anonymous
Kilka pytań: 1) Jaką wersją Androida jest Xperia? Poziom interfejsu API? 2) Co to jest losowanie @drawable/ta w stylu. Czy to jest coś, czym możesz się podzielić? Ekran wygląda tak jak na emulatorze z ekranem LDPI 240x320 px. - Cheticamp
@Anonimowy stackoverflow.com/a/45071079/2013835 w tej odpowiedzi używa się poprawnego rozwiązania o nowoczesnym układzie. - JJ86


Odpowiedzi:


Układ ograniczeń można łatwo dopasować do dowolnego ekranu, bez żadnych skomplikowanych hierarchii, takich jak to:

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

Aby dostosować marginesy, po prostu zmień border_margin w dimens.xml. Na poniższym zrzucie ekranu użyłem następującej wartości, którą możesz dowolnie dostosować:

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

Oto zrzut ekranu:

screenshot of the constraint layout


11
2017-07-13 03:46





Z oficjalnych wytycznych dotyczących Obsługa wielu ekranów.

Android działa na różnych urządzeniach, które oferują różne rozmiary ekranu   i gęstości. W przypadku aplikacji system Android zapewnia   spójne środowisko programistyczne na różnych urządzeniach i obsługuje większość   praca polegająca na dostosowaniu interfejsu użytkownika każdej aplikacji do ekranu   który jest wyświetlany. W tym samym czasie system zapewnia interfejsy API   pozwala kontrolować interfejs użytkownika aplikacji dla określonych rozmiarów ekranu   i gęstości, w celu zoptymalizowania projektu interfejsu użytkownika dla różnych   konfiguracje ekranu.

Na przykład możesz potrzebować interfejsu dla tabletów  różni się od interfejsu dla zestawów słuchawkowych. Mimo że system działa  skalowanie i zmiana rozmiaru, aby aplikacja działała inaczej  ekrany, należy dołożyć starań, aby zoptymalizować aplikację  różne rozmiary i gęstości ekranu. W ten sposób maksymalizujesz  wrażenia użytkownika dla wszystkich urządzeń i użytkownicy uważają, że  Aplikacja została faktycznie zaprojektowana dla ich urządzeń - a nie tylko

rozciągnięte, aby pasowały do ​​ekranu na swoich urządzeniach.

Aby obsługiwać różne rozmiary ekranu, musisz mieć obrazy o różnych rozmiarach, które będziesz zapisywać w różnych folderach.

Logika ciągniona

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

Czytać Responsywny interfejs użytkownika z ConstraintLayout

FYI

ConstraintLayout jest odpowiedzialny za zarządzanie pozycjonowaniem i   zmiana rozmiaru elementów wizualnych (zwanych również widżetami)   zawiera.


6
2017-07-13 06:52





Podejrzewam, że problem, który widzisz teraz, jest spowodowany stosunkowo małym ekranem Xperia x10 (240 x 320 pikseli). Kiedy próbujesz ustawić layout_marginTop i layout_marginLeft do względnie wysokiego dp, która może faktycznie przekroczyć szerokość / wysokość telefonu, powodując wyświetlenie układu.

Polecam stosowanie wielu LinearLayouts w a RelativeLayout aby uzyskać bardziej skalowalny układ. Możesz mieć 4 LinearLayouts, każdy wzdłuż jednej krawędzi ekranu, a wewnątrz tych układów możesz umieścić swoje ImageViews. Dając każdemu ImageView to samo layout_weight, mogą być dystrybuowane równomiernie na całej długości LinearLayout.


2
2017-10-07 20:49



To była pierwsza myśl, więc zrobiłem ten sam układ dzielący wszystkie wartości dp na dwa. wciąż ten sam wynik ... po prostu mniejszy! Opublikuję zdjęcie - Anonymous


Używanie wysokich wartości dp prowadzi najczęściej do zniekształceń na małych ekranach. Jeśli zamierzasz obsługiwać te urządzenia, możesz zrobić dwie rzeczy:

  1. Utwórz inny układ dla -small pomysłowość.
  2. Zmień swój układ, aby działał layout_weight lub RelativeLayout.

Zrobienie ich obu będzie najlepszą praktyką, moim zdaniem, choć pierwsza jest ważniejsza.


2
2017-10-07 20:49





Możesz na to spojrzeć biblioteka. Ta biblioteka pomoże Ci skalować widoki według różnych rozmiarów ekranu.

EDYCJA: Tak działa biblioteka.

Możesz po prostu użyć @dimen/_sdp zamiast normalnego dp z którego korzystasz

Na przykład

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

Zwróć też uwagę, że wartości, które wykorzystałem powyżej, są jedynie referencyjne. Będziesz musiał spróbować ustalić, jaka wartość odpowiada Twoim potrzebom.


2
2017-07-12 13:09