android - 如何为长文本设计 Chips 布局

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>

这个问题是当文本很短时，删除按钮不会紧跟在文本之后。我无法通过从 TextView 容器和删除 ImageView 容器中删除重量来实现这一点，但随后我在解决方案一中遇到了同样的问题。

请给出解决方案来处理这个问题。

Answer 1

您需要制作自定义 View 。这样您就可以测量文本并调整大小以适合。