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

Question

我的布局有一个非常奇怪的问题。它看起来与 eclipse XML 编辑器和我的三星 Galaxy 中的设计相同，但在我的旧手机 xperia x10 mini 中却搞砸了。我只能假设这也会发生在其他设备中。

如果有人可以帮助解决这个问题，我将不胜感激。

这是两个屏幕截图和 XML 代码。

它在 Eclipse 布局编辑器和我的三星 Galaxy S4 mini 中的外观

它在索尼 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" />

要调整边距，只需更改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

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

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

您可以简单地使用而不是您正在使用@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 4

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

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

在我看来，两者都做将是最佳实践，尽管第一个更为重要。

Answer 5

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

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