android - 布局在某些设备中看起来很混乱

Question

我在布局方面遇到了一个非常奇怪的问题。 它在 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>

有任何想法吗？？？

Answer 1

约束布局可以轻松调整以适应任何屏幕，无需任何复杂的层次结构，如下所示：

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

这是一个屏幕截图：

Answer 2

来自关于支持多屏幕的官方指南。

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 负责管理它包含的可视组件（也称为小部件）的定位和大小调整行为。

Answer 3

在小屏幕中使用高 dp 值通常会导致失真。 如果您打算支持这些设备，您可以做两件事：

1. 为-small设备创建另一个布局。
2. 更改您的布局以使用layout_weight或RelativeLayout 。

在我看来，同时执行它们将是最佳实践，尽管第一个更重要。

Answer 4

你可以看看这个库。 该库将帮助您根据不同的屏幕尺寸缩放视图。

编辑：这就是图书馆的工作方式。

您可以简单地使用@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"/>

另外请注意，我上面使用的值仅供参考。 您将不得不尝试找出适合您需要的值。

Answer 5

我怀疑您现在看到的问题是由于 Xperia x10 的屏幕相对较小 (240x320px)。 当您尝试将layout_marginTop和layout_marginLeft设置为相对较高的dp ，这实际上可能会超过手机的宽度/高度，从而导致您看到的布局。

我建议在一个RelativeLayout利用多个LinearLayout来获得更具可扩展性的布局。 您可以有 4 个LinearLayout s，每个都沿着屏幕的一个边缘，并且在这些布局中您可以放置​​您的ImageView s。 通过给每个ImageView相同的layout_weight ，它们可以沿着LinearLayout的长度均匀分布。