如何为长文本设计芯片布局

Question

我想去设计芯片布局如下。

​

​

当文本足够短以适应布局时，我想这样查看。

​

​

当文本太长，无法适应，我希望它显示像这样和动画文本水平。

是否有可能设计一个既满足需求又满足需求的布局。

我已经尝试了解决方案，我已经提交，因为那些布局设计只满足一个条件。

解决方案一

<RelativeLayout
                    android:id="@+id/relative_store_name_container"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginEnd="10dp"
                    android:layout_weight="9"
                    android:visibility="visible">

                    <FrameLayout
                        android:id="@+id/relative_shop_name_container"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">

                        <TextView
                            android:id="@+id/relative_shop_name_text"
                            android:layout_width="wrap_content"
                            android:layout_height="21dp"
                            android:background="@drawable/selected_store_name_text_background"
                            android:gravity="center_vertical"
                            android:maxLines="1"
                            android:paddingStart="10dp"
                            android:ellipsize="marquee"
                            android:text="" />

                    </FrameLayout>

                    <FrameLayout
                        android:id="@+id/relative_layout_delete_button"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="10dp"
                        android:layout_toEndOf="@id/relative_shop_name_container">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="21dp"
                            android:background="@drawable/selected_store_name_delete_background"
                            android:paddingEnd="5dp"
                            android:paddingStart="10dp"
                            android:src="@drawable/store_name_chip_delete" />

                    </FrameLayout>

                </RelativeLayout>

这方面的问题是，当文本太长时，删除按钮消失。此布局适用于短文本。

​

​

解二

<LinearLayout
                    android:id="@+id/store_name_liner_container"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginEnd="10dp"
                    android:layout_weight="9"
                    android:orientation="horizontal"
                    android:visibility="visible"
                    >

                    <LinearLayout
                        android:id="@+id/liner_shop_name_container"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:layout_weight="9">

                        <TextView
                            android:id="@+id/liner_shop_name_text"
                            android:layout_width="wrap_content"
                            android:layout_height="21dp"
                            android:background="@drawable/selected_store_name_text_background"
                            android:gravity="center_vertical"
                            android:maxLines="1"
                            android:paddingStart="10dp"
                            android:text="short Text" />

                    </LinearLayout>

                    <FrameLayout
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="10dp"
                        android:layout_weight="1">

                        <ImageView
                            android:layout_width="wrap_content"
                            android:layout_height="21dp"
                            android:background="@drawable/selected_store_name_delete_background"
                            android:paddingEnd="5dp"
                            android:paddingStart="10dp"
                            android:src="@drawable/store_name_chip_delete"
                            />

                    </FrameLayout>

                </LinearLayout>

这方面的问题是，当文本是短的，删除按钮将不适合仅仅在文本之后。我不能通过从文本视图容器和删除图像视图容器中删除权重来实现这一点，但是我在解决方案中遇到了同样的问题。

​

请给出解决办法来处理这个问题。

Answer 1

您需要创建一个自定义视图。这样，您就可以测量文本和调整大小以适应。

Answer 2

只需将ellipsize="end"添加到芯片中即可。

​

Just add **ellipsize="end"** to your chip   

<com.google.android.material.chip.Chip 

    <-- android:ellipsize="end" -->

/>

​