Có thể đặt ConstraintLayout bên trong ScrollView không?

104

Vì vậy, gần đây, với Android Studio 2.2, có một ConstraintLayout mới giúp thiết kế dễ dàng hơn rất nhiều, nhưng không giống như RelativeLayoutvà Linearlayout, tôi không thể sử dụng a ScrollViewđể bao quanh ConstraintLayot. Điều này có khả thi không? Nếu vậy, làm thế nào?

I E 

<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>
android  android-layout  user-interface  android-constraintlayout 
— Họa sĩ Seth
nguồn
3
Điều gì ngăn cản bạn làm điều này? Bạn luôn có thể thêm một trong XML trực tiếp ...
— Karakuri
Bạn nên thêm mã và bất kỳ lỗi nào bạn đang gặp phải.
— Alok
2
Nếu tôi sử dụng layout_height="wrap_content", Ứng dụng sẽ hiển thị màn hình trống, nhưng nếu tôi sử dụng layout_height="match_parent", Ứng dụng sẽ không cuộn.
— Họa sĩ Seth
Rõ ràng khi đặt layout_height thành "wrap_content" ConstraintLayout bằng cách nào đó bỏ qua nó là con và sập. Đó là trường hợp ngay cả khi (các) phần tử con đã xác định các ràng buộc liên quan đến phần trên và dưới của ConstraintLayout (chẳng hạn như lề).
— Jakub Mendyk
1
Sau đó, có thể làm gì để tạo bố cục hạn chế cuộn không, hay tôi nên quay lại và sử dụng bố cục khác?
— Họa sĩ Seth

Câu trả lời:

83

Đã xảy ra lỗi với ConstraintLayout bên trong ScrollViews và nó đã được sửa. google đã sửa lỗi trong Android Studio 2.2 Preview 2 (bindlayout 1.0.0-alpha2).

Kiểm tra liên kết này để biết bản cập nhật mới (Xem trước 2): hoạt động bình thường bên trong ScrollView và RecycleView

Giải pháp 1:

Giải pháp là sử dụng android:fillViewport="true"trên ScrollView

Giải pháp 2:

Sử dụng NestedScrollViewthay vì ScrollViewvớiandroid:fillViewport="true"

— Govinda Paliwal
nguồn
11
Có vẻ như họ đã không sửa nó. Nó vẫn không hoạt động trong phiên bản sản xuất
— SimonH
3
Có thể xác nhận. Không cố định ngay cả trong 2.3.3.
— Muhammad Babar
2
Xem bên dưới để biết giải pháp.
— eric.mcgregor
Thêm android: fillViewport = "true" trên ScrollView đã hoạt động. Android Studio 4.0.1
— Rupam Das
228

Thử thêm android:fillViewport="true"vào ScrollView.

Đã tìm thấy giải pháp ở đây: LinearLayout không mở rộng bên trong ScrollView

— eric.mcgregor
nguồn
2
yah này công việc này một cách hoàn hảo đối với tôi nhờ @ eric.mcgregor
— Harin Kaklotar
4
u đã cứu mạng tôi!
— Faraz khonsari
1
Hoạt động ngay cả trong Android Studio 3.0 !!
— learning2code
Anh hùng của tôi đi rồi
— Paul Alexander
2
Hãy cứu lấy ngày của tôi! Điều này nên được đổi tên thành Câu trả lời được chấp nhận
— Phạm
55

sử dụng NestedScrollViewvới khung nhìn true đang hoạt động tốt cho tôi

<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>
— Chó sói Rajesh
nguồn
Ngài đã cứu một ngày của tôi. Đây phải là câu trả lời được chấp nhận.
— Євген Гарастович
11

Đặt ScrollView layout_heightnhư một wrap_contentsau đó nó sẽ hoạt động tốt. Dưới đây là ví dụ có thể giúp ai đó. Tôi đã sử dụng compile 'com.android.support.constraint:constraint-layout:1.0.2'cho bố cục ràng buộc.

<?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>
— Sakib Syed
nguồn
3
Tại sao ConstraintLayout bên trong và bên ngoài ScrollView? ScrollView có nên là phần tử gốc với ConstraintLayout bên trong không?
— Diego Malone
5

Hãy thử đặt một số đệm dưới cùng cho bố cục ràng buộc của bạn như bên dưới

    <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>
— Lửa rồng
nguồn
4

Đừng quên rằng Nếu bạn ràng buộc đáy của một số chế độ xem thành đáy của bố cục ràng buộc thì Chế độ xem cuộn không thể cuộn.

— ahmetvefa53
nguồn
Quả thực tôi hơi phải đối mặt với vấn đề này: Tôi hạn chế phía dưới cái nhìn cuối cùng của một số giá trị, nhưng Constaintlayout không thể di chuyển xa hơn mục cuối cùng
— Claude Hangui
3

Tôi đã dành 2 ngày để cố gắng chuyển đổi bố cục sang ConstraintLayoutphiên bản Android Studio 2.2 được gọi là "ổn định" và tôi không ScrollViewphải làm việc với trình thiết kế. Tôi sẽ không bắt đầu lộ trình thêm các ràng buộc trong XML cho Viewsnhững điều đó ở cuối cuộn. Sau tất cả, đây được coi là một công cụ thiết kế trực quan.

Và số lượng lỗi hiển thị, tràn ngăn xếp và các vấn đề về chủ đề mà tôi đã gặp phải đã khiến tôi kết luận rằng toàn bộ ConstraintLayoutquá trình triển khai vẫn còn nhiều lỗi. Trừ khi bạn đang phát triển các bố cục đơn giản thì tôi sẽ để nó yên cho đến khi nó có thêm một vài lần lặp lại.

Đó là 2 ngày tôi sẽ không trở lại.

— SimonH
nguồn
1
Nó đang trở nên tốt hơn, hãy đảm bảo sử dụng phiên bản mới nhất, hiện là 1.0.0-alpha9 và File -> "Invalidate Caches / Restart".
— goetzc
1
Cảm ơn. Đây là một cải tiến. Và nó đã giảm số lượng lỗi hiển thị. Nhưng tôi vẫn chưa thuyết phục rằng nó đủ ổn định để tôi thử chuyển đổi tất cả các bố cục của mình. Tôi đã quyết định đợi cho đến khi họ loại bỏ hoàn toàn thẻ 'alpha' và phát hành một phiên bản sản xuất thích hợp
— SimonH
3

Vì thực tế ScrollViewđược gói gọn trong CoordinatorLayoutmột 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>

... Tôi phải xác định android:layout_marginTop="?attr/actionBarSize"để làm cho việc cuộn:

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

Ở trên cũng hoạt động với NestedScrollViewthay vì ScrollView. Tôi android:fillViewport="true"không cần xác định .

— JJD
nguồn
-3

Đừng quên về tools:context=".YouClassName"tài sản trongScrollView .

Đó là nguyên nhân khiến ứng dụng của tôi gặp sự cố.

— Dmitry
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.