xml对齐问题需要相对布局,其中四个图像视图在任何屏幕上都位于中间

时间:2017-02-10 12:01:25

标签: android xml

我有一个问题,例如我 enter image description here

在nexus 6中这样,当我在较小的屏幕上更改时发生如下: enter image description here

我做错了哪里和哪里?我是这个xml的新手。以前从不需要它。 我的xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.xxx"
    android:background="@android:color/darker_gray">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/_00"
        android:id="@+id/textViewSomething"
        android:textSize="30sp"
        android:textStyle="normal|bold"
        android:layout_above="@+id/buttonStart"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="22dp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@android:color/darker_gray"
        android:layout_centerInParent="false"
        android:layout_alignWithParentIfMissing="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/nine"
            android:id="@+id/imageView2"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@+id/imageView"
            android:layout_toStartOf="@+id/imageView" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/nine"
            android:id="@+id/imageView6"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@+id/imageView2"
            android:layout_toStartOf="@+id/imageView2" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/nine"
            android:id="@+id/imageView5"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@+id/imageView6"
            android:layout_toStartOf="@+id/imageView6" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/zero"
            android:id="@+id/imageView"
            android:contentDescription=""
            android:layout_marginRight="50dp"
            android:layout_marginEnd="50dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true" />
    </RelativeLayout>
</RelativeLayout>

我想要的是这4张ImageView位于中间。它们应该在左右之间粘在一起。并适合任何屏幕尺寸。

5 个答案:

答案 0 :(得分:4)

为什么选择RelativeLayout?具有重心的LinearLayout会很好。 特别是如果您希望图像具有相同的大小,则可以使用LinearLayout的权重属性。

答案 1 :(得分:4)

将它们放在LinearLayout中,而不是设置为水平:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@android:color/darker_gray"
    android:gravity="center"
    android:orientation="horizontal"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/nine"
        android:id="@+id/imageView2"
        />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/nine"
        android:id="@+id/imageView6"
         />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/nine"
        android:id="@+id/imageView5"
        />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/zero"
        android:id="@+id/imageView"
        android:contentDescription=""
         />
</LinearLayout>

答案 2 :(得分:2)

您可以在LinearLayout内使用4个ImageView,水平重力位于RelativeLayout内。 试着用这个:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/darker_gray"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@android:color/darker_gray">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

答案 3 :(得分:1)

使用linearLayout和weightSum属性,而不是四个图像的相对布局。以下是样本:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@android:color/darker_gray"
        android:layout_centerInParent="false"
        android:layout_alignWithParentIfMissing="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:orientation="horizontal"
        android:weightSum="1">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/nine"
            android:id="@+id/imageView2"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@+id/imageView"
            android:layout_toStartOf="@+id/imageView"
            android:layout_weight="0.25"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/nine"
            android:id="@+id/imageView6"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@+id/imageView2"
            android:layout_toStartOf="@+id/imageView2"
            android:layout_weight="0.25"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/nine"
            android:id="@+id/imageView5"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@+id/imageView6"
            android:layout_toStartOf="@+id/imageView6"
            android:layout_weight="0.25"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/zero"
            android:id="@+id/imageView"
            android:contentDescription=""
            android:layout_marginRight="50dp"
            android:layout_marginEnd="50dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:layout_weight="0.25"/>
    </LinearLayout>

答案 4 :(得分:1)

试试这个:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                xmlns:tools="http://schemas.android.com/tools"
                android:id="@+id/activity"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:paddingBottom="@dimen/activity_vertical_margin"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                android:background="@android:color/darker_gray">



    <LinearLayout
        android:id="@+id/buttonStart"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:orientation="horizontal"
        android:background="@android:color/darker_gray"
        android:layout_centerInParent="false"
        android:layout_alignWithParentIfMissing="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <ImageView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:id="@+id/imageView2"
            app:srcCompat="@drawable/nine"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@+id/imageView"
            android:layout_toStartOf="@+id/imageView" />

        <ImageView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:id="@+id/imageView6"
            android:layout_alignParentTop="true"
            app:srcCompat="@drawable/nine"
            android:layout_toLeftOf="@+id/imageView2"
            android:layout_toStartOf="@+id/imageView2" />

        <ImageView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:id="@+id/imageView5"
            app:srcCompat="@drawable/nine"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@+id/imageView6"
            android:layout_toStartOf="@+id/imageView6" />

        <ImageView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:id="@+id/imageView"
            android:contentDescription=""
            app:srcCompat="@drawable/nine"
            android:layout_marginRight="50dp"
            android:layout_marginEnd="50dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true" />
    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textViewSomething"
        android:textSize="30sp"
        android:textStyle="normal|bold"
        android:layout_above="@+id/buttonStart"
        android:text="@string/_00"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="22dp" />

</RelativeLayout>