Question

我想在我的应用中处理以下布局：

enter image description here

正如您所看到的那样，允许文本尽可能宽，而不会将屏幕右侧的其他视图从屏幕上移开，根据需要进行椭圆化处理。永远不会有超过3个颜色样本，并且不会少于1个，并且所有样本和圆圈中的x必须始终可见。 当文字很短时，它应该表现为最后两行（蕨类植物）。

我试图将文字和图片放在LinearLayout中，但是当文字太长时，图片就不可见（或者不完全可见）。我假设有某种方式表明图像应该总是占用他们需要的空间，TextView占用剩余部分或尽可能多地占用，但我不能似乎弄清楚如何。我不知道RelativeLayout是否可以更好地为此工作，或者可能是TableLayout / TableRow或GridLayout，但我似乎没有读过任何内容涵盖这种情况。

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

<TextView
    android:id="@+id/plant_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:maxLines="1"
    android:singleLine="true"
    android:ellipsize="end"
    android:layout_marginRight="3dp"/>

<LinearLayout
    android:id="@+id/color_0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="2dp"
    android:layout_marginRight="2dp">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/btn_remove_plant"
        android:visibility="invisible"/>
</LinearLayout>

<LinearLayout
    android:id="@+id/color_1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="2dp"
    android:layout_marginRight="2dp"
    android:visibility="gone">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/btn_remove_plant"
        android:visibility="invisible"/>
</LinearLayout>

<LinearLayout
    android:id="@+id/color_2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="2dp"
    android:layout_marginRight="2dp"
    android:visibility="gone">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/btn_remove_plant"
        android:visibility="invisible"/>
</LinearLayout>

<ImageView
    android:id="@+id/remove_plant"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/btn_remove_plant"
    android:layout_marginLeft="3dp"/>

</LinearLayout>

Answer 1

这是一个工作布局。发生了两件事。其一，行LinearLayout与layout_width="wrap_content"一起使用。这使得LinearLayout不会扩展到其内容之外，从而使所有内容保持一致（您的底部两个示例）。第二，TextView使用android:layout_weight="1"和android:layout_width="0dp"告诉LinearLayout它应该扩展此TextView以填充剩余的可用空间，但是不推出其他观点（前三个例子）。注意：并非所有layout_weight都这样做，只是这就是它在此上下文中所做的事情。

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

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

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ellipsize="end"
            android:lines="1"
            android:text="This is a long line of text and is testing something. This is a long line of text and is testing something. This is a long line of text and is testing something." />

        <View
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_marginLeft="4dp"
            android:layout_marginRight="4dp"
            android:background="#F00" />

        <View
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_marginLeft="4dp"
            android:layout_marginRight="4dp"
            android:background="#0F0" />

        <View
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_marginLeft="4dp"
            android:layout_marginRight="4dp"
            android:background="#00F" />

        <Button
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_marginLeft="4dp"
            android:layout_marginRight="4dp" />
    </LinearLayout>

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

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ellipsize="end"
            android:lines="1"
            android:text="This is a long line of text and is testing something. This is a long line of text and is testing something. This is a long line of text and is testing something." />

        <View
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_marginLeft="4dp"
            android:layout_marginRight="4dp"
            android:background="#F00" />

        <View
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_marginLeft="4dp"
            android:layout_marginRight="4dp"
            android:background="#0F0" />

        <Button
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_marginLeft="4dp"
            android:layout_marginRight="4dp" />
    </LinearLayout>


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

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ellipsize="end"
            android:lines="1"
            android:text="This is some line of text." />

        <View
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_marginLeft="4dp"
            android:layout_marginRight="4dp"
            android:background="#F00" />

        <View
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_marginLeft="4dp"
            android:layout_marginRight="4dp"
            android:background="#00F" />

        <Button
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_marginLeft="4dp"
            android:layout_marginRight="4dp" />
    </LinearLayout>

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

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ellipsize="end"
            android:lines="1"
            android:text="This is short" />

        <View
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_marginLeft="4dp"
            android:layout_marginRight="4dp"
            android:background="#F00" />

        <Button
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_marginLeft="4dp"
            android:layout_marginRight="4dp" />
    </LinearLayout>

</LinearLayout>

Answer 2

此代码为您提供dp和像素的屏幕尺寸。将图像设置为您喜欢的固定大小，例如30dp或Math.min（screenWidth，screenHeight）/ 100，以相对于显示大小设置它。之后，因为你知道将显示多少个图像从tottal screenWidth子句（图像数量）* imageSize并将其设置为textview width

WindowManager wm2 = (WindowManager) con.getSystemService(Context.WINDOW_SERVICE);
Display display = wm2.getDefaultDisplay();
DisplayMetrics outMetrics = new DisplayMetrics ();   display.getMetrics(outMetrics);
float density  = getResources().getDisplayMetrics().density;
dpHeight  = (int) (outMetrics.heightPixels / density); 
dpWidth  = (int) (outMetrics.widthPixels / density);
screenWidth=outMetrics.widthPixels; 
screenHeight=outMetrics.heightPixels;

这是您以编程方式设置textview的宽度的方法

LinearLayout.LayoutParams params=(LinearLayout.LayoutParams)textView.getLayoutParams();
params.width=/calculated size/; 
textView.setLayoutParams(params);

Answer 3

当文字很短时，它应该表现为最后两行（蕨类植物）。

我认为标准布局不会给你你想要的东西。我的猜测是你必须创建一个实现你的要求的自定义ViewGroup。 Qberticus的实现可能与您使用开箱即用的布局一样接近。

话虽如此，我不能排除GridLayout能够以某种方式解决这个问题。

就个人而言，我会选择TableLayout，其中有四列用于颜色样本和X图标，第五列用于文本。您可以动态构造表行以使文本填充不会被样本使用的列，并且您将使用android:strechColums="0"为文本所在的最左侧列提供所有额外空间。与Qberticus的方法一样，这为您留下了正确的样本和图标，恕我直言是一个更好的用户界面。

如果您对正确的色板和图标的关注在文本和色板/图标之间留有空白，请使文本正确gravity（或end如果您支持RTL语言）。

使TextView尽可能宽，而不会挤出其他视图

3 个答案: