android - bố cục có vẻ lộn xộn trong một số thiết bị

Question

Tôi gặp sự cố rất lạ với bố cục. Nó trông giống như được thiết kế trong trình soạn thảo XML eclipse và trong thiên hà Samsung của tôi nhưng nó bị rối tung trong điện thoại cũ xperia mini x10 của tôi. Tôi chỉ có thể giả định rằng điều này sẽ xảy ra trong các thiết bị khác.

Nếu ai đó có thể giúp khắc phục điều này, tôi sẽ biết ơn.

Dưới đây là hai ảnh chụp màn hình và mã XML.

nó trông như thế trong trình soạn thảo bố trí nhật thực và trong thiên hà của Samsung của tôi S4 nhỏ

nó trông như thế trong 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> 

và đây là phong cách của 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> 

Bất kỳ ý tưởng nào ???

EDIT: Tôi đã chia tất cả giá trị dp cho 2 để xem liệu sự cố là tôi đã sử dụng giá trị dp cao hay chưa. Đây là kết quả có cả hai phiên bản cùng một lúc:

Answer 1

Một bố trí hạn chế có thể dễ dàng điều chỉnh để phù hợp với bất kỳ màn hình, mà không cần bất kỳ hệ thống phân cấp phức tạp, như thế này:

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

Để điều chỉnh lề, chỉ cần thay đổi border_margin trong dimens.xml. Tôi đã sử dụng các giá trị sau trong ảnh chụp màn hình dưới đây, bạn có thể điều chỉnh theo ý muốn:

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

Dưới đây là một ảnh chụp màn hình:

Answer 2

Sử dụng giá trị dp cao chủ yếu dẫn đến biến dạng trong màn hình nhỏ. Nếu bạn dự định hỗ trợ các thiết bị này, có hai việc bạn có thể làm:

1. Tạo bố cục khác cho -small thiết bị.
2. Thay đổi bố cục của bạn để hoạt động với layout_weight hoặc RelativeLayout.

Làm cho cả hai sẽ là thực hành tốt nhất, theo ý kiến ​​của tôi, mặc dù điều đầu tiên quan trọng hơn.

Answer 3

Tôi nghi ngờ vấn đề bạn thấy ngay bây giờ là do màn hình tương đối nhỏ của Xperia x10 (240x320px). Khi bạn cố gắng đặt layout_marginTop và layout_marginLeft thành tương đối cao dp, điều đó thực sự có thể vượt quá chiều rộng/chiều cao của điện thoại, dẫn đến bố cục bạn đang thấy.

Tôi khuyên bạn nên tận dụng nhiều LinearLayout s trong một số RelativeLayout để có bố cục có thể mở rộng hơn. Bạn có thể có 4 LinearLayout s, mỗi dọc một cạnh của màn hình và trong các bố cục đó, bạn có thể đặt ImageView s của mình. Bằng cách cho mỗi ImageView cùng một số layout_weight, chúng có thể được phân bố đồng đều dọc theo chiều dài LinearLayout.

Answer 4

Bạn có thể xem điều này library. Thư viện này sẽ giúp bạn chia tỷ lệ lượt xem của mình theo các kích thước màn hình khác nhau.

EDIT: Đây là cách thư viện hoạt động.

Bạn chỉ có thể sử dụng @dimen/_sdp thay vì bình thường dp mà bạn đang sử dụng

Đối với ví dụ

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

Và cũng xin lưu ý rằng các giá trị mà tôi đã sử dụng ở trên là chỉ để tham khảo. Bạn sẽ phải thử và tìm ra giá trị phù hợp với nhu cầu của bạn.

Answer 5

Từ phương châm chính thức về Supporting Multiple Screens.

Android chạy trên nhiều thiết bị cung cấp các kích thước màn hình khác nhau và mật độ. Đối với các ứng dụng, hệ thống Android cung cấp một môi trường phát triển nhất quán trên các thiết bị và xử lý hầu hết các công cụ để điều chỉnh giao diện người dùng của từng ứng dụng thành màn hình trên được hiển thị. Đồng thời, hệ thống cung cấp các API cho phép bạn kiểm soát giao diện người dùng của ứng dụng cho các kích thước màn hình cụ thể và mật độ để tối ưu hóa thiết kế giao diện người dùng cho các cấu hình màn hình khác nhau.

Ví dụ, bạn có thể muốn có một giao diện người dùng cho máy tính bảng đó là khác biệt so với giao diện người dùng cho handsets.Although hệ thống thực hiện rộng và thay đổi kích thước để làm cho công việc ứng dụng của bạn trên màn hình khác nhau, bạn nên thực hiện các nỗ lực để tối ưu hóa ứng dụng của bạn cho kích thước và mật độ màn hình khác nhau. Bằng cách đó, bạn tối đa hóa các kinh nghiệm dùng cho tất cả các thiết bị và người dùng của bạn tin rằng ứng dụng của bạn đã thực sự được thiết kế cho các thiết bị chứ không phải của họ hơn là chỉ đơn giản là

kéo dài để phù hợp với màn hình trên thiết bị của họ.

Để hỗ trợ các kích thước màn hình khác nhau, bạn phải có các hình ảnh có kích thước khác nhau mà bạn sẽ lưu trong các thư mục khác nhau.

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 

đọc Responsive UI with ConstraintLayout

FYI

ConstraintLayout là trách nhiệm quản lý vị trí và cỡ hành vi của các thành phần thị giác (hay còn gọi là widget) nó chứa.