Android 相对布局和不同屏幕 sizes/devices

Android relative layout and different screen sizes/devices

我刚写完所有这些内容,但这个小红条告诉我我不能 post 图片或两个以上的链接。因此,如果您能参考 this Imgur album,那就太好了。谢谢。

我在这里相对较新,甚至对 android 编程也比较陌生。我正在尝试编写一个强调视觉吸引力而不是功能吸引力的应用程序。这不是作业或工作相关,只是我想尝试的东西。

所以我遇到了障碍。在不同的模拟器和设备中,我正在争论一些 TextView 框的布局。我一直在阅读 this,但它有点长而且它似乎并没有解决我的问题,老实说,它只是在我的头上。

这是我的问题。

我有一些 TextView 盒子,我在 XML 中使用了 layout 属性,在设计 window 中使用了 [=50] 中的 Nexus 4 模拟设备=] 工作室,它看起来像这样(图 1)

代码如下所示:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/anger"
    android:id="@+id/angertv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_centerVertical="true"
    android:layout_alignParentEnd="true"
    android:layout_marginEnd="36dp"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/happiness"
    android:id="@+id/happinesstv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_centerVertical="true"
    android:layout_alignParentStart="true"
    android:layout_marginStart="34dp" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/fear"
    android:id="@+id/feartv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_alignParentTop="true"
    android:layout_alignParentEnd="true"
    android:layout_marginTop="165dp"
    android:layout_marginEnd="100dp" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/sadness"
    android:id="@+id/sadnesstv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_alignParentBottom="true"
    android:layout_alignParentStart="true"
    android:layout_marginBottom="165dp"
    android:layout_marginStart="66dp" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/surprise"
    android:id="@+id/surprisetv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_alignParentTop="true"
    android:layout_alignParentStart="true"
    android:layout_marginTop="165dp"
    android:layout_marginStart="60dp" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/disgust"
    android:id="@+id/disgusttv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_marginBottom="165dp"
    android:layout_marginEnd="74dp" />

我一直在使用父边框来定位设备屏幕上的 6 个字。但是当时间到了 运行 时,它在 Nexus 5 模拟器屏幕上看起来像这样(图 2),而在实际的 HTC One m8 上,它看起来像这样(图 3)。

所以我尝试这样的事情:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/center"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/anger"
    android:id="@+id/angertv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_centerVertical="true"
    android:layout_toEndOf="@+id/center"
    android:layout_marginStart="70dp" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/happiness"
    android:id="@+id/happinesstv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_centerVertical="true"
    android:layout_toStartOf="@+id/center"
    android:layout_marginEnd="67dp" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/fear"
    android:id="@+id/feartv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_above="@+id/center"
    android:layout_toEndOf="@+id/center"
    android:layout_marginBottom="67dp"
    android:layout_marginStart="30dp" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/sadness"
    android:id="@+id/sadnesstv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_below="@+id/center"
    android:layout_toStartOf="@+id/center"
    android:layout_marginTop="68dp"
    android:layout_marginEnd="12dp" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/surprise"
    android:id="@+id/surprisetv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_above="@+id/center"
    android:layout_toStartOf="@+id/center"
    android:layout_marginBottom="67dp"
    android:layout_marginEnd="10dp" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/disgust"
    android:id="@+id/disgusttv"
    android:textSize="28sp"
    android:textStyle="bold"
    android:typeface="serif"
    android:textColor="#FFFFFF"
    android:layout_below="@+id/center"
    android:layout_toEndOf="@+id/center"
    android:layout_marginTop="68dp"
    android:layout_marginStart="16dp" />

我使用了一个额外的 TextView(ID'd center),它与设备的中心对齐,它是空的,并用它来将其他视图与其中的文本对齐.这些是结果。

设计 window Nexus 4:(图 4)

Nexus 5 模拟器:(图 5)

HTC One m8:(图 6)

好多了,但不完全是。理想情况下,这些词应该留在我制作的馅饼切片中的一个位置。我一直在四处寻找,但似乎没有什么特别的,而且由于我是这方面的初学者,我似乎无法从人们的回答中推断出其他可能相似但不太像这种情况的问题。

如果有人能向我解释如何解决这个问题,或者指出正确的方向,我将不胜感激。谢谢。

您可以使用@dimen个不同的dimen文件,这样不同的屏幕尺寸会有不同的字体大小。

android:textSize="@dimen/text_28"

不同目录下的维度值:

res/values/dimen.xml

<dimen name="text_28">28sp</dimen>

res/values-600dp/dimen.xml

<dimen name="text_28">22sp</dimen>

等等

您将不得不尝试不同的字体大小和屏幕大小,但您应该能够找到合适的东西。

http://developer.android.com/training/multiscreen/screensizes.html#TaskUseSizeQuali

此页面显示了一些流行的设备指标: https://design.google.com/devices/