【问题标题】:how to layout buttons for screen sizes with different aspect ratio如何为具有不同纵横比的屏幕尺寸布局按钮
【发布时间】:2014-04-17 17:45:34
【问题描述】:

我正在尝试将按钮放置在用作多种设备/屏幕尺寸背景的图像之上。如果我为纵横比为 9:16 的设备(例如 Galaxy Nexus 或 Nexus 5)在 relativeLayout 中定义按钮,以便按钮与图像上的特定位置对齐,那么它不会与相同的位置对齐宽高比为 3:5 的设备(例如 Nexus S)上的图像。在我的相对布局中,第一个按钮与屏幕的左侧和底部对齐,并带有偏移量(例如 android:layout_marginLeft="32dp" 和 android:layout_marginBottom="150dp")。所有其他按钮都与此按钮对齐。

我花了几天时间尝试通过实验和搜索教程来解决这个问题,但似乎没有任何效果。

下图是 Nexus 5 的。如您所见,按钮与背景对齐:

下图是 Nexus S 的。如您所见,按钮偏离背景

编辑: 我显然错过了一些关键概念。对于 hdpi、xhdpi 和 xxhdpi 的每个屏幕密度,我都有单独的目录。但是,根据我附加的两张图片,我似乎需要为尺寸为 480x800 与 720x1280 和 1080x1920 的屏幕设置单独的布局。似乎 720x1280 的屏幕必须需要与 1080x1920 屏幕相同的布局,因为 Nexus 5 和 Galaxy Nexus 具有相同的结果(即如第一张图片所示)。为了创建单独的布局,我尝试使用 layout-small、layout、layout-large 等(这是不推荐使用的方法),以及 layout-sw480dp 和 layout-sw720dp。然后,将第一个按钮的 layout_marginLeft 和 layout_margin_bottom 调整为合适的屏幕尺寸。这些方法都不起作用。

这是我的第一张图片布局的当前内容:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:paddingLeft="15dp"
    android:paddingBottom="5dp"
    tools:context="com.myCompany.myApp.MainActivity"
    android:background="@drawable/android_home_screen">

<Button
    style="?android:attr/buttonStyleSmall"
    android:layout_width="90dp"
    android:layout_height="wrap_content"
    android:text="Channel 1"
    android:id="@+id/channel1"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:textColor="#FFFFFF"
    android:layout_marginBottom="145dp"
    android:layout_marginLeft="17dp"
    android:lines="2" />

<Button
    style="?android:attr/buttonStyleSmall"
    android:layout_width="90dp"
    android:layout_height="wrap_content"
    android:text="Channel 3"
    android:id="@+id/channel3"
    android:textColor="#FFFFFF"
    android:layout_marginLeft="0dp"
    android:layout_toRightOf="@+id/channel1"
    android:layout_alignTop="@+id/channel1"
    android:lines="2" />

<Button
    style="?android:attr/buttonStyleSmall"
    android:layout_width="90dp"
    android:layout_height="wrap_content"
    android:text="Channel 5"
    android:id="@+id/channel5"
    android:textColor="#FFFFFF"
    android:layout_marginLeft="0dp"
    android:layout_toRightOf="@+id/channel3"
    android:layout_alignTop="@+id/channel3"
    android:lines="2" />

...

</RelativeLayout>

请帮助我了解如何将按钮放置在图像的特定位置上,而不管屏幕尺寸/纵横比/屏幕密度如何。具体来说,请提供一个示例,说明如何为 480x800 和 720x1280 的屏幕尺寸定义出现在背景图像的同一视觉点上的按钮。

以下是屏幕背景的完整图像。我正在尝试将按钮放置在带有薄金色轮廓的区域的顶部。 hdpi、xhdpi 和 xxhdpi 的每个可绘制目录中都有一个。 hdpi图像为480x693像素,xhdpi图像为720x1040像素,xxhdpi图像为1080x1559像素,分辨率分别为213.34 ppi、320 ppi和480 ppi。这些分辨率和尺寸使图像在点方面具有相同的图像大小(宽度和高度)。

【问题讨论】:

  • 首先要避免像 32dp 或 150dp 这样的特定对齐方式。始终尝试使用 wrap_content 或 fill_parent。对于所有设备支持,请阅读此链接,希望它可以帮助您 developer.android.com/guide/practices/screens_support.htmlstackoverflow.com/questions/8255985/…
  • @MycareerId - 我正在使用 Android Studio,它会自动将这些特定的对齐编号放入。如果没有特定的对齐编号,我无法让第一个按钮停留在图像上的特定位置。您建议使用什么方法将按钮锚定到图像上的某个位置。感谢您的链接。我已经尝试过尝试不同的布局目录,但没有成功。我将倾诉堆栈溢出链接的想法,看看是否有其他示例可以尝试。
  • @MycareerId - 不幸的是,这些参考资料都没有帮助解决我的问题。根据我附加的两张图片,我似乎需要为尺寸为 480x800 和 720x1280 的屏幕设置单独的布局。似乎由于 720x1280 的屏幕必须与 1080x1920 的屏幕需要相同的布局,因为 Nexus 5 和 Galaxy Nexus 具有相同的结果。因此,我尝试使用 layout-small、layout、layout-large 等,以及 layout-sw48dp 和 layout-sw720dp。这些方法都不起作用。事实上,他们使模拟器崩溃。所以,我错过了一些关键信息。帮助
  • 只需将不同尺寸的图片放在不同的drawable文件夹中(drawablemdpi drawablehdpi...),为不同的屏幕做不同的布局
  • @MycareerId - 谢谢。我一定在解释这一点方面做得很差。我认为你的建议正是我正在做的。但是我使用的技术不起作用。我在不同的可绘制文件夹中有不同大小的图像。然后我为每个图像创建不同的布局。具体来说,我创建了以下文件夹,每个文件夹中都有唯一的 xml 文件。文件夹是布局,布局小,布局大。我还尝试了名为:layout-sw480dp 和 layout-sw720dp 的文件夹。后来崩溃的模拟器,前者只使用了9:16纵横比的布局。我做对了吗?

标签: android android-layout user-interface button aspect-ratio


【解决方案1】:

您可以使用线性布局的权重属性来管理您的布局,它会自动调整屏幕

   <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ababab" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_margin="10dp"
        android:background="#fff"
        android:orientation="vertical"
        android:padding="10dp" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:weightSum="3" >

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:orientation="horizontal"
            android:weightSum="1" >

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight=".1" />

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight=".4" />

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight=".4" />

            <Button
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight=".1" />
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

【讨论】:

  • 谢谢,但我需要使用相对布局,因为按钮并非都以整齐的行和列排列在图像的顶部。有 6 行都有不同大小的按钮和文本视图。大多数行从不同的水平位置开始,具有不同的垂直位置。
  • 您可以在相对布局内创建多个线性布局,并可以根据需要管理您的视图。在相对布局内您可以使用 layout:below 相对布局的属性在相对内水平对齐线性布局布局
  • 好的,我想出了如何在相对布局中拥有多个线性布局。虽然从水平的角度来看这似乎有所帮助,但从垂直的角度来看,它仍然不能解决我的问题。如图所示,当纵横比从 3:5 变为 9:16 时,按钮不会对齐。除非有其他方法,否则使用线性布局仍然需要我使用 paddingBottom、paddingRight 和 paddingLeft 将每一行的按钮放置在图像上方的适当位置。我在 dp 中为这些指定单位(例如 paddingBottom="80dp")。还有其他想法吗?
  • 好的,您可以发布您的完整布局图片,以便我可以根据您的要求为您制作布局。
  • 我已经发布了完整图像的快照。那是你要求的吗?如前所述,图像比例相同,但每个可绘制目录 hdpi、xhdpi 和 xxhdpi 的分辨率不同。
猜你喜欢
  • 2012-10-06
  • 2012-08-23
  • 1970-01-01
  • 2020-03-17
  • 2016-11-27
  • 1970-01-01
  • 2015-07-12
  • 2014-10-22
相关资源
最近更新 更多