14

我的佈局非常奇怪。它看起來就像在eclipse XML編輯器和我的三星Galaxy中設計的,但它在我的舊手機xperia x10 mini中搞砸了。我只能假設這也會發生在其他設備上。android - 佈局看起來在一些設備上看起來搞砸了

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

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

它看起來如何在Eclipse佈局編輯器,在我的三星GALAXY S4迷你

enter image description here

它的外觀索尼Xperia X10的迷你

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> 

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

任何想法???

編輯: 我把所有的dp值除以2來看看問題是我使用的是高dp值。這是同時有兩個版本的結果:

enter image description here

+0

您想如何縮放這個視圖?它應該始終與設備的寬度/高度大致相同,還是希望它在每個設備上保持相同的物理尺寸。我問的原因是你目前的佈局不是很有活力,很可能在許多設備上看起來很奇怪。 – NasaGeek

+0

理想情況下,它會縮放到設備尺寸,並在更大的設備中看起來更大。我知道我貼的xml不能縮放,但這只是第一步。 – Anonymous

+0

有幾個問題:1)Xperia的Android版本是什麼? API級別? 2)什麼是可繪製的'@ drawable/ta'風格。那是你可以分享的東西嗎?屏幕在LDPI 240x320 px屏幕的模擬器上原樣顯示。 – Cheticamp

回答

11

約束佈局可以輕鬆地調整,以適應任何屏幕上,沒有任何複雜的層次,就像這樣:

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

調整頁邊距,只是改變border_margindimens.xml。我用下面的截圖下面的值,你可以隨意調整:

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

以下是截圖:

screenshot of the constraint layout

2

使用高DP值大多引入在小屏幕失真。如果你打算支持這些設備,有兩件事情可以做:

  1. -small設備創建另一個佈局。
  2. 更改您的佈局以使用layout_weightRelativeLayout

在我看來,儘管第一個更重要,但兩者都是最好的做法。

2

我懷疑你現在看到的問題是由於Xperia x10的相對較小的屏幕(240x320px)。當您嘗試將layout_marginToplayout_marginLeft設置爲較高的dp時,實際可能會超出手機的寬度/高度,從而導致您看到的佈局。

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

+0

這也是首先想到的,所以我做了相同的佈局,將所有的dp值除以2。仍然是同樣的結果...只是更小!我會用它張貼一張照片 – Anonymous

2

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

編輯:這是圖書館的工作原理。

您正在使用

對於如

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

還請大家注意,我上面使用的數值僅供參考,您可以簡單地使用@dimen/_sdp而不是正常的dp。你將不得不嘗試找出適合你需要的價值。

6

來自官方的方針約Supporting Multiple Screens

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

例如,您可能需要爲平板電腦 的UI是從handsets.Although系統的UI不同的執行 縮放和調整,使不同的 屏幕應用程序的工作,你應該優化工作您的 不同的屏幕尺寸和密度的應用程序。在此過程中,您最大限度地提高所有設備的 用戶體驗和用戶相信你 應用程序實際上是專爲他們的設備,而不是簡單地

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

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

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 

Responsive UI with ConstraintLayout

FYI

ConstraintLayout負責管理的定位和可視化組件(也被稱爲窗口小部件的 上漿行爲)0123它包含。

相關問題