通过使用相对和线性文本和可点击图像设计Android中的UI

Question

我尝试设计UI，如下图所示。在这里，我想设计两个textViews和三个imageViews，如下所示。

我试过这个但是在动态地将数据传递给textViews后它显示错误（覆盖另一个文本上的一个文本）

这是我的代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="90dip"
    android:orientation="horizontal"
    android:padding="5dip" >

    <!-- ListRow Left side navigation_image image -->

    <LinearLayout
        android:id="@+id/navigation_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginRight="5dip"
        android:padding="3dip" >

        <ImageView
            android:id="@+id/navigation_marker_image_view"
            android:layout_width="30dip"
            android:layout_height="30dip"
            android:contentDescription="@string/navigation_image"
            android:clickable="true"
            android:focusable="false"
            android:src="@drawable/navigation_marker" />
    </LinearLayout>

    <TextView
        android:id="@+id/address_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/share_image_view"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/date_time_text_view"
        android:layout_toRightOf="@+id/navigation_image"
        android:textSize="12sp" />

    <TextView
        android:id="@+id/date_time_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/address_text_view"
        android:layout_alignParentRight="true"
        android:textStyle="bold"
        android:typeface="sans" />

    <ImageView
        android:id="@+id/share_image_view"
        android:layout_width="25dip"
        android:layout_height="25dip"
        android:layout_alignTop="@+id/favourite_image_view"
        android:layout_marginLeft="50dp"
        android:layout_toRightOf="@+id/favourite_image_view"
        android:contentDescription="@string/share_image"
        android:clickable="true"
        android:focusable="false"
        android:src="@drawable/share" />

    <ImageView
        android:id="@+id/edit_image_view"
        android:layout_width="25dip"
        android:layout_height="25dip"
        android:layout_alignLeft="@+id/address_text_view"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="29dp"
        android:contentDescription="@string/edit_buttonon_image"
        android:clickable="true"
        android:focusable="false"
        android:src="@drawable/edit" />

    <ImageView
        android:id="@+id/favourite_image_view"
        android:layout_width="25dip"
        android:layout_height="25dip"
        android:layout_alignTop="@+id/edit_image_view"
        android:layout_marginLeft="48dp"
        android:layout_toRightOf="@+id/edit_image_view"
        android:contentDescription="@string/favarouite_image"
        android:clickable="true"
        android:focusable="false"
        android:src="@drawable/favourite" />

</RelativeLayout>

如何获得如上所示的正确设计，这应该正常工作。 提前谢谢..

Answer 1

此UI是正确的，但您必须修复textviews大小以避免文本重叠：

<TextView
    android:id="@+id/address_text_view"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_above="@+id/share_image_view"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/date_time_text_view"
    android:layout_toRightOf="@+id/navigation_image"
    android:textSize="12sp" />

<TextView
    android:id="@+id/date_time_text_view"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_alignLeft="@+id/address_text_view"
    android:layout_alignParentRight="true"
    android:textStyle="bold"
    android:typeface="sans" />

Answer 2

我认为TextView问题是由90dip高度引起的，RelativeLayout试图将所有内容放在那里，但没有足够的空间并最终覆盖视图。

将其更改为wrap_content应修复它。除非你完全知道固定的足够大，否则不要使用。

当然，以上操作会导致ImageView被推到底部，因此请从edit_image_view

中删除

android:layout_alignParentBottom="true"

并将其添加到edit_image_view

android:layout_below="@+id/address_text_view"

但是你需要从address_text_view删除它以避免循环依赖

android:layout_above="@+id/share_image_view"

为了清晰起见而编辑

您的相对布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="90dip"   <-- change to wrap_content
    android:orientation="horizontal"
    android:padding="5dip" >

<!-- ListRow Left side navigation_image image -->

<LinearLayout
    android:id="@+id/navigation_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_marginRight="5dip"
    android:padding="3dip" >

    <ImageView
        android:id="@+id/navigation_marker_image_view"
        android:layout_width="30dip"
        android:layout_height="30dip"
        android:contentDescription="@string/navigation_image"
        android:clickable="true"
        android:focusable="false"
        android:src="@drawable/navigation_marker" />
</LinearLayout>

<TextView
    android:id="@+id/address_text_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/share_image_view" <-- remove this
    android:layout_alignParentRight="true"
    android:layout_below="@+id/date_time_text_view"
    android:layout_toRightOf="@+id/navigation_image"
    android:textSize="12sp" />

<TextView
    android:id="@+id/date_time_text_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/address_text_view"
    android:layout_alignParentRight="true"
    android:textStyle="bold"
    android:typeface="sans" />

<ImageView
    android:id="@+id/share_image_view"
    android:layout_width="25dip"
    android:layout_height="25dip"
    android:layout_alignTop="@+id/favourite_image_view"
    android:layout_marginLeft="50dp"
    android:layout_toRightOf="@+id/favourite_image_view"
    android:contentDescription="@string/share_image"
    android:clickable="true"
    android:focusable="false"
    android:src="@drawable/share" />

<ImageView
    android:id="@+id/edit_image_view"
    android:layout_width="25dip"
    android:layout_height="25dip"
    android:layout_alignLeft="@+id/address_text_view"
    android:layout_alignParentBottom="true" <-- remove this
    android:layout_below="@+id/address_text_view"  <-- add this
    android:layout_marginLeft="29dp"
    android:contentDescription="@string/edit_buttonon_image"
    android:clickable="true"
    android:focusable="false"
    android:src="@drawable/edit" />

<ImageView
    android:id="@+id/favourite_image_view"
    android:layout_width="25dip"
    android:layout_height="25dip"
    android:layout_alignTop="@+id/edit_image_view"
    android:layout_marginLeft="48dp"
    android:layout_toRightOf="@+id/edit_image_view"
    android:contentDescription="@string/favarouite_image"
    android:clickable="true"
    android:focusable="false"
    android:src="@drawable/favourite" />

</RelativeLayout>