阻止内容溢出和自动调整大小以扩展文本

Question

抱歉，帖子太长了，但不长。但只是因为图片看起来很长。

我想做如下布局：

所以我为它写了一个布局如下

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    android:padding="5dp">

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

                <ImageView
                    android:layout_height="match_parent"
                    android:layout_width="70dp"
                    android:src="@drawable/ic_launcher_background"
                    android:id="@+id/stock_item_image_small"/>

                <!-- Arrow at the end of the fragment item -->
                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="match_parent"
                    android:src="@drawable/ic_chevron_right_black_18dp"/>

            </LinearLayout>

</FrameLayout>

这是可见的，如下所示

然后我用下面的代码添加了一个长字符串

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    android:padding="5dp">

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

                <ImageView
                    android:layout_height="match_parent"
                    android:layout_width="70dp"
                    android:src="@drawable/ic_launcher_background"
                    android:id="@+id/stock_item_image_small"/>

                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:textColor="@android:color/black"
                    android:text="A line to string which is long enough to overflow our of container"/>

                <!-- Arrow at the end of the fragment item -->
                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="match_parent"
                    android:src="@drawable/ic_chevron_right_black_18dp"/>

            </LinearLayout>

</FrameLayout>

现在看起来像下面这样。

如您所见，在添加TextView 之前可见的末尾箭头现在已溢出视图并且不可见。

我基本上想知道如何才能一个接一个地添加组件并且它们不会流出视图 我该如何解决这个问题？

另外，有人可以为布局或从 Android 布局设计开始推荐一个好的材料吗？

---

更新：

结合Ichvandi Octa的建议，编写如下代码：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:padding="5dp">

    <!-- Added to create border around frame -->
    <!-- Achieved using corner radius and padding -->
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cardCornerRadius="10dp"
        app:contentPadding="1dp"
        android:backgroundTint="@android:color/black"
        app:cardElevation="20dp">

        <androidx.cardview.widget.CardView
            android:layout_margin="0dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:cardCornerRadius="10dp">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <ImageView
                    android:id="@+id/fragment_stock_item_image"
                    android:layout_width="70dp"
                    android:layout_height="match_parent"
                    android:src="@drawable/ic_launcher_background"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@id/fragment_stock_item_name"/>

                <TextView
                    android:id="@+id/fragment_stock_item_name"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:textColor="@android:color/black"
                    android:text="A line to string which is long enough to overflow our of container and it has lot of text"
                    app:layout_constraintStart_toEndOf="@id/fragment_stock_item_image"
                    app:layout_constraintTop_toTopOf="@id/fragment_stock_item_image"
                    app:layout_constraintBottom_toBottomOf="@id/fragment_stock_item_image"
                    app:layout_constraintEnd_toStartOf="@id/_fragment_stock_frame_line_sep"/>

                <androidx.cardview.widget.CardView
                    android:layout_width="10dp"
                    android:layout_height="match_parent"
                    android:id="@+id/_fragment_stock_frame_line_sep"
                    app:layout_constraintStart_toEndOf="@id/fragment_stock_item_name"
                    app:layout_constraintTop_toTopOf="@id/fragment_stock_item_name"
                    app:layout_constraintBottom_toBottomOf="@id/fragment_stock_item_name"
                    app:layout_constraintEnd_toStartOf="@id/fragment_stock_item_qty">
                    <androidx.cardview.widget.CardView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:backgroundTint="@android:color/darker_gray"
                        android:layout_marginLeft="4.5dp"
                        android:layout_marginRight="4.5dp"
                        android:layout_marginTop="10dp"
                        android:layout_marginBottom="10dp"/>
                </androidx.cardview.widget.CardView>

                <TextView
                    android:id="@+id/fragment_stock_item_qty"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:text="200"
                    app:layout_constraintEnd_toStartOf="@id/_fragment_stock_item_arrow"
                    app:layout_constraintStart_toEndOf="@id/_fragment_stock_frame_line_sep"
                    app:layout_constraintTop_toTopOf="@id/_fragment_stock_frame_line_sep"
                    app:layout_constraintBottom_toBottomOf="@id/_fragment_stock_frame_line_sep"/>

                <ImageView
                    android:layout_width="30dp"
                    android:layout_height="match_parent"
                    android:id="@+id/_fragment_stock_item_arrow"
                    android:src="@drawable/ic_chevron_right_black_18dp"
                    app:layout_constraintStart_toEndOf="@id/fragment_stock_item_qty"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"/>

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.cardview.widget.CardView>

    </androidx.cardview.widget.CardView>
</FrameLayout>

但是现在，我这个数字“200”占用了太多空间。

Answer 1

试试这个

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:padding="5dp">


    <ImageView
        android:id="@+id/imageView25"
        android:layout_width="70dp"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

    <TextView
        android:id="@+id/textView66"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintBottom_toBottomOf="@+id/imageView25"
        app:layout_constraintEnd_toStartOf="@+id/imageView26"
        app:layout_constraintStart_toEndOf="@+id/imageView25"
        app:layout_constraintTop_toTopOf="@+id/imageView25"
        tools:text="@tools:sample/lorem/random" />

    <ImageView
        android:id="@+id/imageView26"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_arrow_right_black" />
</androidx.constraintlayout.widget.ConstraintLayout>

应该是这样的

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:padding="5dp">


    <ImageView
        android:id="@+id/imageView25"
        android:layout_width="70dp"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

    <TextView
        android:id="@+id/textView66"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintBottom_toBottomOf="@+id/imageView25"
        app:layout_constraintEnd_toStartOf="@+id/view4"
        app:layout_constraintStart_toEndOf="@+id/imageView25"
        app:layout_constraintTop_toTopOf="@+id/imageView25"
        tools:text="@tools:sample/lorem/random" />

    <ImageView
        android:id="@+id/imageView26"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_arrow_right_black" />

    <View
        android:id="@+id/view4"
        android:layout_width="1dp"
        android:layout_height="0dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="8dp"
        android:background="@android:color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/textView67"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView67"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="2"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintBottom_toBottomOf="@+id/imageView26"
        app:layout_constraintEnd_toStartOf="@+id/imageView26"
        app:layout_constraintTop_toTopOf="@+id/imageView26" />
</androidx.constraintlayout.widget.ConstraintLayout>

现在应该是这样的