Android应用布局：元素出现在不同的地方

时间：2017-06-05 12:53:07

标签： android android-layout

我正在开发我们的iOS应用的Android版本，但有布局问题。元素出现在不同屏幕尺寸的不同位置。这是我必须复制的iOS版本。 iPhone's layout

这是我的应用。什么是最好的布局组合来复制iOS对应物。

这是我的版本：

Android layout image

这是我的布局的xml：

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

    <TextView
        android:id="@+id/text_rssi"
        android:layout_width="@dimen/_90sdp"
        android:layout_height="@dimen/_16sdp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="@dimen/_50sdp"
        android:background="@drawable/btn_indicators_disconnect" />

    <TextView
        android:id="@+id/text_rssi_val"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/text_rssi"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="@dimen/_5sdp"
        android:text="0"
        android:textColor="#FFF"
        android:textSize="@dimen/_12sdp" />

    <LinearLayout
        android:id="@+id/layout_circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/searching_all_off_circle"
        android:orientation="vertical"
        android:padding="@dimen/_5sdp"
        android:layout_below="@+id/text_rssi_val"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="53dp">

        <Button
            android:id="@+id/btn_CheckLister"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="@dimen/_45sdp"
            android:background="@drawable/searching_all_off" />
    </LinearLayout>

    <RelativeLayout
        android:id="@+id/rl_btnLock"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/btn_parked_location"
        android:layout_marginBottom="@dimen/_20sdp">

        <Button
            android:id="@+id/btn_unlock"
            android:layout_width="@dimen/_55sdp"
            android:layout_height="@dimen/_55sdp"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="@dimen/_65sdp"
            android:background="@drawable/unlock_unpressed" />

        <Button
            android:id="@+id/btn_lock"
            android:layout_width="@dimen/_55sdp"
            android:layout_height="@dimen/_55sdp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="@dimen/_65sdp"
            android:background="@drawable/lock_unpressed" />
    </RelativeLayout>

    <Button
        android:id="@+id/btn_parked_location"
        android:layout_width="@dimen/_150sdp"
        android:layout_height="@dimen/_35sdp"
        android:layout_above="@+id/ble_list_devices"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:layout_marginBottom="@dimen/_12sdp"
        android:background="@drawable/parked_icon" />

    <TextView
        android:id="@+id/ble_list_devices"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#565656"
        android:padding="@dimen/_8sdp"
        android:text="Searching..."
        android:textAlignment="center"
        android:textColor="#FFF"
        android:textSize="@dimen/_14sdp" />


</RelativeLayout>

2 个答案:

答案 0 :(得分：0)

那是因为您正在使用RelativeLayout，它将其内容相对于ViewGroup中的根元素对齐。根据官方documentation -

  

RelativeLayout是一个以相对方式显示子视图的视图组   位置。每个视图的位置可以指定为相对于   兄弟元素（例如在另一个视图的左下方或下方）或中   相对于父RelativeLayout区域的位置（例如对齐）   到底部，左边或中间）。

在我看来，元素应该相应地调整所有屏幕尺寸的位置，为此，有一个比RelativeLayout更好的选择，那就是ConstraintLayout，它与{{3}的工作方式类似}。

答案 1 :(得分：0)

我修改了你的代码。由于我没有相应的图像，我使用ic_launcher图像到所有图像，你可以替换它，你的要求在这里是以下代码

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

    <TextView
        android:id="@+id/text_rssi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:background="@mipmap/ic_launcher"  />

    <TextView
        android:id="@+id/text_rssi_val"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/text_rssi"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="5dp"
        android:text="0"
        android:textColor="#FFF"
        android:textSize="12dp" />



        <ImageButton
            android:layout_below="@+id/text_rssi_val"
            android:id="@+id/btn_CheckLister"
            android:layout_centerInParent="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="45dp"
            android:src="@mipmap/ic_launcher"
            android:background="@null"/>


    <LinearLayout
        android:orientation="horizontal"
        android:id="@+id/rl_btnLock"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="2"
        android:layout_above="@+id/btn_parked_location"
        android:layout_marginBottom="20dp">

        <ImageButton
            android:id="@+id/btn_unlock"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_weight="1"
            android:background="@null"
            android:src="@mipmap/ic_launcher"/>

        <ImageButton
            android:id="@+id/btn_lock"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:src="@mipmap/ic_launcher"/>
    </LinearLayout>

    <ImageButton
        android:id="@+id/btn_parked_location"
        android:layout_width="150dp"
        android:layout_height="35dp"
        android:layout_above="@+id/ble_list_devices"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"
        android:layout_marginBottom="12dp"
        android:background="@null"
        android:src="@mipmap/ic_launcher"/>

    <TextView
        android:id="@+id/ble_list_devices"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#565656"
        android:padding="8dp"
        android:text="Searching..."
        android:textAlignment="center"
        android:textColor="#FFF"
        android:textSize="14dp" />
</RelativeLayout>
相关问题
最新问题