【问题标题】:ConstraintLayout and height greater than or equalConstraintLayout 和高度大于等于
【发布时间】:2019-12-12 16:49:56
【问题描述】:

我想要实现的目标很简单,但我无法输出它。

我想要一个简单的布局,带有固定宽度和高度的图标以及右侧的文本。轻松愉快。

我还想将文本相对于图标垂直居中。这也很容易。

当文本很短并且保持在一行中时,一切都是完美的。当文本较长时,问题就出现了。

使用此代码:

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

    <ImageView
        android:id="@+id/icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:scaleType="fitXY"
        android:src="@drawable/ic_icon"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. "
        app:layout_constraintHeight_min="48dp"
        app:layout_constraintLeft_toRightOf="@id/icon"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/icon" />
</androidx.constraintlayout.widget.ConstraintLayout>

根据需要显示一行文本,超过 48dp 时隐藏较长的文本

代码和我的知识有什么问题?

谢谢

【问题讨论】:

  • 您是否尝试过使用包装内容的高度
  • @ManojMohanty 是的,没有理想的结果
  • I also want to center the text vertically with respect to the icon. Also this is easy. 所以你的意思是你当前的实现正确地将文本相对于图标居中?
  • 我尝试过 textview 扩展,如果您将其高度设置为以 48dp 的最小高度包装内容,您是否有任何其他用于 ConstraintLayout 的父视图

标签: android android-layout android-constraintlayout


【解决方案1】:

试试下面的布局。

  • 在这里,我们通过以下方式使 TextView 的高度独立于 ImageView 将 textView android:layout_height 设置为 wrap_content
  • 这里 TextView 和 ImageView 都被放置在相对于父级的 central_vertical 中。

    <ImageView
        android:id="@+id/icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:scaleType="fitXY"
        android:src="@drawable/ic_icon"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
    
    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. "
        app:layout_constraintLeft_toRightOf="@id/icon"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
    

【讨论】:

  • 谢谢!这解决了我的问题,让我大开眼界
【解决方案2】:

检查一下:

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

        <ImageView
            android:id="@+id/icon"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:scaleType="fitXY"
            android:src="@drawable/ic_icon"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            />

        <TextView
            android:id="@+id/title"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. "

            app:layout_constraintHeight_min="48dp"
            app:layout_constraintLeft_toRightOf="@id/icon"
            app:layout_constraintRight_toRightOf="parent"

            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            />
    </androidx.constraintlayout.widget.ConstraintLayout>

顺便说一句,您可以使用TextViewandroid:drawableStart 属性

【讨论】:

  • 在 textview 中使用 drawable 肯定是一个值得考虑的选项。现在,由于数据绑定,我坚持我的想法。但是谢谢你,因为你的回答也给了我想要的结果
【解决方案3】:

您的代码的问题是ConstraintLayout 只会将layout_height="wrap_content" 应用于水平约束设置为parent 的项目。

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

试试这个代码,看看它是不是你想要的布局

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

    <ImageView
        android:id="@+id/icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:scaleType="fitXY"
        android:src="@drawable/ic_nav_settings"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:minHeight="48dp"
        android:text="The quick brown fox jumps over the lazy dog."
        app:layout_constraintLeft_toRightOf="@id/icon"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

【讨论】:

  • 我选择 Pavan 答案是因为有了它的解释,我理解了我的错误。但两者都是有效的答案,所以谢谢。
【解决方案4】:

这里我们将TextView 的高度设为match_parent,试试这个

<ImageView
    android:id="@+id/icon"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:scaleType="fitXY"
    android:src="@drawable/ic_user"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"/>

<TextView
    android:id="@+id/title"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:text="The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. "
    app:layout_constraintLeft_toRightOf="@+id/icon"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"/>

【讨论】:

    【解决方案5】:

    我认为这不是使用 TextView 的好方法。我建议像这样使用 TextView:

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:textSize="20sp"(所需的文本大小)

    app:layout_constrainedWidth="true"

    受约束的宽度告诉 textView 尊重其开始和结束约束。

    【讨论】:

    • 重要的是高度而不是宽度
    • 使用 constrainedHeight 。相同的行为。但正如你所说。当文本应该占用 2 行时,它不会。所以,你必须使用 constrainedWidth。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-10-15
    • 1970-01-01
    • 1970-01-01
    • 2014-11-11
    • 1970-01-01
    • 1970-01-01
    • 2012-08-23
    相关资源
    最近更新 更多