เป็นไปได้ไหมที่จะใส่ ConstraintLayout ไว้ใน ScrollView


111

ดังนั้นเมื่อเร็ว ๆ นี้พร้อมกับ Android 2.2 สตูดิโอมี ConstraintLayout ใหม่ที่ทำให้การออกแบบมากขึ้น แต่ไม่เหมือนRelativeLayoutและLinearlayoutผมไม่สามารถใช้ในการเซอร์ราวด์ScrollView ConstraintLayotเป็นไปได้หรือไม่ ถ้าเป็นเช่นนั้นอย่างไร?

กล่าวคือ

<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:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="0dp">

        <android.support.constraint.ConstraintLayout
            android:id="@+id/constraintLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:layout_editor_absoluteX="0dp"
            tools:layout_editor_absoluteY="0dp">

            <!-- Have whatever children you want inside -->

        </android.support.constraint.ConstraintLayout>

</ScrollView>

3
อะไรที่ทำให้คุณไม่ทำสิ่งนี้ คุณสามารถเพิ่มหนึ่งใน XML ได้โดยตรง ...
Karakuri

คุณควรเพิ่มรหัสและข้อผิดพลาดที่คุณได้รับ
Alok

2
ถ้าฉันใช้layout_height="wrap_content"แอพจะแสดงหน้าจอว่างเปล่า แต่ถ้าฉันใช้layout_height="match_parent"แอพจะไม่เลื่อน
Seth Painter

เห็นได้ชัดว่าเมื่อตั้งค่า layout_height เป็น "wrap_content" ConstraintLayout โดยไม่สนใจว่าเป็นลูกและยุบ ในกรณีนี้แม้ว่าองค์ประกอบลูกจะกำหนดข้อ จำกัด เกี่ยวกับด้านบนและด้านล่างของ ConstraintLayout (เช่นระยะขอบ)
Jakub Mendyk

1
มีอะไรที่สามารถทำได้เพื่อเลื่อนเค้าโครงข้อ จำกัด หรือฉันควรย้อนกลับไปใช้เค้าโครงอื่น
Seth Painter

คำตอบ:


98

มีข้อบกพร่องเกี่ยวกับ ConstraintLayout ใน ScrollViews และได้รับการแก้ไขแล้ว Google ได้แก้ไขข้อบกพร่องใน Android Studio 2.2 Preview 2 (constraintlayout 1.0.0-alpha2)

ตรวจสอบลิงค์นี้เพื่อดูการอัปเดตใหม่ (ดูตัวอย่าง 2): ทำงานได้อย่างถูกต้องใน ScrollView และ RecycleView

แนวทางที่ 1:

วิธีแก้ปัญหาคือการใช้android:fillViewport="true"กับไฟล์ ScrollView

แนวทางที่ 2:

ใช้NestedScrollViewแทนScrollViewด้วยandroid:fillViewport="true"

แก้ไข - 16/9/20:

ปัจจุบันการใช้ ScrollView กับความสูงของ ConstraintLayout ที่ตั้งค่าเป็น wrap_content เป็นเรื่องปกติมากขึ้นซึ่งทำงานได้ดีอย่าลืม FillViewPort และทั้ง Scroll และ Nested รองรับลูกโดยตรงเพียงคนเดียว


13
ปรากฏว่าไม่ได้แก้ไข ยังไม่สามารถใช้งานได้ในเวอร์ชันที่ใช้งานจริง
SimonH

3
สามารถยืนยัน. ไม่ได้รับการแก้ไขแม้ใน 2.3.3
มูฮัมหมัดบาบาร์

2
ดูวิธีแก้ปัญหาด้านล่าง
eric.mcgregor

การเพิ่ม android: fillViewport = "true" บน ScrollView ใช้งานได้ Android Studio 4.0.1
Rupam Das

232

ลองเพิ่มandroid:fillViewport="true"ใน ScrollView

พบวิธีแก้ปัญหาที่นี่: LinearLayout ไม่ขยายภายใน ScrollView


2
งานนี้สมบูรณ์แบบสำหรับฉันขอบคุณ @ eric.mcgregor
Harin Kaklotar

4
คุณช่วยชีวิตฉัน!
faraz khonsari

1
ใช้งานได้แม้ใน Android Studio 3.0 !!
learn2code

ฮีโร่ของฉันไปแล้ว
Paul Alexander

2
บันทึกวันของฉัน! สิ่งนี้ควรเปลี่ยนเป็นคำตอบที่ยอมรับ
Pham

57

ใช้NestedScrollViewกับวิวพอร์ต True ทำงานได้ดีสำหรับฉัน

<android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="700dp">

        </android.support.constraint.ConstraintLayout>

</android.support.v4.widget.NestedScrollView>

คุณครับช่วยวันของฉัน นี่ควรเป็นคำตอบที่ได้รับการยอมรับ
ЄвгенГарастович

12

ตั้งScrollView layout_heightเป็นwrap_contentแล้วมันจะทำงานได้ดี ด้านล่างนี้เป็นตัวอย่างที่อาจช่วยใครบางคนได้ ฉันใช้compile 'com.android.support.constraint:constraint-layout:1.0.2'สำหรับเลย์เอาต์ข้อ จำกัด

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    android:orientation="vertical"
    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:id="@+id/activity_main"
    tools:context=".ScrollViewActivity">

    <ScrollView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        >

        <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="wrap_content"
            android:orientation="vertical"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:scrollbars="vertical">

            <TextView
                android:id="@+id/tvCommonSurname"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="surname"
                android:textAppearance="?android:attr/textAppearanceLarge"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintTop_creator="1" />

            <EditText
                android:id="@+id/editText3"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:ems="10"
                android:inputType="text"
                android:maxLines="1"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvCommonSurname"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintRight_creator="1"
                tools:layout_constraintTop_creator="1" />

            <TextView
                android:id="@+id/tvCommonName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="firstName"
                android:textAppearance="?android:attr/textAppearanceLarge"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/editText3"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintTop_creator="1" />

            <EditText
                android:id="@+id/editText"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:ems="10"
                android:inputType="text"
                android:maxLines="1"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvCommonName"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintRight_creator="1"
                tools:layout_constraintTop_creator="1" />

            <TextView
                android:id="@+id/tvCommonLastName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="middleName"
                android:textAppearance="?android:attr/textAppearanceLarge"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/editText"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintTop_creator="1" />

            <EditText
                android:id="@+id/editText2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:ems="10"
                android:inputType="text"
                android:maxLines="1"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvCommonLastName"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintRight_creator="1"
                tools:layout_constraintTop_creator="1" />

            <TextView
                android:id="@+id/tvCommonPhone"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="Phone number"
                android:textAppearance="?android:attr/textAppearanceLarge"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/editText2"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintTop_creator="1" />

            <EditText
                android:id="@+id/editText4"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:digits="0123456789"
                android:ems="10"
                android:inputType="phone"
                android:maxLength="10"
                android:maxLines="1"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvCommonPhone"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintRight_creator="1"
                tools:layout_constraintTop_creator="1" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="sex"
                android:textAppearance="?android:attr/textAppearanceLarge"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/editText4"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintTop_creator="1" />

            <RadioGroup 
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/radiogroup"
                android:layout_width="0dp"
                android:layout_height="48dp"
                android:layout_marginTop="8dp"
                android:orientation="horizontal"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textView3"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintTop_creator="1">

                <RadioButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="pirates" />

                <RadioButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="ninjas" />
            </RadioGroup>

            <TextView
                android:id="@+id/tvCommonDOB"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="dob"
                android:textAppearance="?android:attr/textAppearanceLarge"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/radiogroup"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintTop_creator="1" />

            <EditText
                android:id="@+id/editText5"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:ems="10"
                android:inputType="date"
                android:maxLines="1"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvCommonDOB"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintRight_creator="1"
                tools:layout_constraintTop_creator="1" />

            <TextView
                android:id="@+id/tvCommonLivingCity"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="livingCity"
                android:textAppearance="?android:attr/textAppearanceLarge"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/editText5"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintTop_creator="1" />

            <EditText
                android:id="@+id/editText34"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:ems="10"
                android:inputType="text"
                android:maxLines="1"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvCommonLivingCity"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintRight_creator="1"
                tools:layout_constraintTop_creator="1" />

            <TextView
                android:id="@+id/tvCommonPlaceOfBithday"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="placeOfBirth"
                android:textAppearance="?android:attr/textAppearanceLarge"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/editText34"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintTop_creator="1" />

            <EditText
                android:id="@+id/editText6"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:ems="10"
                android:inputType="text"
                android:maxLines="1"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/tvCommonPlaceOfBithday"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintRight_creator="1"
                tools:layout_constraintTop_creator="1" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="education"
                android:textAppearance="?android:attr/textAppearanceLarge"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/editText6"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintTop_creator="1" />

            <Spinner
                android:id="@+id/spinner_id"
                android:layout_width="0dp"
                android:layout_height="48dp"
                android:layout_marginTop="8dp"
                android:spinnerMode="dialog"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textView4"
                tools:layout_constraintLeft_creator="1"
                tools:layout_constraintRight_creator="1"
                tools:layout_constraintTop_creator="1" />

        </android.support.constraint.ConstraintLayout>
    </ScrollView>


</android.support.constraint.ConstraintLayout>

3
เหตุใด ConstraintLayout จึงอยู่ภายในและภายนอก ScrollView ScrollView ควรเป็นองค์ประกอบรูทที่มี ConstraintLayout อยู่ข้างในหรือไม่
Diego Malone

10

อย่าลืมว่าหากคุณ จำกัด ด้านล่างของมุมมองบางส่วนไว้ที่ด้านล่างของเลย์เอาต์ที่ จำกัด Scrollview จะไม่สามารถเลื่อนได้


อันที่จริงฉันค่อนข้างประสบปัญหานี้: ฉัน จำกัด ด้านล่างของมุมมองสุดท้ายไว้ที่ค่าบางค่า แต่ Constaintlayout ไม่สามารถเลื่อนเกินรายการสุดท้ายได้
Claude Hangui

6

ลองเพิ่มช่องว่างด้านล่างให้กับเค้าโครงข้อ จำกัด ของคุณเช่นด้านล่าง

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/top"
        android:fillViewport="true">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingBottom="100dp">
        </android.support.constraint.ConstraintLayout>

    </ScrollView>

4

เนื่องจากของจริงScrollViewถูกห่อหุ้มCoordinatorLayoutด้วยToolbar...

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/list"/>

</android.support.design.widget.CoordinatorLayout>

... ฉันต้องกำหนดandroid:layout_marginTop="?attr/actionBarSize"เพื่อให้การเลื่อนทำงาน:

<?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="wrap_content"
    android:layout_marginTop="?attr/actionBarSize">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- UI elements here -->

    </android.support.constraint.ConstraintLayout>

</ScrollView>

ดังกล่าวข้างต้นยังทำงานร่วมกับแทนNestedScrollView ScrollViewการกำหนดandroid:fillViewport="true"ไม่จำเป็นสำหรับฉัน


3

ฉันใช้เวลา 2 วันในการพยายามแปลงเลย์ConstraintLayoutเอาต์เป็น Android Studio 2.2 เวอร์ชันที่เรียกว่า "เสถียร" และฉันไม่จำเป็นScrollViewต้องทำงานในดีไซน์ ฉันจะไม่เริ่มเส้นทางของการเพิ่มข้อ จำกัด ใน XML เพื่อViewsที่จะเลื่อนลงไปอีก หลังจากทั้งหมดนี้ควรจะเป็นเครื่องมือออกแบบภาพ

และจำนวนข้อผิดพลาดในการแสดงผลสแตกล้นและปัญหาธีมที่ฉันเคยทำให้ฉันสรุปได้ทั้งหมด ConstraintLayoutใช้งานยังคงเต็มไปด้วยข้อบกพร่อง ถ้าคุณไม่ได้พัฒนาเค้าโครงที่เรียบง่ายฉันจะปล่อยให้มันอยู่คนเดียวจนกว่าจะมีการทำซ้ำอีกสองสามครั้งเป็นอย่างน้อย

2 วันนี้ฉันจะไม่กลับไป


1
เริ่มดีขึ้นเรื่อย ๆ อย่าลืมใช้เวอร์ชันล่าสุดซึ่งปัจจุบันคือ 1.0.0-alpha9 และ File -> "Invalidate Caches / Restart"
goetzc

1
ขอบคุณ. นี่คือการปรับปรุง และยังลดจำนวนข้อผิดพลาดในการแสดงผล แต่ฉันก็ยังไม่มั่นใจว่ามันเสถียรพอที่ฉันจะลองแปลงเลย์เอาต์ทั้งหมดของฉันได้ ฉันตัดสินใจที่จะรอจนกว่าพวกเขาจะกำจัดแท็ก 'alpha' จนหมดและปล่อยเวอร์ชันที่ใช้งานจริง
SimonH

2

ใครก็ตามที่ตั้งค่าคุณสมบัติด้านล่างเป็น

ScrollView :android:fillViewport="true"

เค้าโครงข้อ จำกัด : android:layout_height="wrap_content"

และยังใช้งานไม่ได้จากนั้นตรวจสอบให้แน่ใจว่าคุณไม่ได้ตั้งค่าข้อ จำกัด ด้านล่างของเลย์เอาต์แบบเลื่อนด้านใน (RecycleView) ที่ด้านล่างของพาเรนต์

เพิ่มบรรทัดด้านล่างของรหัส:

android:nestedScrollingEnabled="false"
android:layout_height="wrap_content"

อย่าลืมลบข้อ จำกัด ด้านล่าง:

app:layout_constraintBottom_toBottomOf="parent"

รหัสเต็ม

   <androidx.core.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/selectHubLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".ui.hubs.SelectHubFragment">

    <include
        android:id="@+id/include"
        layout="@layout/signup_hub_selection_details"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_HubSelection"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:nestedScrollingEnabled="false"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/include" />
</androidx.constraintlayout.widget.ConstraintLayout>

-3

อย่าลืมเกี่ยวกับtools:context=".YouClassName"ทรัพย์สินในScrollView .

นี่คือสิ่งที่ทำให้แอปพลิเคชันของฉันขัดข้อง

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