Question

我正在努力构建我团队的应用程序的用户界面。
最初，我的合作伙伴使用Sketch 3设计UI 根据Android API开发支持多屏幕指南，我们知道mdpi 1dp = 1px 。
因此我们计划以mdpi密度设计基本标准UI。如果我们使用dp作为我们的长度单位，其他密度将自动适合位置或长度。

我们在Sketch中使用的用于设计画布的基本UI分辨率为360 x 640.我们已经阅读了一些文章，一些文章称设计标准的mdpi分辨率为360 x 640，其他人称为480 x 320。
它真的很困惑。我们最终选择了360 x 640，因为480 x 320的宽高比是4：3而不是那么多Android设备使用它。

在我们完成用户界面后，我尝试将其应用到我们的应用中。但我遇到了定位元素的一些问题。例如，我们的启动页面这是我们的启动页面，我可以按住Option / Alt来获取Sketch 3中edge到out元素之间的距离。因为UI样本文件是以mdpi分辨率制作的，所以我可以直接使用长度。（1px = 1dp in mdpi）
Splash Sample Image

CoolLogo是一个ImageView。整个布局是RelativeLayout 我使用android:layout_centerHorizontal="true"将ImageView置于布局的中心和android:layout_marginTop="268dp"根据我们的UI示例文件使其成为正确的位置。

这是整个布局xml文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    style="@style/LaunchPageLayout">

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/coollogo"
    android:layout_marginTop="268dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true" 
    />

</RelativeLayout>

预览Nexus 5（5＆＃34;，xxdpi，1080 x 1920）看起来不错。但ImageView的位置似乎有点不正确。

当切换到较小的设备，如Nexus One（3.7＆＃34;，hdpi，480 x 800）时，位置完全错误。它应该处于更多的上升位置 Nexus One Preview Sample Image in Android Studio

我很困惑。当我们将元素放入布局时，我们如何获得正确的位置值？难道这并不意味着我们只是设计一个mdpi的UI，它应该适合所有的密度吗？但如果这是真的，为什么小型设备上的布局是错误的？因为我们的示例UI是以mdpi分辨率设计的。我完全糊涂了。

可能有人给我一些建议或一些最佳实践来建立用户界面吗？谢谢。

Answer 1

根据指南，建议Google不要使用绝对像素单元来设计UI。
我们最终使用以下方法设计我们的应用程序。
分享给开始设计Android UI的每个人。

基本上，我们需要一个 mdpi 尺寸的画布，画布尺寸为320px * 480px
我们使用此分辨率作为我们的标准分辨率，
包括测量长度和尺寸。

如果你听说过iOS UI（或macOS）的设计您会知道iOS经常使用320px * 480px作为标准 x1 分辨率。
导出资源时，标准分辨率为 x1 ，Retina分辨率为 x2 。
因为Retina分辨率是标准分辨率的两倍。

就像那样，如果我们使用标准分辨率，Android将帮助我们适应不同分辨率的机器。
所以我们得到了：

mdpi   => x1  (the standard)
hdpi   => x1.5
xhdpi  => x2
xxhdpi => x3

从理论上讲，如果我们遵循标准分辨率，我们可以为任何其他分辨率构建布局。
顺便说一下，我们也可以设置不同的维数值。
它将有助于布局在视觉上更加准确。
也许构建一个布局以适应当前所有类型的分辨率的最佳方法是使用ConstraintLayout。

但这种方法有时没有意义。
无论如何，为手机和平板电脑（甚至平板手机）设计UI始终是一种良好的用户体验。

使用DP单元进行Android UI设计和布局调整

1 个答案: