1

Можно ли сделать с помощью ConstraintLayout такое обтекание текста вокруг картинки?

введите сюда описание изображения

Т.е. текст в TextView должен находиться справа и снизу от ImageView, при этом картинка в ImageView должна занимать всю видимую (свободную) высоту экрана, ширина картинки при этом должна быть такой, чтобы картинка имела правильные пропорции, и экран должен прокручиваться (скроллиться).

У меня получается заставить ImageView быть равным по высоте контейнеру с сохранением пропорций, но текст при этом "уезжает" вправо:

<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/avatar"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintVertical_weight="1"
        android:contentDescription="@string/avatar"
        android:scaleType="centerCrop"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@tools:sample/avatars" />
    <TextView
        android:id="@+id/details"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:paddingEnd="@dimen/margin"
        android:paddingLeft="@dimen/margin"
        android:paddingRight="@dimen/margin"
        android:paddingStart="@dimen/margin"
        app:layout_constraintLeft_toRightOf="@id/avatar"
        app:layout_constraintStart_toEndOf="@id/avatar"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        tools:text="@tools:sample/lorem" />
</androidx.constraintlayout.widget.ConstraintLayout>

введите сюда описание изображения

И не получается сделать прокручивание, т.к. в случае, если я оборачиваю ConstraintLayout в ScrollView, ImageView начинает занимать и невидимую часть экрана:

<ScrollView 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">

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

        ...

    </androidx.constraintlayout.widget.ConstraintLayout>

</ScrollView>

введите сюда описание изображения

Если же обернуть TextView в ScrollView, размер картинки правильный, но прокручивается только текст справа, картинка остаётся на месте, а это не совсем то, что мне нужно - текст не обтекает картинку, а просто прокручивается справа от неё.

Или с помощью ConstraintLayout и ScrollView так сделать невозможно? C помощью каких контейнеров тогда лучше сделать такой макет?

4
  • 1
    уверенно могу сказать, что одной картинкой и одном TextView это сделать нельзя. Я бы на вашем месте реализовал html страницу, т.к. с ее помощью это решить гораздо проще. 5 авг 2018 в 18:14
  • 1
    Одной картинкой и одним TextView это сделать нельзя. Говнокодить с помощью html страницы сильно не рекомендую. 5 авг 2018 в 20:44
  • @Suvitruf, а как тогда лучше это сделать?
    – Ksenia
    5 авг 2018 в 20:52
  • @Ksenia я такое представляю возможным сделать, если создать свой компонент и там переопределять методы вроде onMeasure и т.п. Хотя, почему-то мне кажется, есть готовый компонент с таким поведением) 5 авг 2018 в 20:55

1 ответ 1

1

Как вариант предлагаю не готовый ответ, а направление. А именно, использовать два textview: один справа, один снизу. Определять наполнение текстом в первом и переносить остаток во второй. Ссылки по теме:

  1. определить переполнение textview
  2. Разбивка текста

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.