如何为不同宽高比的屏幕尺寸布局按钮

时间:2014-04-17 17:45:35

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

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

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

以下图片适用于Nexus 5.如您所见,按钮与背景对齐:

enter image description here

以下图片适用于Nexus S.如您所见,按钮偏离背景 enter image description here

编辑: 我显然缺少一些关键概念。我为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。这些分辨率和尺寸使图像在点数方面具有相同的图像尺寸(宽度和高度)。 enter image description here

1 个答案:

答案 0 :(得分:2)

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

   <?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>