android - 在某些设备上布局看起来很乱
Posted
技术标签:
【中文标题】android - 在某些设备上布局看起来很乱【英文标题】：android - layout looks messed up in some devices 【发布时间】：2016-01-05 06:10:30 【问题描述】：我的布局有一个非常奇怪的问题。它看起来与 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_
android:orientation="vertical"
android:gravity="center"
android:layout_ >
<FrameLayout
android:layout_marginTop="7dp"
android:layout_gravity="center"
android:layout_
android:layout_>
<View android:layout_marginTop="19dp" android:layout_marginLeft="19dp" android:layout_ android:layout_ android:background="#B2CFEF"/>
<View android:layout_marginTop="19dp" android:layout_marginLeft="189dp" android:layout_ android:layout_ android:background="#B2CFEF"/>
<View android:layout_marginTop="18dp" android:layout_marginLeft="20dp" android:layout_ android:layout_ android:background="#B2CFEF"/>
<View android:layout_marginTop="267dp" android:layout_marginLeft="19dp" android:layout_ android:layout_ 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>
有什么想法吗？？？
【问题讨论】：
您希望如何缩放此视图？它应该始终与设备大致相同的宽度/高度，还是您希望它在每个设备上保持相同的物理尺寸。我问的原因是您当前的布局不是很动态，并且可能最终在许多设备上看起来很奇怪。 理想情况下，它会缩放到设备尺寸，并在更大的设备中看起来更大。我知道我发布的 xml 无法扩展，但这只是第一步。 几个问题：1) Xperia 是什么 Android 版本？ API级别？ 2) 样式中可绘制的@drawable/ta 是什么。那是你可以分享的东西吗？在具有 LDPI 240x320 像素屏幕的模拟器上，屏幕看起来还可以。
@Anonymous ***.com/a/45071079/2013835 这个答案使用正确的解决方案，具有现代布局。
【参考方案1】：
约束布局可以轻松调整以适应任何屏幕，无需任何复杂的层次结构，如下所示：
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:layout_
xmlns:app="http://schemas.android.com/apk/res-auto">
<View
android:id="@+id/left_border"
android:layout_
android:layout_
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_
android:layout_
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_
android:layout_
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_
android:layout_
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>
截图如下：
【讨论】：
【参考方案2】：来自关于Supporting Multiple Screens的官方指南。
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
阅读Responsive UI with ConstraintLayout
仅供参考
ConstraintLayout 负责管理定位和 可视组件（也称为小部件）的大小调整行为 它包含。
【讨论】：
【参考方案3】：使用高 dp 值通常会导致小屏幕出现失真。如果您打算支持这些设备，您可以做两件事：
-
为
-small 设备创建另一个布局。
更改布局以使用 layout_weight 或 RelativeLayout。
在我看来，两者都做将是最佳做法，尽管第一个更为重要。
【讨论】：
【参考方案4】：你可以看看这个library。该库将帮助您根据不同的屏幕尺寸缩放视图。
编辑：这就是图书馆的工作方式。
您可以简单地使用@dimen/_sdp 而不是您正在使用的普通dp
例如
<View android:layout_marginTop="@dimen/_15sdp" android:layout_marginLeft="@dimen/_15sdp" android:layout_ android:layout_ android:background="#B2CFEF"/>
另外请注意，我上面使用的值仅供参考。您必须尝试找出适合您需要的值。
【讨论】：
【参考方案5】：我怀疑您现在看到的问题是由于 Xperia x10 的屏幕相对较小 (240x320px)。当您尝试将layout_marginTop 和layout_marginLeft 设置为相对较高的dp 时，实际上可能会超过手机的宽度/高度，从而导致您看到的布局。
我建议在 RelativeLayout 中利用多个 LinearLayouts 以获得更具可扩展性的布局。您可以有 4 个LinearLayouts，每个都位于屏幕的一个边缘，在这些布局中您可以放置您的ImageViews。通过为每个ImageView 赋予相同的layout_weight，它们可以沿LinearLayout 的长度均匀分布。
【讨论】：
这也是最初的想法，所以我做了相同的布局，将所有 dp 值除以 2。仍然是相同的结果......只是更小！我会用它发一张照片以上是关于android - 在某些设备上布局看起来很乱的主要内容，如果未能解决你的问题，请参考以下文章