安卓 - 在某些设备上布局看起来混乱

Question

安卓 - 在某些设备上布局看起来混乱

androidandroid-layoutandroid-linearlayoutandroid-constraintlayoutandroid-framelayout

14

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

有什么想法？？？

- Anonymous

你想让这个视图如何缩放？它应该始终与设备的宽度/高度大致相同，还是您希望它在每个设备上保持相同的物理大小。我问这个问题的原因是，您当前的布局不太动态，可能会在许多设备上看起来很奇怪。 - NasaGeek

理想情况下，它应该能够根据设备大小进行缩放，并在较大的设备上显示更大。我知道我发布的 XML 不会自动缩放，但那只是第一步。 - Anonymous

几个问题：1）Xperia是什么Android版本？API级别是多少？2）样式中的drawable @drawable/ta是什么？你能分享一下吗？在具有LDPI 240x320像素屏幕的模拟器上，屏幕看起来很好。 - Cheticamp

1

@匿名者 https://dev59.com/GFwY5IYBdhLWcg3wHkqK#45071079 这个答案使用了正确的解决方案和现代化的布局。 - JJ86

5个回答

6

根据有关支持多个屏幕的官方指南，Android运行在提供不同屏幕尺寸和密度的各种设备上。对于应用程序，Android系统提供了一致的开发环境，并处理大部分工作以调整每个应用程序的用户界面显示在屏幕上。同时，系统提供API使您能够控制应用程序的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

阅读 使用ConstraintLayout实现响应式UI

提示

ConstraintLayout 负责管理它包含的视觉组件（也称为小部件）的定位和大小调整行为。

- IntelliJ Amiya

2

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

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

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

- Neria Nachum

2

您可以查看此库。该库将帮助您根据不同的屏幕尺寸来缩放视图。

编辑：这就是该库的工作原理。

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

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

- Rahulrr2602

1

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

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

- NasaGeek

那也是我最初的想法，所以我按相同的布局将所有dp值除以二。但结果仍然相同…只是更小了！我会附上一张图片。 - Anonymous

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rapunzel Van Winkle · Accepted Answer

使用约束布局可以轻松适应任何屏幕，无需像这样复杂的层次结构：

<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。在下面的截图中，我使用了以下值，您可以随意进行调整：

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

这是一张截图: