¿Cómo usar ScrollView en Android?

242

Tengo un archivo de diseño XML, pero el texto es más que adecuado para el tamaño de la pantalla. ¿Qué necesito hacer para hacer un ScrollView?

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

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1" >

    <TableRow>
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dip"
            android:layout_marginTop="10dip"
            android:layout_marginRight="5dip"
            android:tint="#55ff0000"
            android:src="@drawable/icon" />
    </TableRow>
    <TableRow>
        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="3dip"
            android:text="  Name " />
        <TextView android:id="@+id/name1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:text="Veer" />
    </TableRow>
    <TableRow>
        <TextView android:id="@+id/age"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="3dip"
            android:text="  Age" />

        <TextView android:id="@+id/age1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:text="23" />
    </TableRow>
    <TableRow>
        <TextView android:id="@+id/gender"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="3dip"
            android:text="  Gender" />
        <TextView android:id="@+id/gender1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:text="Male" />
    </TableRow>
    <TableRow>
        <TextView android:id="@+id/profession"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="3dip"
            android:text="  Professsion" />
        <TextView android:id="@+id/profession1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:text="Mobile Developer" />
    </TableRow>
    <TableRow>
        <TextView android:id="@+id/phone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="3dip"
            android:text="  Phone" />
        <TextView android:id="@+id/phone1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:text="03333736767" />
    </TableRow>
    <TableRow>
        <TextView android:id="@+id/email"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="3dip"
            android:text="  Email" />
        <TextView android:id="@+id/email1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:text="[email protected]" />
    </TableRow>
    <TableRow>
        <TextView android:id="@+id/hobby"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="3dip"
            android:text="  Hobby" />
        <TextView android:id="@+id/hobby1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:text="Play Games" />
    </TableRow>
    <TableRow>
        <TextView android:id="@+id/ilike"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="3dip"
            android:text="  I like" />
        <TextView android:id="@+id/ilike1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:text="Java, Objective-c" />
    </TableRow>
    <TableRow>
        <TextView android:id="@+id/idislike"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="3dip"
            android:text="  I dislike" />
        <TextView android:id="@+id/idislike1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:text="Microsoft" />
    </TableRow>
    <TableRow>
        <TextView android:id="@+id/address"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="3dip"
            android:text="  Address" />
        <TextView android:id="@+id/address1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:text="Johar Mor" />
    </TableRow>
</TableLayout>
android scrollview Chatar Veer Suthar
fuente

Respuestas:

470

Simplemente haga que el diseño de nivel superior sea un ScrollView:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:stretchColumns="1">

        <!-- everything you already have -->

    </TableLayout>
</ScrollView>
Ted Hopp
fuente
2
¿Es posible dar ScrollView bajo un ScrollView ??? ¿O para proporcionar varias vistas de desplazamiento en una misma página?
Tarit Ray
2
@TaritRay - Ciertamente, tener múltiples ScrollViews en una pantalla no es un problema; el diseño principal simplemente necesita arreglarse para que todos tengan espacio en la pantalla. En cuanto a un ScrollView dentro de otro, eso es difícil. En cambio, la biblioteca de compatibilidad de Android tiene NestedScrollView . Hay muchos tutoriales en la web sobre cómo usar NestedScrollView para esa aplicación.
Ted Hopp
36

Cómo usar ScrollView

Usar ScrollViewno es muy difícil. Simplemente puede agregar uno a su diseño y poner lo que quiera desplazarse dentro. ScrollViewsolo se necesita un niño, por lo que si desea poner algunas cosas dentro, debe hacer que lo primero sea algo así como a LinearLayout.

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <!-- things to scroll -->

    </LinearLayout>
</ScrollView>

Si desea desplazarse horizontalmente, use a HorizontalScrollView.

Hacer que el contenido llene la pantalla

Como se menciona en esta publicación , a veces desea que el ScrollViewcontenido llene la pantalla. Por ejemplo, si tenía algunos botones al final de un archivo Léame. Desea que los botones estén siempre al final del texto y en la parte inferior de la pantalla, incluso si el texto no se desplaza.

Si el contenido se desplaza, todo está bien. Sin embargo, si el contenido es más pequeño que el tamaño de la pantalla, los botones no están en la parte inferior.

ingrese la descripción de la imagen aquí

Esto se puede resolver con una combinación de usar fillViewPorten ScrollViewy usar un peso de diseño en el contenido. El uso fillViewPorthace que el ScrollViewrelleno del área principal. La configuración layout_weightde una de las vistas en LinearLayouthace que esa vista se expanda para llenar cualquier espacio adicional.

ingrese la descripción de la imagen aquí

Aquí está el XML

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textview"
            android:layout_height="0dp"                <--- 
            android:layout_weight="1"                  <--- set layout_weight
            android:layout_width="match_parent"
            android:padding="6dp"
            android:text="hello"/>

        <LinearLayout
            android:layout_height="wrap_content"       <--- wrap_content
            android:layout_width="match_parent"
            android:background="@android:drawable/bottom_bar"
            android:gravity="center_vertical">

            <Button
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="Accept" />

            <Button
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="Refuse" />

        </LinearLayout>
    </LinearLayout>
</ScrollView>

La idea de esta respuesta surgió de una respuesta anterior que ahora se elimina ( enlace para usuarios de 10K ). El contenido de esta respuesta es una actualización y adaptación de esta publicación .

Suragch
fuente
2
Me ahorró mucho tiempo
Bhaskara Arani
31

Hay dos opciones Puede hacer que todo su diseño sea desplazable o solo TextView para que se pueda desplazar.

Para el primer caso 

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

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <TableLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:stretchColumns="1" >

            <TableRow>

                <ImageView
                    android:id="@+id/imageView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dip"
                    android:layout_marginRight="5dip"
                    android:layout_marginTop="10dip"
                    android:src="@drawable/icon"
                    android:tint="#55ff0000" >
                </ImageView>
            </TableRow>

            <TableRow>

                <TextView
                    android:id="@+id/name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dip"
                    android:text="  Name " >
                </TextView>

                <TextView
                    android:id="@+id/name1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="left"
                    android:text="Veer" >
                </TextView>
            </TableRow>

            <TableRow>

                <TextView
                    android:id="@+id/age"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dip"
                    android:text="  Age" >
                </TextView>

                <TextView
                    android:id="@+id/age1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="left"
                    android:text="23" >
                </TextView>
            </TableRow>

            <TableRow>

                <TextView
                    android:id="@+id/gender"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dip"
                    android:text="  Gender" >
                </TextView>

                <TextView
                    android:id="@+id/gender1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="left"
                    android:text="Male" >
                </TextView>
            </TableRow>

            <TableRow>

                <TextView
                    android:id="@+id/profession"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dip"
                    android:text="  Professsion" >
                </TextView>

                <TextView
                    android:id="@+id/profession1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="left"
                    android:text="Mobile Developer" >
                </TextView>
            </TableRow>

            <TableRow>

                <TextView
                    android:id="@+id/phone"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dip"
                    android:text="  Phone" >
                </TextView>

                <TextView
                    android:id="@+id/phone1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="left"
                    android:text="03333736767" >
                </TextView>
            </TableRow>

            <TableRow>

                <TextView
                    android:id="@+id/email"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dip"
                    android:text="  Email" >
                </TextView>

                <TextView
                    android:id="@+id/email1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="left"
                    android:text="[email protected]" >
                </TextView>
            </TableRow>

            <TableRow>

                <TextView
                    android:id="@+id/hobby"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dip"
                    android:text="  Hobby" >
                </TextView>

                <TextView
                    android:id="@+id/hobby1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="left"
                    android:text="Play Games" >
                </TextView>
            </TableRow>

            <TableRow>

                <TextView
                    android:id="@+id/ilike"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dip"
                    android:text="  I like" >
                </TextView>

                <TextView
                    android:id="@+id/ilike1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="left"
                    android:text="Java, Objective-c" >
                </TextView>
            </TableRow>

            <TableRow>

                <TextView
                    android:id="@+id/idislike"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dip"
                    android:text="  I dislike" >
                </TextView>

                <TextView
                    android:id="@+id/idislike1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="left"
                    android:text="Microsoft" >
                </TextView>
            </TableRow>

            <TableRow>

                <TextView
                    android:id="@+id/address"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dip"
                    android:text="  Address" >
                </TextView>

                <TextView
                    android:id="@+id/address1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="left"
                    android:text="Johar Mor" >
                </TextView>
            </TableRow>

            <Relativelayout>
            </Relativelayout>
        </TableLayout>
    </RelativeLayout>

</ScrollView>

o, como dije, puedes usar scrollView solo para TextView.

Andro Selva
fuente
Donde finaliza el desplazamientoVer como este </ScrollView>
Chatar Veer Suthar
1
Perdón, es mi culpa. He editado la respuesta ahora. Tienes que terminarlo en el último.
Andro Selva
Trabajó para mi. Necesitaba deformar mi LinearLayout en un ScrollView.
zeeshan
La clase TextView también se encarga de su propio desplazamiento, por lo que no requiere un ScrollView, pero es posible usar los dos juntos para lograr el efecto de una vista de texto dentro de un contenedor más grande. Citado de: developer.android.com/reference/android/widget/ScrollView.html
metis
14

Un ScrollView es un tipo especial de FrameLayout ya que permite a los usuarios desplazarse por una lista de vistas que ocupan más espacio que la pantalla física. Solo agrego algunos atributos.

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:fillViewport="true"
     android:scrollbars = "vertical"
     android:scrollbarStyle="insideInset"
    >
    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:stretchColumns="1"
        >
        <!-- Add here which you want -->
    </TableLayout>

</ScrollView>
IntelliJ Amiya
fuente
8

Como se dijo anteriormente, puede colocarlo dentro de ScrollView... y si desea que la Vista de desplazamiento sea horizontal, colóquelo dentro HorizontalScrollView... y si desea que su componente (o diseño) admita ambos, coloque ambos dentro de esta manera:

  <HorizontalScrollView>
        <ScrollView>
            <!-- SOME THING -->
        </ScrollView>
    </HorizontalScrollView>

y con el establecimiento de layout_widthy por layout_heightsupuesto.

Zuhair Kj
fuente
+1 solo por mencionar la importancia de establecer layout_width y layout_height
Arunkumar
4

Coloque su TableLayout dentro de un diseño ScrollView. Eso resolverá su problema.

Rasel
fuente
4

Para desplazarse por los datos en la vista de texto, puede usar esto en su vista de texto. y agregue y para cualquier otro diseño, simplemente puede agregar una vista de desplazamiento en el diseño como la gente dice anteriormente.

/ ** android: scrollable = true en textview en diseño xml.

TextView txtScroll = (TextView) findViewById(R.id.txt1);
        txtScroll.setMovementMethod(new ScrollingMovementMethod());

* //

Sandip Lawate
fuente
-6 
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:stretchColumns="1" >

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <RadioGroup
                android:layout_width="fill_parent"
                android:layout_height="match_parent" >

                <RadioButton
                    android:id="@+id/butonSecim1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:layout_weight=".50"
                    android:text="@string/buton1Text" />

                <RadioButton
                    android:id="@+id/butonSecim2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:layout_weight=".50"
                    android:text="@string/buton2Text" />
            </RadioGroup>
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <TableLayout
                android:id="@+id/bilgiAlani"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:visibility="invisible" >

                <TableRow
                    android:id="@+id/BilgiAlanitableRow2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" >

                    <TextView
                        android:id="@+id/bilgiMesaji"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_weight=".100"
                        android:ems="10"
                        android:gravity="left|top"
                        android:inputType="textMultiLine" />
                </TableRow>
            </TableLayout>
        </TableRow>

        <TableRow
            android:id="@+id/tableRow3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/metin4"
                android:layout_height="match_parent"
                android:layout_weight=".100"
                android:text="deneme" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <TextView
                android:id="@+id/metin5"
                android:layout_height="match_parent"
                android:layout_weight=".100"
                android:text="deneme" />
        </TableRow>
    </TableLayout>

</ScrollView>
salihzekicamurcu
fuente