如何实现这个xml？答案

【问题标题】：How to achieve this xml?如何实现这个xml？
【发布时间】：2017-01-09 08:49:04
【问题描述】：

我想像下图那样实现

我试过了，但这不是我想要的结果。

下面是我的xml

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

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

        <ImageView
            android:id="@+id/photo"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:scaleType="centerCrop"
            android:layout_gravity="center"/>

    </LinearLayout>

    <TextView
        android:id="@+id/ListDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/input_register"
        android:text="Date"
        android:layout_marginLeft="150dp"
        android:layout_alignTop="@+id/thumbnail"
        android:layout_toRightOf="@+id/thumbnail" />

    <TextView
        android:id="@+id/ListDescription"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:textSize="20sp"
        android:text="Description"
        android:ellipsize="end"
        android:textStyle="bold"
        android:layout_below="@id/ListDate"
        android:layout_toRightOf="@+id/thumbnail" />

    <TextView
        android:id="@+id/ListAmount"
        android:text="Amount"
        android:layout_marginTop="40dp"
        android:layout_marginLeft="166dp"
        android:textSize="20sp"
        android:layout_width="fill_parent"
        android:layout_height="30dp"
        android:layout_toRightOf="@+id/thumbnail"
        android:textColor="@color/violetred" />

</RelativeLayout>

如何在 Amount TextView 旁边写下...，就像我发布的第一张图片一样？非常感谢任何帮助。

【问题讨论】：

我会为此使用约束布局。最好的方式。
创建一个水平线性布局并使用权重将其分成三部分，然后进行相应的操作
一个RelativeLayout就绰绰有余了。无需嵌套无用的 LinearLayout（嵌套布局不利于性能）。
检查下面的答案不要对宽度和高度使用任何硬编码值，它适用于一个屏幕而不适用于所有尺寸。

标签： android xml listview

【解决方案1】：

你只能有一个布局来解决你的问题嵌套不是一个好主意。

    <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher"/>
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
          android:gravity="center_horizontal"
           android:textColor="#000"
           android:layout_gravity="center"
           android:textSize="?android:actionBarItemBackground"
           android:textStyle="bold"
           android:text="8 hours @ $80.00/hour"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:text="2014-05-08"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/activity_horizontal_margin"
            android:textStyle="bold"
            android:layout_gravity="end"
            android:textColor="#000"
            android:textSize="?android:actionBarItemBackground"
            android:text="$640.00"/>
</FrameLayout>

【讨论】：

【解决方案2】：

您可以使用此 xml 实现您的要求

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#d8d8d8" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="85dp"
    android:layout_height="85dp"
    android:background="#c8c8c8"
    android:src="@drawable/ic_launcher" >
</ImageView>

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toRightOf="@+id/imageView1"
    android:text="TextView"
    android:textColor="#000000" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_marginRight="6dp"
    android:layout_marginTop="20dp"
    android:padding="2dp"
    android:text="2014-05-08"
    android:textColor="#000000" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/textView2"
    android:layout_marginRight="6dp"
    android:layout_marginTop="20dp"
    android:padding="2dp"
    android:text="$600"
    android:textColor="#000000"
    android:textStyle="bold" />

</RelativeLayout>

【讨论】：

【解决方案3】：

希望这对你有所帮助。你想要实现的精确 xml。

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

   <ImageView
       android:id="@+id/photo"
       android:layout_width="70dp"
       android:layout_height="70dp"
       android:layout_margin="5dp"
       android:padding="3dp"
       android:scaleType="centerCrop"
       android:layout_gravity="center"/>

   <TextView
       android:id="@+id/ListDescription"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:layout_toLeftOf="@+id/right_container"
       android:singleLine="true"
       android:textSize="20sp"
       android:text="Description"
       android:ellipsize="end"
       android:textStyle="bold"
       android:layout_centerVertical="true"
       android:layout_toRightOf="@+id/photo" />

    <LinearLayout
       android:id="@+id/right_container"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentRight="true"
       android:layout_centerVertical="true"
       android:orientation="vertical">

        <TextView
           android:id="@+id/ListDate"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center"
           android:textColor="@color/input_register"
           android:text="12-11-2017"
           android:layout_marginRight="10dp"/>

       <TextView
           android:id="@+id/ListAmount"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="777$"
           android:layout_gravity="center"
           android:layout_marginTop="5dp"
           android:textSize="20sp"
           android:textColor="@color/violetred" />

</LinearLayout>

【讨论】：

嵌套布局不利于性能。您可以使用一个 RelativeLayout 完成所有操作。
@Rotwang 我想要@+id/ListDate 和@+id/ListAmount 父级的中心垂直。这就是我嵌套布局的原因。没有嵌套布局有什么不同的方法来实现这一点吗？
是的，有。您可以使用具有 0dp 宽度和高度的假视图并将元素放置在其周围。
@Rotwang 谢谢！！好主意
@AI。使用 google 查找教程。我确信 w3schools 有相当不错的 XML 教程。

【解决方案4】：

使用约束布局以获得最佳性能。如果不是，请使用水平线性布局，权重在中心 1。

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

    <ImageView
        android:id="@+id/photo"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:background="@color/black"
        android:scaleType="centerCrop" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_weight="1"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:lines="1"
        android:text="Buy drinks fvbfvfvfvasdasdasdfvfvvfvf" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:text="1014-05-08" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:text="$6969"
            android:textSize="18sp" />
    </LinearLayout>

</LinearLayout>

【讨论】：

嵌套布局不利于性能。您可以使用一个 RelativeLayout 完成所有操作。
@Rotwang 我提到为了获得最佳性能，请使用约束布局。
从未听说过约束布局。可以用来拖拽吗？
@AI。是的，不需要 XML 编辑。只需拖放，并从设计器中更改一些值。
谢谢。稍后再试:)

【解决方案5】：

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

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_weight="1.5"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="ASASJHGHHBHHJHJNKMKIKMKMKMKMKKNIKNIJ" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="2016-01-11" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="$640"
            android:textStyle="bold" />

    </LinearLayout>


</LinearLayout>

【讨论】：

嵌套布局不利于性能。您可以使用一个 RelativeLayout 完成所有操作。
感谢您的评论。您能告诉我它会产生什么问题吗？所以，我可以考虑替代解决方案。@Rotwang

【解决方案6】：

试试这个

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

    <LinearLayout android:id="@+id/thumbnail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dp"
        android:weightSum=".20"
        android:layout_alignParentLeft="true"
        android:layout_marginRight="5dip">

        <ImageView
            android:id="@+id/photo"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:scaleType="centerCrop"
            android:layout_gravity="center"/>

    </LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum=".80"
    android:layout_alignRight="@+id/thumbnail"
    android:layout_alignParentRight="true"
    android:orientation="vertical">
    <TextView
        android:id="@+id/ListDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:layout_marginRight="10dp"
        android:textColor="@color/input_register"
        android:text="Date"

         />

    <TextView
        android:id="@+id/ListDescription"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:layout_marginRight="10dp"
        android:textSize="20sp"
        android:text="DescriptionDescriptionDescriptionDescription"
        android:ellipsize="end"
        android:textStyle="bold"
         />

    <TextView
        android:id="@+id/ListAmount"
        android:text="Amount"
        android:textSize="20sp"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_gravity="end"
        android:layout_marginRight="10dp"
        android:layout_toRightOf="@+id/thumbnail"
        android:textColor="@color/violetred" />
</LinearLayout>
</LinearLayout>

【讨论】：

谢谢，但我想在金额旁边加...
嵌套布局不利于性能。您可以使用一个 RelativeLayout 完成所有操作。