จะใช้ ScrollView ใน Android ได้อย่างไร?


242

ฉันมีไฟล์เลย์เอาต์ XML แต่ข้อความมีขนาดพอดีกับขนาดหน้าจอมากกว่า ฉันต้องทำอะไรเพื่อที่จะได้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="veer.developer@gmail.com" />
    </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>

คำตอบ:


470

เพียงแค่สร้างเค้าโครงระดับบนสุดด้วย 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>

2
เป็นไปได้หรือไม่ที่จะให้ ScrollView ภายใต้ ScrollView หรือเพื่อให้มีหลาย scrollview ในหน้าเดียวกัน ???
Tarit Ray

2
@TaritRay - แน่นอนว่ามีหลาย ScrollViews บนหน้าจอไม่ใช่ปัญหา เลย์เอาต์หลักของผู้ปกครองจำเป็นต้องจัดเรียงเพื่อให้พวกเขาทั้งหมดมีพื้นที่บนหน้าจอ สำหรับ ScrollView หนึ่งอันในอีกอันนั้นเป็นเรื่องยาก ไลบรารีความเข้ากันได้ของ Android มีNestedScrollViewแทน มีบทเรียนมากมายบนเว็บสำหรับวิธีการใช้ NestedScrollView สำหรับแอปพลิเคชันนั้น
Ted Hopp

36

วิธีใช้ ScrollView

การใช้ScrollViewไม่ยากมาก คุณสามารถเพิ่มรูปแบบของคุณและวางสิ่งที่คุณต้องการเลื่อนภายใน ScrollViewรับเด็กเพียงคนเดียวเท่านั้นดังนั้นหากคุณต้องการใส่ของเล็ก ๆ น้อย ๆ ลงไปในนั้นคุณควรทำให้สิ่งแรกเป็นสิ่งที่คล้าย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>

หากคุณต้องการเลื่อนสิ่งต่าง ๆ ในแนวนอนให้ใช้ a HorizontalScrollView.

ทำให้เนื้อหาเต็มหน้าจอ

ดังที่ได้กล่าวไว้ในโพสต์นี้บางครั้งคุณต้องการให้ScrollViewเนื้อหาเต็มหน้าจอ ตัวอย่างเช่นหากคุณมีปุ่มบางปุ่มในตอนท้ายของ readme คุณต้องการให้ปุ่มอยู่ท้ายข้อความและที่ด้านล่างของหน้าจอแม้ว่าข้อความจะไม่เลื่อน

หากเนื้อหาเลื่อนทุกอย่างก็โอเค อย่างไรก็ตามหากเนื้อหามีขนาดเล็กกว่าขนาดของหน้าจอปุ่มจะไม่ปรากฏที่ด้านล่าง

ป้อนคำอธิบายรูปภาพที่นี่

สิ่งนี้สามารถแก้ไขได้ด้วยการผสมผสานระหว่างการใช้งานfillViewPortบนScrollViewและการใช้น้ำหนักเค้าโครงบนเนื้อหา การใช้fillViewPortทำให้การScrollViewเติมพื้นที่ผู้ปกครอง การตั้งค่าlayout_weightหนึ่งในมุมมองในLinearLayoutทำให้มุมมองนั้นขยายเพื่อเติมพื้นที่ว่างเพิ่มเติม

ป้อนคำอธิบายรูปภาพที่นี่

นี่คือ 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>

แนวคิดสำหรับคำตอบนี้มาจากคำตอบก่อนหน้านี้ที่ถูกลบไปแล้ว ( ลิงก์สำหรับผู้ใช้ 10K คน ) เนื้อหาของคำตอบนี้เป็นการปรับปรุงและดัดแปลงโพสต์นี้


2
ประหยัดเวลาได้มากสำหรับฉัน
Bhaskara Arani

31

มีสองตัวเลือก คุณสามารถทำให้เค้าโครงทั้งหมดของคุณสามารถเลื่อนได้หรือเฉพาะ TextView ที่จะเลื่อนดูได้

สำหรับกรณีแรก

<?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="veer.developer@gmail.com" >
                </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>

หรืออย่างที่ฉันบอกว่าคุณสามารถใช้ scrollView สำหรับ TextView เพียงอย่างเดียว


ที่ที่คุณจบ scrollView เช่นนี้ </ScrollView>
Chatar Veer Suthar

1
ขอโทษที่ไม่ดีของฉัน ฉันได้แก้ไขคำตอบแล้ว คุณต้องจบมันในช่วงที่ผ่านมา
Andro Selva

ทำงานให้ฉัน ฉันต้องการบิด LinearLayout ของฉันใน ScrollView
zeeshan

คลาส TextView ยังดูแลการเลื่อนของตัวเองดังนั้นไม่จำเป็นต้องใช้ ScrollView แต่การใช้ทั้งสองร่วมกันเป็นไปได้เพื่อให้ได้ผลของมุมมองข้อความภายในคอนเทนเนอร์ขนาดใหญ่ อ้างจาก: developer.android.com/reference/android/widget/ScrollView.html
Métis

14

ScrollViewเป็นชนิดพิเศษของFrameLayoutในการที่จะช่วยให้ผู้ใช้เลื่อนผ่านรายการของมุมมองที่ใช้พื้นที่มากขึ้นกว่า display.I ทางกายภาพเพียงแค่เพิ่มคุณลักษณะบางอย่าง

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

8

ดังที่ได้กล่าวไว้ข้างต้นคุณสามารถใส่ไว้ในScrollView... และถ้าคุณต้องการให้ Scroll View วางในแนวนอนHorizontalScrollView... และถ้าคุณต้องการให้ส่วนประกอบของคุณ (หรือเลย์เอาต์) เพื่อรองรับทั้งสองอย่าง

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

และด้วยการตั้งค่าlayout_widthและของlayout_heightหลักสูตร


+1 เพียงเพื่อกล่าวถึงความสำคัญของการตั้งค่า layout_width และ layout_height
Arunkumar

4

วาง TableLayout ของคุณไว้ในเค้าโครง ScrollView ซึ่งจะช่วยแก้ปัญหาของคุณ


4

เพื่อเลื่อนข้อมูลในมุมมองข้อความคุณสามารถใช้สิ่งนี้กับมุมมองข้อความของคุณ และเพิ่มและสำหรับเค้าโครงอื่น ๆ คุณสามารถเพิ่มมุมมองเลื่อนบนเค้าโครงขณะที่คนพูดด้านบน

/ ** android: scrollable = true ที่ textview ในรูปแบบ xml

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

* //


-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>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.