Question

我一直在尝试为RecyclerView项目创建一个布局，但是我很难到达那里。我会尽力解释我想要的东西以及到目前为止我所得到的东西。我的设计有一个Button，一个TextView，几个ImageView和一个带有一些ImageViews的LinearLayout。下图说明了这一点。

灰色元素具有固定的宽度和位置（左侧的按钮和右侧的ivs的LL）。
绿色和红色的ivs有固定的宽度，但应该位于蓝色电视的右侧，除非蓝色电视太大，并试图将它们推到灰色LL的右上方。在这种情况下，文本被缩短并在末尾添加省略号。
绿色和红色ivs可能会或可能不会显示（可见性=＆＃34;真＆＃34;或＆＃34;消失＆＃34;）。蓝色电视应该占据他们的空间，如果他们已经走了＆＃34; （如果有足够的文字内容可以这样做）。

我有点接近我想要的东西：蓝色电视和红色和绿色ivs在LinearLayout内部，具有gravity = left属性。蓝色电视有ellipsis = end属性。还有一件事仍然是错误的是蓝色电视必须具有maxwidth属性，因此它不会将绿色/红色ivs推到灰色的LinearLayout上方。因此，当红色或绿色的ivs已经消失时，由于蓝色电视的最大宽度限制了它，所以右侧（灰色LinearLayout之前）有一个空白区域。

有没有办法实现这个目标？如何消除maxwidth属性并仍然阻止textview内容将绿色和红色ivs向右推得太远并超出灰色LinearLayout？

我没有使用ConstraintLayout的任何经验（并且是Android开发的初学者）。有没有办法用它实现这个目标？

这是我到目前为止的代码。

<LinearLayout
    android:id="@+id/leiaute"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <Button
        android:id="@+id/quad_done_undone"
        android:layout_width="17.6dp"
        android:layout_height="16dp"
        android:layout_marginLeft="14dp"
        android:src="@drawable/circulo_unchecked"/>

    <LinearLayout
        android:id="@+id/itemClickableArea"
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:gravity="left|center_vertical"
        android:orientation="horizontal"
        android:background="?attr/selectableItemBackground">

        <TextView
            android:id="@+id/titulo"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:ellipsize="end"
            android:fontFamily="sans-serif"
            android:gravity="left|center_vertical"
            android:maxLines="1"
            android:maxWidth="210dp"
            android:text="Lorem Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
            android:textColor="@color/preto"
            android:textSize="13sp"
            android:visibility="visible"/>

        <ImageButton
            android:id="@+id/descricao"
            android:layout_width="16dp"
            android:layout_height="13.5dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="1dp"
            android:background="@drawable/description_icon"/>

        <ImageView
            android:id="@+id/play"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="4dp"
            android:layout_marginRight="4dp"
            android:src="@drawable/play"
            android:tint="@color/cinza3"
            android:visibility="visible"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="36dp"
        android:layout_height="wrap_content"
        android:layout_marginRight="6dp"
        android:gravity="center_vertical|center_horizontal"
        android:orientation="vertical">

        <TextView
            android:id="@+id/data_hora"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:fontFamily="sans-serif"
            android:gravity="center"
            android:maxLines="2"
            android:textColor="@color/textList"
            android:textSize="12sp"
            tools:text="31 mar\n9:42"/>


        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="3dp"
            android:gravity="center_horizontal|center_vertical"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/repeat"
                android:layout_width="10dp"
                android:layout_height="10dp"
                android:layout_marginRight="2dp"
                android:src="@drawable/repeat"
                android:tint="@color/iconesList"/>


            <ImageView
                android:id="@+id/locale"
                android:layout_width="10dp"
                android:layout_height="10dp"
                android:src="@drawable/locale"
                android:tint="@color/iconesList"/>

            <ImageView
                android:id="@+id/alarm"
                android:layout_width="10dp"
                android:layout_height="10dp"
                android:layout_marginLeft="2dp"
                android:src="@drawable/alarm"
                android:tint="@color/iconesList"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Answer 1

TableLayout和TableRow可以轻松处理您要执行的操作。有关示例布局，请参阅以下XML。布局的关键是将包含长文本的TextView设置为根据需要缩小android:shrinkColumns="1"并添加Space视图，该视图将增长以填充额外空间，以便{{当LinearLayout收缩时，右边的1}}不会向左移动。

此video显示了TextView更改内容和其他视图设置为TextView时的情况。

gone

Answer 2

在res

中添加此布局

<?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="horizontal">

<Button
    android:layout_width="wrap_content"
    android:layout_height="60dp"
    android:background="#757575"
    android:text="bt" />

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="60dp"
    android:layout_weight="1"
    android:gravity="left"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/content"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:singleLine="true"
        android:text="Lorem Ipsum is simple. Lorem Ipsum is simple. Lorem Ipsum is simple." />

    <ImageView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="#4CAF50" />

    <ImageView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="#F44336" />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="60dp"
    android:background="#757575"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Linear layout"
        android:textAlignment="center"
        android:textColor="#FFFFFF" />
</LinearLayout>

然后在您的代码中尝试此命令：

    TextView textView = (TextView) findViewById(R.id.content);
    int screenWidth = yourScreenWidth();
    int buttonWidth = buttonLeft.getWidth(); 
    int linearlayoutWidth = linearlayoutRight.getWidth();
    int greeenIvWidth = greenIv.getVisibility() == View.VISIBLE ? greenIv.getWidth() : 0;
    int redIvWidth = redIv.getVisibility() == View.VISIBLE ? redIv.getWidth() : 0;
    textView.setMaxWidth(screenWidth - buttonWidth - linearlayoutWidth - greeenIvWidth - redIvWidth);

我只计算TextView的maxWidth，因此它会与您的条件匹配

2绿色/红色ImageView位于TextView的右侧
TextView会占用所有空间。

Answer 3

这是一个嵌套LinearLayout的解决方案。我删除了代码中不必要的部分，使答案看起来更清晰。

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

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_weight="1">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            tools:ignore="UselessParent">

            <Button
                android:layout_width="40dp"
                android:layout_height="match_parent"
                android:background="#cdcdcd" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#2d94dd"
                android:ellipsize="end"
                android:lines="1"
                android:text="Stack Overflow" />

            <ImageButton
                android:layout_width="40dp"
                android:layout_height="match_parent"
                android:background="#00c627" />

            <ImageView
                android:layout_width="40dp"
                android:layout_height="match_parent"
                android:background="#bf0e0e" />

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:background="#cdcdcd" />

</LinearLayout>

如何在不使用＆＃39; maxwidth＆＃39;？

3 个答案: