android - studio - scroll bar constraintlayout

Android: ¿cómo hacer una disposición de restricción desplazable?

Question

Quiero hacer un diseño que me permita desplazarme hacia abajo usando un diseño de restricción, pero no sé cómo hacerlo. ¿Debería ScrollView ser el padre de ConstraintLayout esta manera?

<?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"/>

¿O al revés? Tal vez alguien pueda señalarme un buen tutorial sobre esto o dar un ejemplo, parece que no puedo encontrar uno.

Además, no sé si esto es un error o alguna configuración que no he configurado, pero he visto imágenes como esta:

donde hay algunos componentes fuera del plano "rectángulo azul" pero son visibles, mientras que de mi lado si coloco un componente en el "espacio en blanco" no puedo verlo ni moverlo a ningún lado, y aparece en el árbol de componentes .

ACTUALIZACIÓN

Encontré una manera de hacer que el diseño de restricción se pueda desplazar en la herramienta de diseño, usando una guía horizontal para empujar hacia abajo el borde del diseño de restricción y extenderlo más allá del dispositivo, después de eso, puede usar la guía como la nueva parte inferior del diseño de restricción para Anclar los componentes.

Answer 1

¡Puedes usar HorizontalScrollView y funcionará también!

Answer 2

Así es como lo resolví:
Si está utilizando ScrollView anidado, es decir, ScrollView dentro de un RestraintLayout, utilice la siguiente configuración para ScrollView en lugar de "WRAP_CONTENT" o "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">

Answer 3

Constraintlayout es el valor predeterminado para una nueva aplicación. Ahora estoy "aprendiendo a Android" y me costó mucho descubrir cómo manejar el código de "muestra" predeterminado para desplazarme cuando el teclado está activado. He visto muchas aplicaciones donde tengo que cerrar el teclado para hacer clic en el botón "enviar" y, a veces, no desaparece. Usando esta jerarquía [ScrollView / ContraintLayout / Fields] está funcionando bien ahora. De esta manera, podemos obtener los beneficios y la facilidad de uso de ConstraintLayout en una vista desplazable.

Answer 4

Hay un bug en la versión 2.2 que hace que sea imposible desplazarse por el diseño de restricción. Supongo que todavía existe. Puede usar LinearLayout o RelativeLayout alternativamente.

Además, consulte: ¿Es posible poner un diseño de restricción dentro de un ScrollView ?

Answer 5

Para completar las respuestas anteriores, agrego el siguiente ejemplo, que también tiene en cuenta el uso de la barra de aplicaciones. Con este código, el editor de diseño de Android Studio parece funcionar bien con 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>

Answer 6

Para hacer un diseño desplazable, el diseño es correcto. No será desplazable hasta que haya una razón para desplazarse (como en cualquier otro diseño). Por lo tanto, agregue suficiente contenido y será desplazable, al igual que con cualquier diseño (lineal, relativo, etc.). Sin embargo, no puede desplazarse correctamente en Blueprint o en modo de diseño cuando diseña con ConstraintLayout y ScrollView.

Sentido:

Puede hacer un RestraintLayout desplazable, pero no se desplazará correctamente en el editor debido a un error / escenario que no se consideró. Pero aunque el desplazamiento no funciona en el editor, funciona en dispositivos. (He realizado varios COnstraintLayouts de desplazamiento, así que lo he probado)

Nota

En cuanto a su código. Al ScrollView le falta una etiqueta de cierre, no sé si es el caso en el archivo o si es un error de copiar y pegar, pero es posible que desee verlo.

Answer 7

Para resumir, básicamente envuelve su vista android.support.constraint.ConstraintLayout en una vista de ScrollView dentro del texto del archivo *.xml asociado con su diseño.

Ejemplo 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>

Nota 1: Las barras de desplazamiento solo aparecen si se necesita un ajuste de alguna manera, incluido el teclado emergente.

Nota 2: Tampoco sería una mala idea asegurarse de que su ConstraintLayout sea lo suficientemente grande como para alcanzar la parte inferior y los lados de cualquier pantalla, especialmente si tiene un fondo, ya que esto garantizará que no haya espacios en blanco extraños . Puede hacer esto con espacios si nada más.

Answer 8

Parece que está funcionando, no sé con qué dependencia estabas trabajando, pero en este caso

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

Está funcionando, esto es lo que hice

<?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>

Desplazarse hacia arriba

Parte inferior de desplazamiento

Answer 9

Simplemente use el diseño de restricción dentro de NestedScrollView o 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>

Eso es. disfruta tu codificación.

Answer 10

en scrollview, haga que la altura y el ancho 0 agregue las restricciones Top_toBottomOfand y Bottom_toTopOf.

Answer 11

necesita rodear mi diseño de restricción con una etiqueta ScrollView y le dio la propiedad android: isScrollContainer = "true".

Answer 12

Hay un tipo de restricción que rompe la función de desplazamiento:

Solo asegúrese de no usar esta restricción en ninguna vista cuando desee que su ConstraintLayout sea ​​desplazable con ScrollView :

app:layout_constraintBottom_toBottomOf=“parent”

Si elimina estos, su desplazamiento debería funcionar.

Explicación:

Establecer la altura del niño para que coincida con la de un padre ScrollView es contradictorio con lo que el componente debe hacer. Lo que queremos la mayor parte del tiempo es que un contenido de tamaño dinámico sea desplazable cuando sea más grande que una pantalla / marco; hacer coincidir la altura con el ScrollView principal obligaría a que todo el contenido se muestre en un marco fijo (la altura del elemento primario), lo que invalidaría cualquier funcionalidad de desplazamiento.

Esto también sucede cuando los componentes secundarios directos regulares se establecen en layout_height="match_parent" .

Si desea que el elemento secundario de ScrollView coincida con la altura del elemento primario cuando no hay suficiente contenido, simplemente configure android:fillViewport en true para ScrollView .