相对布局对齐

Question

我在一些视图中使用了相对布局。我需要水平对齐视图，但视图在所有屏幕尺寸的设备上显示的并不相同？

<RelativeLayout
        android:id="@+id/layout_relative"
        android:layout_width="fill_parent"
        android:layout_height="90dp"
        android:layout_marginTop="-5dp"
        android:background="#007DD7">

        <TextView
            android:id="@+id/text1_login"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:layout_marginLeft="45dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/circle"
            android:backgroundTint="@color/white"
            android:gravity="center"
            android:shadowRadius="10.0"
            android:text="1"
            android:textColor="@android:color/holo_blue_dark"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/text2_login"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/text1_login"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="45dp"
            android:paddingLeft="3dp"
            android:paddingRight="3dp"
            android:text="Login"
            android:textColor="@color/white"
            android:textSize="20sp" />

        <View
            android:id="@+id/1_line"
            android:layout_centerHorizontal="@+id/text1_login"
            android:layout_width="70dp"
            android:layout_height="2dp"
            android:layout_marginLeft="90dp"
            android:layout_marginTop="30dp"
            android:background="@android:color/white"
            android:backgroundTint="@color/add_contact_selected"/>

        <TextView
            android:id="@+id/text1_delivery"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:layout_marginLeft="170dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/circle"
            android:shadowRadius="10.0"
            android:text="2"
            android:gravity="center"
            android:textColor="@android:color/holo_blue_dark"
            android:textSize="18sp"
            android:backgroundTint="@color/add_contact_selected"/>
        <TextView
            android:id="@+id/text2_delivery"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/text1_delivery"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="25dp"
            android:gravity="center_horizontal"
            android:maxLines="2"
            android:paddingLeft="3dp"
            android:paddingRight="3dp"
            android:text="Delivery"
            android:textColor="@color/add_contact_selected"
            android:textSize="20sp" />
        <View
            android:id="@+id/2_line"
            android:layout_centerHorizontal="@+id/text1_delivery"
            android:layout_width="80dp"
            android:layout_height="2dp"
            android:layout_marginLeft="215dp"
            android:layout_marginTop="30dp"
            android:background="@android:color/white"
            android:backgroundTint="@color/add_contact_selected"/>

        <TextView
            android:id="@+id/text1_payment"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:layout_marginLeft="300dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/circle"
            android:gravity="center"
            android:shadowRadius="10.0"
            android:text="3"
            android:textColor="@android:color/holo_blue_dark"
            android:textSize="18sp"
            android:backgroundTint="@color/add_contact_selected"/>
        <TextView
            android:id="@+id/text2_payment"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/text1_payment"
            android:gravity="center_horizontal"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="260dp"
            android:maxLines="2"
            android:paddingLeft="3dp"
            android:paddingRight="3dp"
            android:text="Payment"
            android:textColor="@color/add_contact_selected"
            android:textSize="20sp"
            />
    </RelativeLayout>

Answer 1

要水平对齐视图，您应该使用水平方向的线性布局并为每个子视图分配权重。

检查我使用您的布局编写的这个示例 -

<LinearLayout
    android:id="@+id/layout_relative"
    android:layout_width="fill_parent"
    android:layout_height="90dp"
    android:layout_marginTop="-5dp"
    android:orientation="horizontal"
    android:background="#007DD7">

    <TextView
        android:id="@+id/text1_login"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:layout_marginLeft="45dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/circle"
        android:backgroundTint="@color/white"
        android:gravity="center"
        android:shadowRadius="10.0"
        android:text="1"
        android:layout_weight="1"
        android:textColor="@android:color/holo_blue_dark"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/text2_login"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="45dp"
        android:paddingLeft="3dp"
        android:paddingRight="3dp"
        android:text="Login"
        android:textColor="@color/white"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/text1_delivery"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_weight="1"
        android:layout_gravity="center"
        android:layout_marginLeft="170dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/circle"
        android:shadowRadius="10.0"
        android:text="2"
        android:gravity="center"
        android:textColor="@android:color/holo_blue_dark"
        android:textSize="18sp"
        android:backgroundTint="@color/add_contact_selected"/>

</LinearLayout>

Answer 2

您需要使用 LinearLayout 和 android:orientation="horizontal" 并使用 android:layout_weight 来调整您的观点。

我已经编辑了你的代码：

 <LinearLayout
        android:id="@+id/layout_linear"
        android:layout_width="fill_parent"
        android:layout_height="90dp"
        android:layout_marginTop="-5dp"
        android:background="#007DD7"
        android:orientation="horizontal">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">
            <TextView
                android:id="@+id/text1_login"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_gravity="center"
                android:layout_marginTop="10dp"
                android:background="@drawable/circle"
                android:backgroundTint="@color/white"
                android:gravity="center"
                android:shadowRadius="10.0"
                android:text="1"
                android:textColor="@android:color/holo_blue_dark"
                android:textSize="18sp" />

            <TextView
                android:id="@+id/text2_login"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/text1_login"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="10dp"
                android:paddingLeft="3dp"
                android:paddingRight="3dp"
                android:text="Login"
                android:textColor="@color/white"
                android:textSize="20sp" />

            <View
                android:id="@+id/1_line"
                android:layout_width="fill_parent"
                android:layout_height="2dp"
                android:background="@android:color/white"
                android:backgroundTint="@color/add_contact_selected"/>
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">
            <TextView
                android:id="@+id/text1_delivery"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_gravity="center"
                android:layout_marginTop="10dp"
                android:background="@drawable/circle"
                android:shadowRadius="10.0"
                android:text="2"
                android:gravity="center"
                android:textColor="@android:color/holo_blue_dark"
                android:textSize="18sp"
                android:backgroundTint="@color/add_contact_selected"/>
            <TextView
                android:id="@+id/text2_delivery"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/text1_delivery"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="10dp"
                android:gravity="center_horizontal"
                android:maxLines="2"
                android:paddingLeft="3dp"
                android:paddingRight="3dp"
                android:text="Delivery"
                android:textColor="@color/add_contact_selected"
                android:textSize="20sp" />
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">
            <TextView
                android:id="@+id/text1_payment"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_gravity="center"
                android:layout_marginTop="10dp"
                android:background="@drawable/circle"
                android:gravity="center"
                android:shadowRadius="10.0"
                android:text="3"
                android:textColor="@android:color/holo_blue_dark"
                android:textSize="18sp"
                android:backgroundTint="@color/add_contact_selected"/>
            <TextView
                android:id="@+id/text2_payment"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/text1_payment"
                android:gravity="center_horizontal"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="10dp"
                android:maxLines="2"
                android:paddingLeft="3dp"
                android:paddingRight="3dp"
                android:text="Payment"
                android:textColor="@color/add_contact_selected"
                android:textSize="20sp"
                />
        </LinearLayout>
    </LinearLayout>

更新：在圆圈之间添加水平线：

<RelativeLayout
    android:orientation="vertical"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1">
    <TextView
        android:id="@+id/text1_login"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:background="@drawable/circle"
        android:backgroundTint="@color/white"
        android:gravity="center"
        android:shadowRadius="10.0"
        android:text="1"
        android:textColor="@android:color/holo_blue_dark"
        android:textSize="18sp"
        android:layout_centerHorizontal="true" />

    <TextView
        android:id="@+id/text2_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/text1_login"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="10dp"
        android:paddingLeft="3dp"
        android:paddingRight="3dp"
        android:text="Login"
        android:textColor="@color/white"
        android:textSize="20sp"
        android:layout_centerHorizontal="true" />

    <View
        android:id="@+id/1_line"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="@android:color/white"
        android:backgroundTint="@color/add_contact_selected"
        android:layout_marginTop="30dp"
        android:layout_toRightOf="@+id/text1_login" />
</RelativeLayout>
<RelativeLayout
    android:orientation="vertical"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1">
    <View
        android:id="@+id/2_line"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="@android:color/white"
        android:backgroundTint="@color/add_contact_selected"
        android:layout_marginTop="30dp"
        android:layout_toLeftOf="@+id/text1_delivery" />
    <TextView
        android:id="@+id/text1_delivery"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:background="@drawable/circle"
        android:shadowRadius="10.0"
        android:text="2"
        android:textColor="@android:color/holo_blue_dark"
        android:textSize="18sp"
        android:backgroundTint="@color/add_contact_selected"
        android:gravity="center"
        android:layout_centerHorizontal="true" />
    <View
        android:id="@+id/22_line"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="@android:color/white"
        android:backgroundTint="@color/add_contact_selected"
        android:layout_marginTop="30dp"
        android:layout_toRightOf="@+id/text1_delivery" />
    <TextView
        android:id="@+id/text2_delivery"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/text1_delivery"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="10dp"
        android:gravity="center_horizontal"
        android:maxLines="2"
        android:paddingLeft="3dp"
        android:paddingRight="3dp"
        android:text="Delivery"
        android:textColor="@color/add_contact_selected"
        android:textSize="20sp"
        android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout
    android:orientation="vertical"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1">
    <View
        android:id="@+id/3_line"
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="@android:color/white"
        android:backgroundTint="@color/add_contact_selected"
        android:layout_marginTop="30dp"
        android:layout_toLeftOf="@+id/text1_payment" />
    <TextView
        android:id="@+id/text1_payment"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:background="@drawable/circle"
        android:gravity="center"
        android:shadowRadius="10.0"
        android:text="3"
        android:textColor="@android:color/holo_blue_dark"
        android:textSize="18sp"
        android:backgroundTint="@color/add_contact_selected"
        android:layout_centerHorizontal="true" />
    <TextView
        android:id="@+id/text2_payment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/text1_payment"
        android:gravity="center_horizontal"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="10dp"
        android:maxLines="2"
        android:paddingLeft="3dp"
        android:paddingRight="3dp"
        android:text="Payment"
        android:textColor="@color/add_contact_selected"
        android:textSize="20sp"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

Answer 3

我看到了所有建议使用 LinearLayout 的人的回答。有一件事你必须非常了解 clearly.By 使用 Relative 或 Linear 我们可以实现所有的布局设计。

首先你要分析哪种设计会是good.Implementation可能取决于三件事。

1.Easy designing
2.Layout performance
3.How much you know about attributes of layout.

我的建议也是 Linear only for your implementation 但有时多个内部线性布局会导致性能问题，你也应该意识到这一点。

我们如何开发代码并不重要，我们如何优化代码非常重要。

相对布局对齐

Relative Layout alignment

android

android-relativelayout