如何使用屏幕限制调整文本视图?

Posted

技术标签:

【中文标题】如何使用屏幕限制调整文本视图?【英文标题】:how to adjust textview with screen limits? 【发布时间】:2020-11-30 05:33:52 【问题描述】:

我有一个卡片视图,我在其中显示成分列表,但我面临的问题是有时成分名称变得太长,以至于它会将文本视图和旁边的按钮踢出屏幕。即使成分名称变长,如何调整屏幕内的整个卡片视图?

那是我的 ingredients_list.xml 的代码:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_
    app:cardCornerRadius="12dp"
    app:cardElevation="5dp"
    android:backgroundTint="#333333"
    android:layout_margin="10dp">

    <LinearLayout
        android:layout_
        android:layout_
        android:background="#333333"
        android:layout_margin="4dp"
        android:padding="5dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/ith_ingredient_inventory"
            android:layout_
            android:layout_
            android:text="ingredient i"
            android:gravity="center"
            android:textColor="@color/colorAccent"
            android:textSize="20dp"
            android:textStyle="bold"
            android:padding="10dp"
            />
        <TextView
            android:id="@+id/ith_ingredient_quantity_inventory"
            android:layout_
            android:layout_
            android:background="@drawable/round_corners"
            android:backgroundTint="@color/colorAccent"
            android:text="100"
            android:textSize="20dp"
            android:textAlignment="center"
            android:textColor="@android:color/black"
            android:textStyle="bold"
            android:padding="5dp"
            android:layout_margin="5dp">

        </TextView>
        <TextView
            android:id="@+id/ith_ingredient_quantity_unit_inventory"
            android:layout_
            android:layout_
            android:text="unit"
            android:textColor="@color/colorAccent"
            android:textSize="16dp"
            android:padding="10dp"
            />
        <Button
            android:id="@+id/add_quantity_inventory"
            android:layout_
            android:layout_
            android:background="@drawable/plus"
            android:foreground="?attr/selectableItemBackgroundBorderless"
            android:padding="10dp"
            android:layout_marginLeft="10dp">
        </Button>
    </LinearLayout>
 </androidx.cardview.widget.CardView>

【问题讨论】:

不要为您的 CardView 使用固定高度,而是将其设置为 wrap_content @IvanWooll 是的,好吧!谢谢 【参考方案1】:

我将您的 LinearLayout 更改为 ConstraintLayout 并进行了一些其他更改:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_
    android:layout_margin="10dp"
    android:backgroundTint="#333333"
    app:cardCornerRadius="12dp"
    app:cardElevation="5dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_
        android:layout_
        android:layout_margin="4dp"
        android:background="#333333"
        android:padding="5dp">

        <TextView
            android:id="@+id/ith_ingredient_inventory"
            android:layout_
            android:layout_
            android:ellipsize="end"
            android:gravity="center"
            android:maxLines="1"
            android:text="ingredient i ingredient i ingredient i ingredient i ingredient i"
            android:textColor="@color/colorAccent"
            android:textSize="20dp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/ith_ingredient_quantity_inventory"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/ith_ingredient_quantity_inventory"
            android:layout_
            android:layout_
            android:layout_margin="5dp"
            android:backgroundTint="@color/colorAccent"
            android:text="100"
            android:textAlignment="center"
            android:textColor="@android:color/black"
            android:textSize="20dp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/ith_ingredient_quantity_unit_inventory"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/ith_ingredient_quantity_unit_inventory"
            android:layout_
            android:layout_
            android:text="unit"
            android:textColor="@color/colorAccent"
            android:textSize="16dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/add_quantity_inventory"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/add_quantity_inventory"
            android:layout_
            android:layout_
            android:layout_margin="10dp"
            android:foreground="?attr/selectableItemBackgroundBorderless"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"></Button>
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

结果如下:

因此,您可以将 ConstraintLayout 与我的属性一起使用,并且您希望不覆盖其他视图的 TextView 必须具有 maxLine 值和 ellipsize 以在最后显示三个点,当它很长时。

【讨论】:

以上是关于如何使用屏幕限制调整文本视图?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用不同屏幕的约束来调整视图的高度和宽度?

如何调整textview的大小以不超出屏幕

如何使用自动布局约束在单个屏幕中放置两个视图

如何限制从顶部定位我的标签,但在隐藏导航栏时不让它移动(因为它会调整视图高度)?

如何使用 Xcode 8 上的自动布局调整对象的大小以适应不同的屏幕尺寸?

在拆分视图中,当应用程序以横向模式启动时如何将视图调整到屏幕