如何在 Android 中实现这种特定设计（扩展/加权子视图）？答案

【问题标题】：How do I achieve this specific design (expanding / weighted sub-view) in Android?如何在 Android 中实现这种特定设计（扩展/加权子视图）？
【发布时间】：2015-12-03 06:15:12
【问题描述】：

这就是我想要实现的目标：

但是，我不知道如何让左侧视图至少增长到最小高度，但也可以作为右侧视图。这是我将高度设置为“match_parent”和“minHeight”时得到的结果：

正如您在第一个项目中看到的那样，图像视图被裁剪。当我使用“wrap_content”时，所有内容都从左右视图中显示，但我无法获得我想要的设计（图表放在底部，图像之间有空白）：

我错过了什么？这是用于列表项的 XML 布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <LinearLayout
        android:id="@+id/list_item_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="4dp">

        <LinearLayout
            android:id="@+id/list_item_left_layout"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:minHeight="98dp"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/avatar"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/avatar"/>

            <LinearLayout
                android:id="@+id/list_item_overlay_layout"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="bottom"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/chart"
                    android:layout_width="40dp"
                    android:layout_height="58dp"
                    android:src="@drawable/chart"/>

            </LinearLayout>

        </LinearLayout>

        <TextView
            android:id="@+id/item_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:maxLines="8"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"/>

    </LinearLayout>

</LinearLayout>

【问题讨论】：

为了在LinearLayout 中添加“空白空间”，我建议添加一个简单的“空白”View-object 以及所需的间距属性。否则，您可以尝试使用新的 PercentRelativeLayout（如果您想具有特定宽度）或 RelativeLayout 来提高性能并避免嵌套布局。
看看这个：stackoverflow.com/questions/29956014/…

标签： android android-layout

【解决方案1】：

您可以使用以下代码进行设计。

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

<RelativeLayout
    android:id="@+id/list_item_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"

    android:orientation="horizontal"
    android:padding="4dp">

    <RelativeLayout

        android:id="@+id/relativeLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@+id/list_item_left_layout"
        android:layout_toRightOf="@+id/list_item_left_layout"
        android:minHeight="98dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/item_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:maxLines="8"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:text="111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"
            android:textColor="@android:color/darker_gray" />


    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/list_item_left_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_alignBottom="@+id/relativeLayout"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/avatar"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_alignParentTop="true"
            android:src="@drawable/avatar" />


        <ImageView
            android:id="@+id/chart"
            android:layout_width="40dp"
            android:layout_height="58dp"
            android:layout_alignParentBottom="true"
            android:src="@drawable/common_signin_btn_icon_pressed_dark" />

    </RelativeLayout>


</RelativeLayout>


</LinearLayout>

【讨论】：

不幸的是，这也不起作用。左侧布局没有扩展到完整的可用空间（我为两个图像视图使用相同的图像和黄色背景以获得更多可见性）：tinypic.com/r/dfca3m/9
不过，感谢您的提示。在我找到解决方案之前，在右侧视图上设置最小高度可能是解决方法。

【解决方案2】：

You can use Imageview.setTranslationX() or ImageView.setTranslationY() to move chart Imageview to new position.

Making a layout expandable is explained in this article from the blog. here[enter link description here][1]


  [1]: http://gmariotti.blogspot.in/2013/09/expand-and-collapse-animation.html

Hope it helps ..

【讨论】：

谢谢，但我不是在寻找代码解决方案。对于纯 XML，它必须足够简单。

【解决方案3】：

感谢 Mayur 的回答，我找到了一个窍门。这不是解决方案，但我可以将其用作解决方法，直到找到正确的方法。

计算左视图的最小高度，并设置 minHeight 对它的正确看法。因此，如果文本中的右手边是如此之小，它仍然会使用最少量的高度。
将左侧布局的高度设置为match_parent。现在这个如果正确的视图，视图将扩展以填充所有可用空间为更大的文本提供空间。

这就是它的样子：

这是我必须进行的代码更改：

$ diff -U 5 list_item_layout_original.xml list_item_layout.xml 
--- list_item_layout_original.xml   2015-12-03 09:13:35.000000000 +1100
+++ list_item_layout.xml    2015-12-03 09:11:42.000000000 +1100
@@ -45,10 +45,11 @@
         <TextView
             android:id="@+id/item_text"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
+            android:minHeight="98dp"
             android:maxLines="8"
             android:paddingLeft="8dp"
             android:paddingRight="8dp"/>

     </LinearLayout>

【讨论】：