设备和图形布局之间的相对布局显示不同答案

【问题标题】：RelativeLayout displays differently between device and Graphical Layout设备和图形布局之间的相对布局显示不同
【发布时间】：2013-08-26 22:47:43
【问题描述】：

我想在文本的左侧有一个图像。我希望图像和文本都位于屏幕的水平中心。所以我创建了下面的布局。但是，虽然在 eclipse 图形布局上一切看起来都是正确的，但在真实设备上，图像一直出现在图像顶部，就好像我使用了 drawableTop 一样。

<RelativeLayout
    android:id="@+id/animal"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:layout_below="@id/the_bar"
    android:layout_centerHorizontal="true"
    android:background="#FFFFFF"
    android:clickable="true"
    android:onClick="onAnimalClicked" >

    <TextView
        android:id="@+id/animal_textview"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_centerHorizontal="true"
        android:drawableLeft="@drawable/animal_button"
        android:drawablePadding="5dp"
        android:gravity="center_vertical"
        android:text="Add to Animals"
        android:textColor="#258BE2"
        android:textStyle="bold" />
</RelativeLayout>

【问题讨论】：

请发布完整的布局文件。问题不在您发布的代码中。如果文件太长而无法发布，请使用 pastebin 并在此处提供链接。

标签： android android-layout android-relativelayout textview

【解决方案1】：

试试这个：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
    <RelativeLayout
        android:id="@+id/animal"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_below="@id/the_bar"
        android:layout_centerHorizontal="true"
        android:background="#FFFFFF"
        android:clickable="true"
        android:onClick="onAnimalClicked" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView"
            android:src="@drawable/_ic_launcher"/>

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/imageView"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Large Text"/>
    </RelativeLayout>
</LinearLayout>

【讨论】：

这就是你所追求的吗？

【解决方案2】：

如果您想在图像视图/另一个视图上重叠文本，则不能使用RelativeLayout。这是因为布局的本质是使视图排斥其他视图。如果一个视图在另一个视图之上，它会自动被推到默认位置并忽略写入的属性。

因此，解决方案是使用 FrameLayout

                 <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/iv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical|center_horizontal"
                    android:src="@drawable/bike" >
                </ImageView>


                    <TextView
                        android:id="@+id/tv1"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical|center_horizontal"
                        android:gravity="center" >
                    </TextView>
                </FrameLayout>

【讨论】：

If you want to overlap a text over an imageview/another view, you can't use RelativeLayout. This is because it is in the nature of the layout to make views repel other views. 请在此处阅读接受的答案：Overlapping Views in Android。 RelativeLayout's 的优点之一是它允许视图重叠。 FrameLayout 也是。

【解决方案3】：

试试这个：

    <TextView
        android:id="@+id/animal_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:drawableLeft="@drawable/animal_button"
        android:drawablePadding="5dp"
        android:gravity="center_vertical"
        android:text="Add to Animals"
        android:textColor="#258BE2"
        android:textStyle="bold" />

</RelativeLayout>

或者你可以插入 ImageView 而不是在左侧插入一个可绘制对象，它的右侧对齐到 TextView 的左侧。

【讨论】：