堆棧內存溢出
  簡體   English   中英

android - 布局在某些設備中看起來很混亂

[英]android - layout looks messed up in some devices

 原文  2015-10-07 20:31:39  2   5    android/ android-layout/ android-linearlayout/ android-constraintlayout/ android-framelayout

問題描述

我在布局方面遇到了一個非常奇怪的問題。 它在 eclipse XML 編輯器和我的三星 Galaxy 中看起來和設計一樣，但在我的舊手機 xperia x10 mini 中卻一團糟。 我只能假設這也會發生在其他設備上。

如果有人可以幫助解決這個問題，我將不勝感激。

這是兩個屏幕截圖和 XML 代碼。

它在 Eclipse 布局編輯器和我的三星 Galaxy S4 mini 中的外觀

在此處輸入圖片說明

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

這是 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>

有任何想法嗎？？？

5 個解決方案

解決方案1
 11 已采納  2017-07-13 03:46:54

約束布局可以輕松調整以適應任何屏幕，無需任何復雜的層次結構，如下所示：

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

要調整邊距，只需更改dimens.xml border_margin dimens.xml 。 我在下面的屏幕截圖中使用了以下值，您可以隨意調整：

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

這是一個屏幕截圖：

約束布局的屏幕截圖

解決方案2
 6  2017-07-13 06:52:25

來自關於支持多屏幕的官方指南。

Android 可在提供不同屏幕尺寸和密度的各種設備上運行。 對於應用程序，Android 系統提供跨設備的一致開發環境，並處理大部分工作以將每個應用程序的用戶界面調整為顯示它的屏幕。 同時，系統提供的 API 允許您針對特定屏幕尺寸和密度控制應用程序的 UI，以便針對不同的屏幕配置優化您的 UI 設計。

例如，您可能希望平板電腦的 UI 與手機的 UI 不同。盡管系統執行縮放和調整大小以使您的應用程序在不同的屏幕上工作，但您應該努力針對不同的屏幕尺寸和密度優化您的應用程序。 通過這樣做，您可以最大限度地提高所有設備的用戶體驗，並且您的用戶相信您的應用程序實際上是為他們的設備設計的——而不是簡單地

拉伸以適應他們設備上的屏幕。

為了支持不同的屏幕尺寸，您必須將不同尺寸的圖像保存在不同的文件夾中。

可繪制邏輯

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

使用 ConstraintLayout讀取響應式 UI

供參考

ConstraintLayout 負責管理它包含的可視組件（也稱為小部件）的定位和大小調整行為。

解決方案3
 2  2015-10-07 20:49:46

在小屏幕中使用高 dp 值通常會導致失真。 如果您打算支持這些設備，您可以做兩件事：

  1. 為-small設備創建另一個布局。
  2. 更改您的布局以使用layout_weight或RelativeLayout 。

在我看來，同時執行它們將是最佳實踐，盡管第一個更重要。

解決方案4
 2  2017-07-12 13:09:40

你可以看看這個庫。 該庫將幫助您根據不同的屏幕尺寸縮放視圖。

編輯：這就是圖書館的工作方式。

您可以簡單地使用@dimen/_sdp而不是您正在使用的普通dp

例如

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

另外請注意，我上面使用的值僅供參考。 您將不得不嘗試找出適合您需要的值。

解決方案5
 1  2015-10-07 20:49:54

我懷疑您現在看到的問題是由於 Xperia x10 的屏幕相對較小 (240x320px)。 當您嘗試將layout_marginTop和layout_marginLeft設置為相對較高的dp ，這實際上可能會超過手機的寬度/高度，從而導致您看到的布局。

我建議在一個RelativeLayout利用多個LinearLayout來獲得更具可擴展性的布局。 您可以有 4 個LinearLayout s，每個都沿着屏幕的一個邊緣，並且在這些布局中您可以放置​​您的ImageView s。 通過給每個ImageView相同的layout_weight ，它們可以沿着LinearLayout的長度均勻分布。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Android Layout，弄亂了LinearLayout android布局突然搞砸了 Android XML布局搞砸了嗎？ 手機上的android布局混亂 行動網站文字在Android裝置上混亂 Android 布局在不同設備上看起來不同 Android：布局在不同設備上看起來有所不同 android布局混亂（使用Fragments / Viewpager） Android版式對齊方式在Landscape中混亂了 網站布局僅在Android上混亂
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM