Содержимое представления не отображается полностью при использовании ConstraintLayout - Android

Я использую эту палитру цветов над направляющей и хочу выровняйте текстовое представление (и другие представления) ниже направляющей и привяжите их к ширине палитры цветов с помощью ConstraintLayout со следующими параметрами:

app:layout_constraintRight_toRightOf="@+id/colorPicker"
app:layout_constraintLeft_toLeftOf="@+id/colorPicker"

(Ширина палитры цветов зависит от доступной высоты.)

Проблема, с которой я столкнулся, заключается в том, что представление кажется расположенным точно под палитрой цветов, однако содержимое представления не корректируется и, следовательно, не отображается полностью, как показано в это изображение.

Аналогичное поведение можно воспроизвести с помощью ImageView вместо TextView. Кажется, что RecyclerView работает, однако «анимация конца списка» при достижении начала или конца списка неуместна.

При использовании других представлений вместо этого средства выбора цвета я не сталкиваюсь с этой проблемой.

Может ли кто-нибудь объяснить это поведение и как его исправить?

Полный код xml, который я использую для этого:

<android.support.constraint.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="match_parent"
    tools:context="xxx.xxx.xxx.MainActivity">

    <com.rarepebble.colorpicker.ColorPickerView
        android:id="@+id/colorPicker"
        android:layout_width="wrap_content"
        android:layout_height="0dp"

        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/guideline"

        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintGuide_percent="0.60"
        android:orientation="horizontal"
        />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Hello World! Some chars in this TextView are cut on the right side."

        app:layout_constraintTop_toTopOf="@+id/guideline"
        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintRight_toRightOf="@+id/colorPicker"
        app:layout_constraintLeft_toLeftOf="@+id/colorPicker"
        />

</android.support.constraint.ConstraintLayout>

android android-constraintlayout
person Julian Eggers    schedule 26.08.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы пробовали использовать LinearLayout? С такими проблемами, когда одно представление должно занимать процент экрана, используйте layout_weight

Решение с использованием LinearLayout

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:orientation="vertical">
        <com.rarepebble.colorpicker.ColorPickerView
            android:id="@+id/colorPicker"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_gravity="center"
            android:layout_weight="6"
            />
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="4">
            <TextView
                android:id="@+id/textView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Hello World! Some chars in this TextView are cut on the right side." />
        </FrameLayout>
</LinearLayout>

Изменить на основе комментариев

Что-то вроде этого должно работать. Вы можете изменить видимость View на GONE или VISIBLE в зависимости от того, был ли нажат FloatingActionButton или нет.

<android.support.constraint.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="match_parent">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fabSize="normal"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="@+id/linearContainer"
        app:layout_constraintTop_toTopOf="@+id/linearContainer"
        android:layout_marginTop="16dp" />

    <View
        android:id="@+id/view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginTop="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

    <LinearLayout
        android:id="@+id/linearContainer"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginBottom="0dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintVertical_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent">

        <com.rarepebble.colorpicker.ColorPickerView
            android:id="@+id/colorPicker"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_gravity="center"
            android:layout_weight="6" />

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="4">

            <TextView
                android:id="@+id/textView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Hello World! Some chars in this TextView are cut on the right side." />
        </FrameLayout>
    </LinearLayout>

</android.support.constraint.ConstraintLayout>
person Ajil O.    schedule 28.08.2017
comment
Да, я использую LinarLayout в последних выпусках, но было невозможно продолжать использовать LinarLayout для новых функций. - person Julian Eggers; 28.08.2017
comment
@JulianEggers Я согласен, что заставить их работать может быть сложно. Но о каких новых функциях вы говорите? Можете ли вы уточнить? - person Ajil O.; 28.08.2017
comment
Конечно. По сути, у меня есть палитра цветов с динамическим размером в верхней части, и я хочу показать FAB в верхнем левом углу палитры цветов. FAB может быть расширен и должен закрываться после прикосновения к экрану в любом месте (например, FAB папки "Входящие" или объясняется здесь< /а>). Я попытался использовать Viewна верхнем уровне, который прослушивает события касания и закрывает FAB. Очевидно, что FAB и его дочерние FAB больше нельзя было щелкнуть, поскольку они должны были оставаться в LinearLayout для размещения их в углу палитры цветов. - person Julian Eggers; 28.08.2017
comment
@JulianEggers Звучит выполнимо. Проверьте редактирование моего ответа. - person Ajil O.; 28.08.2017
comment
Я хочу, чтобы FAB располагался в верхнем левом углу палитры цветов, но с помощью вашего кода это можно легко сделать с помощью app:layout_constraintLeft_toLeftOf="@+id/linearLayout" и app:layout_constraintTop_toTopOf="@+id/linearLayout". Позвольте мне проверить, все ли работает так, как нужно. - person Julian Eggers; 28.08.2017
comment
Спасибо за вашу помощь. Приложение теперь работает как нужно. Однако FAB и представление следует переместить в конец макета ограничений, поскольку они должны находиться на верхнем уровне для получения всех событий касания. - person Julian Eggers; 28.08.2017
comment
На мой взгляд, есть ошибка в ConstraintLayout или в палитре цветов, поэтому на мой первоначальный вопрос пока нет ответа. Вот почему я не принимаю ваш ответ, а голосую за него (как только у меня будет достаточно репутации). (Надеюсь, это правильно, зачем идти?) - person Julian Eggers; 28.08.2017
comment
@JulianEggers Конечно. Этот пост даст вам представление о том, когда нажимать кнопку Проголосовать. Возможно, мой вклад решил вашу проблему, но я почти уверен, что он не смог решить основную проблему, поднятую вашим вопросом. Я надеюсь, что кто-то более знающий придет и даст более полное решение. Итак, давайте подождем несколько дней, прежде чем нажать кнопку Принять. :) - person Ajil O.; 28.08.2017
comment
Может вы не заметили мое первое сообщение, потому что я написал 2 ответа подряд: Можешь переместить Fab и View в самый низ ConstraintLayout? Он должен быть на верхнем слое, иначе он не работает. - person Julian Eggers; 30.08.2017