sin gravedad para scrollview. cómo hacer contenido dentro de scrollview como centro


104

Quiero el contenido dentro de scrollView como centro.

<ScrollView
    android:id="@+id/scroller"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingTop="12dp"
    android:paddingBottom="20dp"
    android:scrollbarStyle="outsideOverlay"
    android:layout_gravity="center" >

    <Button 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="check" 
        android:gravity="center_vertical|center_horizontal"/>

</ScrollView>

Nota: no hay ningún android:gravityatributo para scrollvew.

cualquier sol: -

Respuestas:


175

Tuve el mismo problema y finalmente lo resolví. Esto es para una vertical ScrollView.

Pon tu ScrollViewinterior RelativeLayoutay céntralo en el RelativeLayout. Para que esto funcione, ScrollViewdebe tener

android:layout_height="wrap_content"

Así es como debería verse el código final:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        android:layout_centerVertical="true" >

        <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="b1"/>
            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="b2"/>
            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="b3"/>
        </LinearLayout>

    </ScrollView>

</RelativeLayout>

29
Este parece funcionar mejor para mí que la respuesta aceptada. ¡Gracias!
Patrick Boos

Idealmente, Android debería analizar estos problemas cuando hay una jerarquía de diseño. También debería proporcionar ambas opciones de desplazamiento (horizontal / vertical) en una vista de desplazamiento
BTW

2
Esto es un truco, así que aunque funciona bien, se siente mal.
DariusL

3
Oye, está funcionando, pero no se desplaza cuando el teclado está visible, intenté agregar en el manifiesto android:windowSoftInputMode="stateHidden|adjustResize"pero, no te desplaces, ayúdame por favor
Helio Soares Junior

3
No es necesario utilizar heavy RelativeLayoutcomo vista raíz. Puede ser FrameLayouty android:layout_gravity="center_vertical"paraScrollView
GrafOrlov

148

¿Qué tal esto?

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scrollView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingTop="12dp"
    android:paddingBottom="20dp"
    android:scrollbarStyle="outsideOverlay" >


    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" 
        android:layout_gravity="center"
        android:gravity="center">

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="check" 
            android:gravity="center_vertical|center_horizontal"/>
    </LinearLayout>

</ScrollView>

2
¡Si! ¡Qué hay sobre eso! Esto funcionó fantásticamente para mí, así que muchas gracias, amable señor.
RileyE

¡Increíble! ¡Esto también me salvó! Gracias :)
marienke

101
Hay un problema con esto. Si su contenido en ScrollView es más grande que el scrollview, aún lo centrará y cortará el contenido en la parte superior (aunque no estoy seguro de por qué). Lo que significa que no puedes desplazarte allí.
Patrick Boos

7
PatrickBoos tiene razón; esto no parece funcionar. Use la respuesta de hadi a continuación, centrando verticalmente la vista de desplazamiento en un RelativeLayout.
Mason Lee

Sí, de esta manera tiene un error, el contenido es más grande que scrollView, el contenido no se desplazará hacia la parte superior, su parte superior es un número negativo, extraño :(
Kross

98

Creo que una solución más elegante sería el uso de la ScrollView's android:fillViewportpropiedad. A ScrollViewes un poco diferente en la forma en que trata su vista de contenido (solo puede tener una), incluso si establece match_parent( fill_parent) en ScrollView, no le dará tanto espacio a su vista de contenido, sino que el comportamiento predeterminado es ScrollViewque el contenido independientemente de lo que especifique para esa vista. Lo que android:fillViewporthace es decirle ScrollViewque estire su contenido para llenar la ventana gráfica ( http://developer.android.com/reference/android/widget/ScrollView.html#attr_android:fillViewport ). Entonces, en este caso, LinearLayoutse estirará para que coincida con la ventana y si la altura va detrás de la ventana, entonces se podrá desplazar, ¡que es exactamente lo que desea!

La respuesta aceptada no funcionará correctamente cuando el contenido se extienda más allá de ScrollViewporque todavía centrará la vista de contenido primero, lo que hará que corte una parte de la vista, y el ScrollViewcentrado en otro diseño funciona pero simplemente no se siente bien, además Creo que también resultará en un error de pelusa (padre inútil o algo por el estilo).

Intente algo como esto:

<ScrollView
    android:id="@+id/scroller"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingTop="12dp"
    android:paddingBottom="20dp"
    android:scrollbarStyle="outsideOverlay"
    android:fillViewport="true">

    <LinearLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center">

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="check" />

    </LinearLayout>

</ScrollView>

Sólo recuerde que la razón por la que se centra aquí ahora es debido a la android:gravitysobre el LinearLayoutpuesto que la ScrollViewva a estirar el LinearLayoutfin de mantener esto en mente, dependiendo de lo que se agrega a la disposición.

Otra buena lectura sobre ScrollViewaunque no sobre centrado sino sobre fillViewportes http://www.curious-creature.org/2010/08/15/scrollviews-handy-trick/


11
Esta parece la implementación más correcta, no se requieren vistas adicionales.
DariusL

1
Buena solución, parece ser la más limpia para mí. Gracias por ello
Benjamin Scharbau

2
Funciona mejor que la respuesta aceptada, ¡me ahorraste mucho tiempo! ¡Muy bien hecho Brian Ethier!
Mattia Ruggiero

Esta es la solución correcta, por todas las razones que se describen en ella. Si prueba la solución anterior y su vista de desplazamiento es más ancha que su pantalla, de hecho tendrá parte de su vista de desplazamiento inalcanzable y no podrá desplazarse hasta ella. . Esto debería aceptarse como la solución adecuada
Speckpgh

1
Stackoverflow típico ... la solución correcta suele estar en algún punto intermedio.
Teovald

14

Utilice este atributo en ScrollView

android:fillViewport="true"

Ejemplo

 <?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbarStyle="outsideOverlay"
android:fillViewport="true"
>
   <RelativeLayout
              android:layout_width="match_parent"
              android:layout_height="wrap_content">

         <!--Your Code goes here-->

   </RelativeLayout>

</ScrollView>

Asegúrese de usar Single Child en ScrollView como en el ejemplo anterior, que es Relativelayout.


@JoshuaKing may porque es una pregunta de 7 años y publiqué esta respuesta recientemente hace 9 meses.
Abhishek Garg

¡Decir ah! oh .. verdad. 😆¡Bueno, funcionó perfectamente! ¡Así que gracias!
Joshua King

1
¡Esta debería ser definitivamente la respuesta aceptada! Funciona perfectamente y centra un ScrollView si el contenido es menor que el tamaño del contenedor. Funciona tanto para ScrollView como para HorizontalScrollView. Muchas gracias! 💝💖
Ray Li

esto puede tener el efecto no deseado de estirar su contenido dentro de la vista de desplazamiento
martinseal1987

@ martinseal1987 creo que el efecto dependerá de su componente hijo, de cómo haga su diseño de diseño, aunque si esto no funciona para usted, puede crear su propio componente de vista de desplazamiento personalizado según sus necesidades de diseño y trabajo. y por favor también comparta conmigo la captura de pantalla del resultado deseado, para que pueda investigar y proporcionar una solución mejor y más funcional. listo para ayudar. salud.
Abhishek Garg

9

Para @Patrick_Boss, lo que impidió que el contenido se cortara en mi aplicación fue cambiar la gravedad y layout_gravity a center_horizontal para LinearLayout.

Funcionó para mí ... pero no estoy seguro si funcionará para usted.

Modificación de la respuesta de @ Ghost -

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scrollView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingTop="12dp"
    android:paddingBottom="20dp"
    android:scrollbarStyle="outsideOverlay" >


    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" 
        android:layout_gravity="center_horizontal"
        android:gravity="center_horizontal">

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="check" 
            android:gravity="center_vertical|center_horizontal"/>
    </LinearLayout>

</ScrollView>

1
Esto resuelve el problema de cortar la parte superior. Pero todavía hay un problema con esta solución. El contenido de ScrollView no se centró verticalmente. Pero esto se puede solucionar estableciendo los siguientes valores de ScrollView: android: layout_height = "wrap_content" android: layout_gravity = "center_vertical"
Patrick Boos

Descubrí que para que esto funcione dentro de otros diseños, el ScrollView superior debe estar incrustado dentro de un FrameLayout.
Theo

1

Una cosa a considerar es qué NO establecer . Asegúrese de que los controles secundarios, especialmente los EditTextcontroles, no tengan la RequestFocuspropiedad establecida.

Esta puede ser una de las últimas propiedades interpretadas en el diseño y anulará la configuración de gravedad en sus padres ( layouto ScrollView).


0

usando la vista de desplazamiento dentro de ConstraintLayout. Me ha funcionado

<androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white">

            <ScrollView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

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

La altura de la vista de desplazamiento debe ser wrap_content

<ScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.