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>

任何想法???

编辑：我将所有dp值除以2以查看问题是否是我使用高dp值。这是同时具有两个版本的结果：

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

关于 Supporting Multiple Screens 的官方指南。

Android可在各种提供不同屏幕尺寸的设备上运行和密度。对于应用程序，Android系统提供了一个跨设备的一致开发环境和处理大部分调整每个应用程序的用户界面到屏幕的工作显示它。同时，系统提供API 允许您根据特定屏幕大小控制应用程序的UI 和密度，以优化您的UI设计为不同屏幕配置。

例如，您可能需要平板电脑的UI 这与手机的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负责管理定位和可视组件的大小调整行为（也称为小部件）它包含。

Answer 3

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

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

在我看来，做到这两点都是最好的做法，尽管第一点更为重要。

Answer 4

您可以查看此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"/>代替正在使用的普通pageTitle

例如

RequestOptions

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

Answer 5

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

我建议在LinearLayout内利用多个RelativeLayout来获得更具伸缩性的布局。您可以在屏幕的一个边缘有4 LinearLayout个，在这些布局中，您可以放置ImageView。通过为每个ImageView提供相同的layout_weight，它们可以沿着LinearLayout的长度均匀分布。

android - 布局看起来在一些设备中搞砸了

5 个答案: