ConstraintLayout 2 TextView первый размер эллипса

ProgramBox

ConstraintLayout 2 TextView первый размер эллипса

Post author:admin
Запись опубликована:18 января, 2022
Post category:Вопросы по программированию

#android #android-layout #android-constraintlayout

Вопрос:

Обновить

Я добился такого поведения с помощью следующих вещей:

Полное имя

 android:layout_width="0dp"
app:layout_constraintWidth_default="wrap"

btnFollow и btnUnfollow

 android:layout_width="0dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintWidth_default="wrap"
app:layout_constraintWidth_min="wrap"

ОРИГИНАЛЬНЫЙ ВОПРОС

У меня есть XML макет, который является родительским макетом ConstraintLayout и внутри

        -- txtFullName -- (btnFollow | btnUnfollow ) --       
Avatar ----------------------------------------------- btnPrimaryAction
       -- txtTitle -----------------------------------

Я хочу этого:

Но я получил это с помощью своего xml

Когда txtFullName он длинный, он перекрывается btnFollow или btnUnfollow , и эти кнопки не отображаются на экране. Я хочу txtFullName иметь размер эллипса, когда он длинный. Я пытался использовать 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="wrap_content">

    <ImageView
        android:id="@ id/imgAvatar"
        android:layout_width="56dp"
        android:layout_height="56dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@tools:sample/avatars" />

    <TextView
        android:id="@ id/txtFullName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="2dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:textColor="?attr/textColorMarineBlue"
        app:layout_constraintEnd_toStartOf="@id/textButtonBarrierStart"
        app:layout_constraintStart_toEndOf="@id/imgAvatar"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Long Full Name is overlapping btnFollow" />

    <TextView
        android:id="@ id/btnFollow"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="2dp"
        android:layout_marginEnd="8dp"
        android:maxLines="1"
        android:text="Follow"
        android:textColor="?attr/textColorAzure"
        app:layout_constraintBaseline_toBaselineOf="@id/txtFullName"
        app:layout_constraintEnd_toStartOf="@id/btnPrimaryAction"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@id/txtFullName" />

    <TextView
        android:id="@ id/btnUnfollow"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="2dp"
        android:layout_marginEnd="8dp"
        android:maxLines="1"
        android:text="Unfollow"
        android:textColor="?attr/textColorGreyishBrown"
        android:visibility="gone"
        app:layout_constraintBaseline_toBaselineOf="@id/txtFullName"
        app:layout_constraintEnd_toStartOf="@id/btnPrimaryAction"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@id/txtFullName" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@ id/textButtonBarrierStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="start"
        app:constraint_referenced_ids="btnFollow,btnUnfollow" />

    <TextView
        android:id="@ id/txtTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="8dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:textColor="?attr/textColorGreyishBrown"
        app:layout_constraintEnd_toStartOf="@id/btnPrimaryAction"
        app:layout_constraintStart_toEndOf="@id/imgAvatar"
        app:layout_constraintTop_toBottomOf="@id/txtFullName"
        tools:text="Title" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@ id/secondColumnEndBarrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="btnFollow,btnUnfollow,txtTitle" />

    <com.google.android.material.button.MaterialButton
        android:id="@ id/btnPrimaryAction"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toEndOf="@id/secondColumnEndBarrier"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Action" />

</androidx.constraintlayout.widget.ConstraintLayout>

Как я могу создать этот пользовательский интерфейс?

Ответ №1:

Вам нужна пара атрибутов:

В txtFullName , чтобы иметь ширину ограничений соответствия, чтобы его ширина не могла превышать барьер, и разрешить ему добавлять размер эллипса непосредственно перед барьером.
```
 android:layout_width="0dp"
 
```
В btnFollow amp; btnUnfollow использовать layout_constraintWidth_min со wrap значением, чтобы они могли убедиться, что они всегда предпочитают переносить свое содержимое, даже если ширина соответствует ограничениям с 0dp
```
 app:layout_constraintWidth_min="wrap"
 
```

Предварительный просмотр сейчас:

1. app:layout_constraintWidth_min="wrap" является устаревшим и был заменен на app:layout_constrainedWidth="true"

2. layout_constraintWidth_min="wrap" и layout_constrainedWidth="true" с ними обоими работают layout_width="0dp" дальше txtFullName . Спасибо за ответы, я ценю это @che10 @Zain

3. @che10 Спасибо за это .. У вас есть какая-нибудь ссылка на документацию для этого устаревания?

4. @Зейн, я виноват. Я растерялся. Я ошибочно принял это за то, layout_constraintWidth_default="wrap" что недавно было отвергнуто. Ваш ответ верен.

Ответ №2:

Как указано в другом ответе, вы можете либо установить layout_width значение 0dp в своем txtFullName , либо также добавить следующий флаг в свой txtFullName

 app:layout_constrainedWidth="true"

Следующим образом

 <TextView
        android:id="@ id/txtFullName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="2dp"
        android:ellipsize="end"
        android:maxLines="1"
        app:layout_constrainedWidth="true"
        android:textColor="?attr/textColorMarineBlue"
        app:layout_constraintEnd_toStartOf="@id/textButtonBarrierStart"
        app:layout_constraintStart_toEndOf="@id/imgAvatar"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Long Full Name is overlapping btnFollow" />

Ответ №3:

Вы на правильном пути. Воспользуйся

 layout_width="0dp"

вместо layout_width="wrap_content" текстового представления с идентификатором txtFullName также.