Jak korzystać ze ScrollView w Androidzie?

242

Mam plik układu XML, ale tekst jest bardziej niż dopasowany do rozmiaru ekranu. Co muszę zrobić, aby zrobić 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>
Chatar Veer Suthar
źródło

Odpowiedzi:

470

Wystarczy ustawić układ najwyższego poziomu jako 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
źródło
2
Czy można dać ScrollView pod ScrollView ??? Lub zapewnić wiele przewijania na tej samej stronie?
Tarit Ray
2
@TaritRay - Z pewnością posiadanie wielu ScrollView na ekranie nie stanowi problemu; układ nadrzędny musi być tak ułożony, aby wszyscy mieli miejsce na ekranie. Co do jednego ScrollView w innym, to trudne. Zamiast tego biblioteka kompatybilności z Androidem ma NestedScrollView . W sieci istnieje wiele samouczków na temat korzystania z NestedScrollView dla tej aplikacji.
Ted Hopp,
36

Jak korzystać z ScrollView

Korzystanie ScrollViewnie jest bardzo trudne. Możesz po prostu dodać jeden do swojego układu i umieścić w nim wszystko, co chcesz przewijać. ScrollViewbierze tylko jedno dziecko, więc jeśli chcesz włożyć kilka rzeczy do środka, powinieneś zrobić coś takiego 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>

Jeśli chcesz przewijać rzeczy w poziomie, użyj HorizontalScrollView.

Tworzenie zawartości wypełniającej ekran

Jak wspomniano w tym poście , czasem chcesz, aby ScrollViewzawartość wypełniła ekran. Na przykład, jeśli masz jakieś przyciski na końcu pliku readme. Chcesz, aby przyciski zawsze znajdowały się na końcu tekstu i na dole ekranu, nawet jeśli tekst się nie przewija.

Jeśli zawartość przewija się, wszystko jest w porządku. Jeśli jednak zawartość jest mniejsza niż rozmiar ekranu, przyciski nie znajdują się na dole.

wprowadź opis zdjęcia tutaj

Można to rozwiązać za pomocą połączenia fillViewPortna ScrollViewi przy użyciu masy układu na treść. Użycie fillViewPortpowoduje ScrollViewwypełnienie obszaru nadrzędnego. Ustawienie layout_weightjednego z widoków w LinearLayoutpowoduje, że widok ten rozszerza się, aby wypełnić każdą dodatkową przestrzeń.

wprowadź opis zdjęcia tutaj

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

Pomysł na tę odpowiedź przyszedł z poprzedniej odpowiedzi, która jest teraz usunięta ( link dla 10 000 użytkowników ). Treść tej odpowiedzi stanowi aktualizację i dostosowanie tego postu .

Suragch
źródło
2
Zaoszczędziło mi to dużo czasu
Bhaskara Arani
31

Istnieją dwie opcje. Możesz ustawić przewijanie całego układu lub przewijanie tylko TextView.

W pierwszym przypadku

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

lub, jak już powiedziałem, możesz używać scrollView tylko dla TextView.

Andro Selva
źródło
Gdzie
kończysz scrollView w
1
Przepraszam moja wina. Zredagowałem odpowiedź teraz. Musisz to zakończyć na końcu.
Andro Selva,
Pracował dla mnie. Musiałem wypaczać mój LinearLayout w ScrollView.
zeeshan
Klasa TextView dba również o własne przewijanie, więc nie wymaga ScrollView, ale użycie dwóch razem jest możliwe, aby uzyskać efekt widoku tekstowego w większym kontenerze. Cytat z: developer.android.com/reference/android/widget/ScrollView.html
metis
14

Scrollview to specjalny rodzaj FrameLayout w to, że pozwala użytkownikom, aby przewinąć listę widoków, które zajmują więcej miejsca niż fizyczne display.I prostu dodać kilka atrybutów.

<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
źródło
8

Jak wspomniano powyżej, możesz umieścić go w ScrollView... a jeśli chcesz, aby Scroll View był ustawiony poziomo, umieść go w środku HorizontalScrollView... i jeśli chcesz, aby twój komponent (lub układ) obsługiwał oba te elementy w ten sposób:

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

oraz z ustawieniem layout_widthi layout_heightoczywiście.

Zuhair Kj
źródło
+1 tylko za podkreślenie znaczenia ustawienia layout_width i layout_height
Arunkumar 28.04.13
4

Umieść swój TableLayout w układzie ScrollView, co rozwiąże Twój problem.

Rasel
źródło
4

Aby przewijać dane w widoku tekstowym, możesz użyć tego do widoku tekstowego. i dodaj, a dla dowolnego innego układu możesz po prostu dodać widok przewijania w układzie, jak mówią ludzie powyżej.

/ ** android: scrollable = true w widoku tekstu w układzie xml.

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

* //

Sandip Lawate
źródło
-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
źródło