Question

我想去下面的设计芯片布局。

当Text足够短以适合我想要查看的布局时。

当文字太长而无法放入时我希望它显示如下并水平制作文本。

是否可以设计满足需求的布局。

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

解决方案一

<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" -->

/>

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

2 个答案: