Android - как сделать прокручиваемое ограничение?

Я хочу сделать макет, который позволит мне прокручивать страницу вниз, используя макет ограничения, но я не знаю, как это сделать. Должен ли ScrollView быть родителем ConstraintLayout как это?

<?xml version="1.0" encoding="utf-8"?>

<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="match_parent"
    android:fillViewport="true">

<android.support.constraint.ConstraintLayout
    android:id="@+id/Constraint"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Или наоборот? Может быть, кто-то может указать мне хороший учебник по этому вопросу или привести пример, но я не могу его найти.

Кроме того, я не знаю, является ли это ошибкой или некоторой конфигурацией, которую я не настроил, но я видел изображения, подобные этой:

где есть некоторые компоненты за пределами "синего прямоугольника" проекта, но они видны, в то время как на моей стороне, если я помещаю компонент в "белое пространство", я не могу его увидеть или переместить где-либо, и он появляется в дереве компонентов,

ОБНОВИТЬ:

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

Ответы

Ответ 1

Кажется, что он работает, я не знаю, с какой зависимостью вы работали, но в этом

compile 'com.android.support.constraint:constraint-layout:1.0.2'

Я работаю, это то, что я сделал

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
    tools:context=".MainActivity">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TextInputLayout
            android:id="@+id/til_input"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:hint="Escriba el contenido del archivo"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/btn_save"
            app:layout_constraintTop_toTopOf="@id/btn_save"
            app:layout_constraintVertical_chainStyle="spread">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </android.support.design.widget.TextInputLayout>

        <Button
            android:id="@+id/btn_save"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="onClickButtonSave"
            android:text="Guardar"
            app:layout_constraintLeft_toRightOf="@+id/til_input"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/txt_content"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="0dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/til_input"
            app:layout_constraintVertical_chainStyle="spread"
            app:layout_constraintVertical_weight="1" />

        <Button
            android:id="@+id/btn_delete"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:onClick="onClickButtonDelete"
            android:text="Eliminar"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/txt_content"
            app:layout_constraintVertical_chainStyle="spread" />

    </android.support.constraint.ConstraintLayout>

</ScrollView>

Прокрутка вверх

Scroll Bottom

Ответ 2

Существует тип ограничения, который нарушает функцию прокрутки:

Просто убедитесь, что вы не используете это ограничение для любого представления, когда хотите, чтобы ваш ConstraintLayout прокручивался с помощью ScrollView:

app:layout_constraintBottom_toBottomOf="parent"

Если вы удалите их, ваш свиток должен работать.

Объяснение:

Установка высоты дочернего элемента в соответствии с высотой дочернего элемента ScrollView противоречит тому, что должен делать компонент. Большую часть времени мы хотим, чтобы какой-то динамический размер был прокручиваемым, если он больше, чем экран/кадр; сопоставление высоты с родительским ScrollView заставит все содержимое отображаться в фиксированном фрейме (высота родителя), что приведет к недействительности любой функции прокрутки.

Это также происходит, когда регулярные прямые дочерние компоненты устанавливаются в layout_height="match_parent".

Если вы хотите, чтобы дочерний ScrollView соответствовал высоте родителя, когда содержимого недостаточно, просто установите для android:fillViewport значение true для ScrollView.

Ответ 3

Подводя итог, вы в основном оборачиваете свое представление android.support.constraint.ConstraintLayout в ScrollView в тексте файла *.xml связанного с вашим макетом.

Пример activity_sign_in.xml

<?xml version="1.0" encoding="utf-8"?>

<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="match_parent"
    tools:context=".SignInActivity"> <!-- usually the name of the Java file associated with this activity -->

    <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:background="@drawable/gradient"
        tools:context="app.android.SignInActivity">

        <!-- all the layout details of your page -->

    </android.support.constraint.ConstraintLayout>
</ScrollView>

Примечание 1: Полосы прокрутки отображаются только в том случае, если требуется какое-либо завертывание, включая всплывающую клавиатуру.

Примечание 2: Также неплохо было бы убедиться, что ваш ConstraintLayout достаточно велик, чтобы достичь дна и сторон любого экрана, особенно если у вас есть фон, так как это обеспечит отсутствие нечетных пробелов., Вы можете сделать это с пробелами, если ничего больше.

Ответ 4

Просто используйте макет ограничения внутри NestedScrollView или ScrollView.

<android.support.v4.widget.NestedScrollView
        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.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white">

 </android.support.constraint.ConstraintLayout>

</android.support.v4.widget.NestedScrollView>

вот и все. наслаждайтесь вашим кодированием.

Ответ 5

Чтобы сделать прокручиваемый макет, макет верен. Он не будет прокручиваться, пока не будет причин для прокрутки (как и в любом другом макете). Поэтому добавьте достаточное количество контента, и оно будет прокручиваться, как и с любым макетом (Linear, Relative и т.д.). Тем не менее, не может правильно прокручиваться в Blueprint или режиме разработки при проектировании с помощью ConstraintLayout и ScrollView.

Значение:

Вы можете создать прокручиваемую ConstraintLayout, но она не будет правильно прокручиваться в редакторе из-за ошибки/сценария, которая не учитывалась. Но даже если прокрутка не работает в редакторе, она работает на устройствах. (Я сделал несколько прокрутки COnstraintLayouts, поэтому я их протестировал)

Примечание

Относительно вашего кода. В ScrollView отсутствует закрывающий тег, я не знаю, соответствует ли это файлу в файле, или если это пропущенная копия, но вы можете посмотреть на него.

Ответ 6

Для завершения предыдущих ответов я добавляю следующий пример, который также учитывает использование AppBar. С помощью этого кода редактор дизайна Android Studio, похоже, отлично работает с ConstraintLayout.

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout
    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:fitsSystemWindows="true"
    android:background="@drawable/bg"
    android:orientation="vertical">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.ActionBar.AppOverlayTheme">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/image_id"
            android:layout_width="match_parent"
            android:layout_height="@dimen/app_bar_height"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:src="@drawable/intro"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="parent" />

        <TextView
            android:id="@+id/desc_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/text_margin"
            android:text="@string/intro_desc"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/image_id" />

        <Button
            android:id="@+id/button_scan"
            style="?android:textAppearanceSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:backgroundTint="@color/colorAccent"
            android:padding="8dp"
            android:text="@string/intro_button_scan"
            android:textStyle="bold"
            app:layout_constraintTop_toBottomOf="@+id/desc_id" />

        <Button
            android:id="@+id/button_return"
            style="?android:textAppearanceSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="8dp"
            android:backgroundTint="@color/colorAccent"
            android:padding="8dp"
            android:text="@string/intro_button_return"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/button_recycle" />

        <Button
            android:id="@+id/button_recycle"
            style="?android:textAppearanceSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:backgroundTint="@color/colorAccent"
            android:padding="8dp"
            android:text="@string/intro_button_recycle"
            android:textStyle="bold"
            app:layout_constraintTop_toBottomOf="@+id/button_scan" />
    </android.support.constraint.ConstraintLayout>
</ScrollView>
</LinearLayout>

Ответ 7

Использование NestedScrollView с окном просмотра true работает хорошо для меня

<android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="700dp">

        </android.support.constraint.ConstraintLayout>

</android.support.v4.widget.NestedScrollView>

для Android X использовать это

 <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
.....other views....

</androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>

Ответ 8

вам нужно окружить мой макет привязки тегом ScrollView и присвоить ему свойство android: isScrollContainer = "true".

Ответ 9

В версии 2.2 есть ошибка, которая делает невозможным прокрутку ConstraintLayout. По-моему, это все еще существует. Вы можете использовать LinearLayout или RelativeLayout в качестве альтернативы.

Кроме того, проверьте: Возможно ли разместить шаблон ограничения внутри ScrollView.

Ответ 10

Constraintlayout - это значение по умолчанию для нового приложения. Я сейчас "изучаю Android" и очень тяжело разбираюсь в том, как обрабатывать стандартный "образец" кода для прокрутки, когда клавиатура вверх. Я видел много приложений, где мне нужно закрыть клавиатуру, чтобы нажать кнопку "отправить", и иногда она не исчезает. Используя эту иерархию [ScrollView/ContraintLayout/Fields], она работает нормально сейчас. Таким образом, мы можем иметь преимущества и удобство использования из ConstraintLayout в прокручиваемом виде.

Ответ 11

Вы можете использовать HorizontalScrollView и это будет работать!

Ответ 12

Вот как я решил это:
Если вы используете Nested ScrollView, т.е. ScrollView в ConstraintLayout, тогда используйте следующую конфигурацию для ScrollView вместо "WRAP_CONTENT" или "MATCH_PARENT":

<ScrollView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/someOtherWidget"
    app:layout_constraintTop_toTopOf="parent">

Ответ 13

в scrollview сделайте высоту и ширину 0 добавить ограничения Top_toBottomOf и Bottom_toTopOf это.

Ответ 14

Для меня ни одно из предложений об удалении нижних ограничений или установке контейнера прокрутки в значение true не сработало. Что сработало: увеличьте высоту отдельных/вложенных представлений в моем макете, чтобы они "перекрывали" родительский элемент с помощью параметра "Развернуть по вертикали" в редакторе макетов ограничений, как показано ниже.

Для любого подхода важно, чтобы пунктирные линии предварительного просмотра проходили вертикально за пределы родительского верхнего или нижнего размеров

Ответ 15

Извлеките нижнюю кнопку из nestedscrollview и возьмите linearlayout в качестве родителя. Добавьте нижний и nestedscrollview как своих детей. Это будет работать абсолютно нормально. В манифесте для действия используйте это - это поднимет кнопку, когда клавиатура открыта

android:windowSoftInputMode="adjustResize|stateVisible"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">

    <androidx.core.widget.NestedScrollView xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:fillViewport="true">

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

            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/input_city_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:layout_marginTop="32dp"
                android:layout_marginEnd="20dp"
                android:hint="@string/city_name"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/city_name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:digits="abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ"
                    android:lines="1"
                    android:maxLength="100"
                    android:textSize="16sp" />

            </com.google.android.material.textfield.TextInputLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.core.widget.NestedScrollView>

    <Button
        android:id="@+id/submit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:onClick="onSubmit"
        android:padding="12dp"
        android:text="@string/string_continue"
        android:textColor="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="parent" />

</LinearLayout>