尝试在复合布局中对齐RadioGroup中的单选按钮

时间:2013-04-07 18:04:40

标签: android android-layout

我有这个布局片段。为什么两个无线电组不对齐?我已尝试使用RadioGroup中的边距和填充。

我假设marginLeft是从单选按钮本身的左边缘开始测量的,marginRight是从最长的单选按钮标题的右边开始测量的。在这方面文件不明确。

请注意,我删除了与布局无关的任何行(例如文字)。所有文字大小均为15sp

    <RelativeLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        <ImageView
                android:id="@+id/lengthImage"
                android:layout_centerVertical="true"
                android:paddingLeft="10dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

        <TextView
                android:text="@string/length"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@id/lengthImage"
                android:paddingLeft="15dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

        <RadioGroup
                android:orientation="vertical"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="200dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

            <RadioButton
                    android:id="@+id/lengthMetres"
                    android:paddingRight="20dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>

            <RadioButton
                    android:id="@+id/lengthFeet"
                    android:paddingRight="20dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>
        </RadioGroup>

    </RelativeLayout>

    <RelativeLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        <ImageView android:id="@+id/distanceImage"
                android:layout_centerVertical="true"
                android:paddingLeft="10dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

        <TextView
                android:text="@string/distance"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@id/distanceImage"
                android:paddingLeft="15dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

        <RadioGroup
                android:orientation="vertical"
                android:layout_marginLeft="200dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

            <RadioButton
                    android:id="@+id/distanceMile"
                    android:paddingRight="20dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>

            <RadioButton
                    android:id="@+id/distanceKM"
                    android:paddingRight="20dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>

            <RadioButton
                    android:id="@+id/distanceNM"
                    android:paddingRight="20dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"/>

        </RadioGroup>

    </RelativeLayout>

enter image description here

[编辑]

解。

将RadioGroup宽度硬编码为100dp非常有效。我讨厌这样做。我打赌那里有分辨率,密度和方向的组合会打破这个!

2 个答案:

答案 0 :(得分:6)

您无需对100dp进行硬编码即可完全构建布局。

通过android:layout_alignLeftandroid:layout_alignBottomandroid:layout_alignTop制作一些技巧,您可以使用RadioGroups解决问题。

但是,您必须稍微更改一下XML,因为只有当RadioGroups位于同一RelativeLayout时它才会起作用。

这是您的所有调整代码:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <RadioGroup
        android:id="@+id/radio_group_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="200dp"
        android:orientation="vertical" >

        <RadioButton
            android:id="@+id/lengthMetres"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="20dp"
            android:text="metres" />

        <RadioButton
            android:id="@+id/lengthFeet"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="20dp"
            android:text="feet" />
    </RadioGroup>

    <ImageView
        android:id="@+id/lengthImage"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignBottom="@id/radio_group_1"
        android:layout_alignTop="@id/radio_group_1"
        android:layout_centerVertical="true"
        android:paddingLeft="10dp"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/radio_group_1"
        android:layout_alignTop="@id/radio_group_1"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/lengthImage"
        android:gravity="center"
        android:paddingLeft="15dp"
        android:text="@string/length" />

    <RadioGroup
        android:id="@+id/radio_group_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/radio_group_1"
        android:layout_below="@id/radio_group_1"
        android:orientation="vertical" >

        <RadioButton
            android:id="@+id/distanceMile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="20dp"
            android:text="mile" />

        <RadioButton
            android:id="@+id/distanceKM"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="20dp"
            android:text="km" />

        <RadioButton
            android:id="@+id/distanceNM"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="20dp"
            android:text="NM" />
    </RadioGroup>

    <ImageView
        android:id="@+id/lengthImage"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignBottom="@id/radio_group_2"
        android:layout_alignTop="@id/radio_group_2"
        android:layout_centerVertical="true"
        android:paddingLeft="10dp"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/radio_group_2"
        android:layout_alignTop="@id/radio_group_2"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/lengthImage"
        android:gravity="center"
        android:paddingLeft="15dp"
        android:text="@string/length" />
</RelativeLayout>

这就是它的样子:

Aligned Radio Groups

我认为,在您的特定情况下,此解决方案是适用的,但对于某种通用解决方案,当您有两个以上的RadioGroup时,此解决方案将不得不进行改进。

希望这种方法对你有用:)

答案 1 :(得分:1)

您的RadioGroups看起来应该使用android:layout_width="match_parent"android:layout_marginLeft="200dp"(不是android:marginLeft)。

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/lengthImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:paddingLeft="10dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/lengthImage"
        android:paddingLeft="15dp"
        android:text="length" />

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="200dp"
        android:orientation="vertical" >

        <RadioButton
            android:id="@+id/lengthMetres"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="20dp"
            android:text="meters" />

        <RadioButton
            android:id="@+id/lengthFeet"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="20dp"
            android:text="feets" />
    </RadioGroup>
</RelativeLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/distanceImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:paddingLeft="10dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@id/distanceImage"
        android:paddingLeft="15dp"
        android:text="distance" />

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="200dp"
        android:orientation="vertical" >

        <RadioButton
            android:id="@+id/distanceMile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:paddingRight="20dp"
            android:text="foo" />

        <RadioButton
            android:id="@+id/distanceKM"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="20dp"
            android:text="boo" />

        <RadioButton
            android:id="@+id/distanceNM"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingRight="20dp"
            android:text="moo" />
    </RadioGroup>
</RelativeLayout>