Обтекание по правому краю, когда нет места - PullRequest
Новая
       23

Обтекание по правому краю, когда нет места

0 голосов
/ 27 ноября 2018

У меня есть 2 вида в макете - TextView и Button.TextView выровнен / закреплен на левой стороне, а кнопка на правой стороне.

То, чего я пытаюсь добиться, - это естественное «поведение обтекания» Баттона.Когда TextView станет достаточно широким, чтобы не было места для кнопки (в той же строке), он должен переместиться ниже TextView , оставаясь привязанным вправо .

.Вот 3 сценария для макета, которого я хочу достичь:

mockup

Я пытался сделать это с помощью FlexBoxLayout, но кнопка появляетсяна левой стороне после упаковки. 

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:flexDirection="row"
    app:flexWrap="wrap"
    app:justifyContent="space_between"
   >


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="text text"
        android:gravity="start"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="end"
        android:text="Button"
        />

</com.google.android.flexbox.FlexboxLayout>

Так как я могу это сделать?Это не обязательно должен быть FlexBox, я могу использовать любой макет, даже сторонний.

Ответы [ 3 ]

0 голосов
/ 28 ноября 2018

Нет необходимости в стороннем макете.ConstraintLayout должно быть более чем достаточно - с небольшим изменением в коде.

Ваш TextView будет иметь прямые ограничения, настроенные для родительского макета (начало, верх, конец). 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="match_parent"
    xmlns:tools="http://schemas.android.com/tools">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Text text text text text text" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/text" />
</android.support.constraint.ConstraintLayout>

Вкод, просто проверьте ширину TextView и сравните его с шириной родительского элемента (в основном проверьте, чтобы он перекрывался с кнопкой).

Если это действительно изменится (вам придется сделать это в коде, но этоэто принцип): 

app:layout_constraintTop_toTopOf="@+id/text"

до 

app:layout_constraintTop_toBottomOf="@+id/text"

Если вам нужно сделать это динамически, ConstraintLayout имеет удобную функцию «Анимации по ключевым кадрам», которая создает потрясающие анимации при изменении ограничений.

0 голосов
/ 24 апреля 2019

Используйте justifyContent = "flex_end" в родительском элементе и установите layout_flexGrow для дочерних элементов, как это работает для меня. 

<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    app:flexDirection="row"
    app:flexWrap="wrap"
    app:justifyContent="flex_end">

    <TextView
        android:id="@+id/textview2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="blah blah"
        app:layout_flexGrow="1" />

    <TextView
        android:id="@+id/textview3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="( . )( . )"
        app:layout_flexGrow="0" />
</com.google.android.flexbox.FlexboxLayout>
0 голосов
/ 28 ноября 2018

Не похоже, что есть способ сделать это с Flexbox.Я бы просто сделал это программно, когда вы надули ресурс (в onCreateView() или что-то в этом роде).Родителем обоих представлений будет RelativeLayout, с кнопкой, выровненной по TextView top , когда объединенная ширина не превышает ширину RelativeLayout, и выровненной по bottom TextView, когда ширина больше, чем это.

...