Android - कैसे एक स्क्रॉल करने योग्य बाधा बनाने के लिए?


150

मैं एक लेआउट बनाना चाहता हूं जो मुझे बाधा लेआउट का उपयोग करने की अनुमति देता है, लेकिन मुझे नहीं पता कि इसके बारे में कैसे जाना जाए। क्या इस तरह ScrollViewका जनक होना चाहिए ConstraintLayout?

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

<android.support.constraint.ConstraintLayout
    android:id="@+id/Constraint"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

या फिर इसके विपरीत? हो सकता है कि कोई मुझे इस पर एक अच्छे ट्यूटोरियल की ओर इशारा कर सकता है या एक उदाहरण दे सकता है, मैं किसी को ढूंढ नहीं सकता।

इसके अलावा, मुझे नहीं पता कि यह बग या कुछ कॉन्फ़िगरेशन है जिसे मैंने सेट नहीं किया है, लेकिन मैंने इस तरह की छवियां देखी हैं:

यहां छवि विवरण दर्ज करें

जहां ब्लूप्रिंट "नीली आयत" के बाहर कुछ घटक हैं, फिर भी वे दिखाई देते हैं, जबकि मेरी तरफ से अगर मैं "व्हाइट स्पेस" पर एक घटक रखता हूं तो मैं इसे देख नहीं सकता या इसे कहीं भी स्थानांतरित नहीं कर सकता, और यह घटक पेड़ पर दिखाई देता है ।

अपडेट करें :

मुझे डिज़ाइन टूल में कंस्ट्रक्शन लेआउट को स्क्रॉल करने योग्य बनाने के लिए एक रास्ता मिला, एक क्षैतिज दिशानिर्देश का उपयोग करते हुए बाधा लेआउट बॉर्डर को नीचे धकेलने और इसे डिवाइस से परे विस्तारित करने के लिए, इसके बाद, आप दिशा निर्देश को कंस्ट्रक्शन लेआउट के नए तल के रूप में उपयोग कर सकते हैं घटकों लंगर।

जवाबों:


85

ऐसा लगता है कि यह काम कर रहा है, मुझे नहीं पता कि आप किस निर्भरता के साथ काम कर रहे थे

compile 'com.android.support.constraint:constraint-layout:1.0.2'

काम कर रहा है, यही मैंने किया है

<?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="match_parent"
    tools:context=".MainActivity">

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

        <android.support.design.widget.TextInputLayout
            android:id="@+id/til_input"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:hint="Escriba el contenido del archivo"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/btn_save"
            app:layout_constraintTop_toTopOf="@id/btn_save"
            app:layout_constraintVertical_chainStyle="spread">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </android.support.design.widget.TextInputLayout>

        <Button
            android:id="@+id/btn_save"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="onClickButtonSave"
            android:text="Guardar"
            app:layout_constraintLeft_toRightOf="@+id/til_input"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/txt_content"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="0dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/til_input"
            app:layout_constraintVertical_chainStyle="spread"
            app:layout_constraintVertical_weight="1" />

        <Button
            android:id="@+id/btn_delete"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:onClick="onClickButtonDelete"
            android:text="Eliminar"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/txt_content"
            app:layout_constraintVertical_chainStyle="spread" />

    </android.support.constraint.ConstraintLayout>

</ScrollView>

स्क्रॉल शीर्षयहां छवि विवरण दर्ज करें

नीचे स्क्रॉल करेंयहां छवि विवरण दर्ज करें


3
धन्यवाद, समस्या यह थी कि मैं पूर्वावलोकन पर स्क्रॉल नहीं कर सकता था, इसलिए वहां कुछ बनाना असंभव था, लेकिन मुझे पता चला कि एक दिशानिर्देश का उपयोग करके मैं खाली स्क्रॉल करने योग्य स्थान बनाने के लिए लेआउट को नीचे खींच सकता हूं और जब मैं काम कर सकता हूं तो इसे हटा दें
gtovar

2
यह उत्तर शीर्ष पर होना चाहिए!
कोस्टानोस

60

एक प्रकार की बाधा है जो स्क्रॉल फ़ंक्शन को तोड़ती है:

बस यह सुनिश्चित करें कि आप इस बाधा का उपयोग किसी भी दृष्टिकोण पर नहीं कर रहे हैं जब आप चाहते हैं कि आपके ConstraintLayoutसाथ स्क्रॉल किया जा सके ScrollView:

app:layout_constraintBottom_toBottomOf=“parent

यदि आप इन्हें हटाते हैं तो आपका स्क्रॉल काम करना चाहिए।

स्पष्टीकरण:

ScrollViewमाता-पिता से मेल खाने के लिए बच्चे की ऊंचाई निर्धारित करना घटक को करने के लिए विरोधाभासी है। जब हम चाहते हैं कि अधिकांश समय कुछ गतिशील आकार की सामग्री को स्क्रॉल करने योग्य हो, जब यह स्क्रीन / फ्रेम से बड़ा हो; माता-पिता के साथ ऊंचाई का मिलान ScrollViewसभी सामग्री को एक निश्चित फ्रेम (माता-पिता की ऊंचाई) में प्रदर्शित करने के लिए मजबूर करेगा, इसलिए किसी भी स्क्रॉलिंग कार्यक्षमता को अमान्य करना।

यह तब भी होता है जब नियमित रूप से प्रत्यक्ष बाल घटक निर्धारित किए जाते हैं layout_height="match_parent"

यदि आप चाहते हैं कि ScrollViewजब पर्याप्त सामग्री न हो तो बच्चे का माता-पिता की ऊंचाई से मेल खाना, बस इसके android:fillViewportलिए सही होना चाहिए ScrollView


1
@BasilBattikhi जोड़ा एक विवरण
SuppressWarnings

3
लानत है यह वास्तव में काम किया! मुझे गंभीरता से स्क्रॉल दृश्य से नफरत है।
उदय

2
धन्यवाद @SuppressWarnings, वास्तव में इसकी सराहना करते हैं। आप "ऐप हटाने का संकेत देते हैं: लेआउट_कॉस्ट्रैटिनबॉटम_टू बॉटॉमऑफ =" माता-पिता "" 100% काम करें
जिग्नेश

1
+1, वास्तव में उपयोगी है, मुझे नहीं पता था कि मेरे स्क्रॉलव्यू के अंदर की वस्तुएं उस स्थान पर पोजीशन नहीं कर रही थीं जो मैं चाहता था।
जेसुअस हगिवारा

1
हाँ ठीक है ... लेकिन उसी आवश्यकता को प्राप्त करने के लिए मैंने ऊपर बताए दृष्टिकोण का पालन करें।
राघव शर्मा

28

व्यूपोर्ट के साथ NestedScrollView का उपयोग करना मेरे लिए अच्छा काम कर रहा है

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

Android x के लिए इसका उपयोग करें

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

</androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>

4
धन्यवाद! यह वही है जो मैं देख रहा था - android: fillViewport = "true" कुंजी है।
प्रैट

यदि आप AppBarLayout का उपयोग कर रहे हैं, तो nestedscrollview के अंदर जोड़ना न भूलेंapp:layout_behavior="@string/appbar_scrolling_view_behavior"
majurageerthan

1
आज तक, यह सही उत्तर है!
माद्री

11

संक्षेप में, आप मूल रूप से अपने लेआउट से जुड़ी फ़ाइल के पाठ के भीतर अपना android.support.constraint.ConstraintLayoutदृष्टिकोण लपेटते हैं ।ScrollView*.xml

उदाहरण गतिविधि_ sign_in.xml

<?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="match_parent"
    tools:context=".SignInActivity"> <!-- usually the name of the Java file associated with this activity -->

    <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="match_parent"
        android:background="@drawable/gradient"
        tools:context="app.android.SignInActivity">

        <!-- all the layout details of your page -->

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

नोट 1: स्क्रॉल बार केवल तभी दिखाई देते हैं, जब कीबोर्ड को पॉप अप करने सहित किसी भी तरह से रैप की आवश्यकता होती है।

नोट 2: यह सुनिश्चित करना भी बुरा नहीं होगा कि यह सुनिश्चित करने के लिए कि आपका कॉन्स्ट्रेण्टलैटआउट किसी भी दिए गए स्क्रीन के नीचे और किनारों तक पहुँचने के लिए पर्याप्त है, खासकर यदि आपके पास एक पृष्ठभूमि है, क्योंकि इससे यह सुनिश्चित होगा कि विषम व्हाट्सएप नहीं है । आप रिक्त स्थान के साथ ऐसा कर सकते हैं अगर कुछ और नहीं।


9

बस का उपयोग करें NestedScrollViewया अंदर बाधा लेआउट ScrollView

<android.support.v4.widget.NestedScrollView
        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.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white">

 </android.support.constraint.ConstraintLayout>

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

बस। अपनी कोडिंग का आनंद लें।


4

स्क्रॉल करने योग्य लेआउट बनाने के लिए, लेआउट सही है। यह स्क्रॉल करने योग्य नहीं होगा जब तक कि स्क्रॉल करने का कारण नहीं है (किसी अन्य लेआउट की तरह)। इसलिए पर्याप्त सामग्री जोड़ें और यह किसी भी लेआउट (रैखिक, रिश्तेदार, आदि) की तरह स्क्रॉल करने योग्य होगा। हालाँकि, आप ब्लूप्रिंट या डिज़ाइन-मोड में ठीक से स्क्रॉल नहीं कर सकते हैं ConstprintintLayout और ScrollView के साथ डिज़ाइन करते समय ।

अर्थ:

आप एक स्क्रॉल करने योग्य कांस्टीट्यूएंटआउट बना सकते हैं, लेकिन यह बग / परिदृश्य के कारण संपादक में ठीक से स्क्रॉल नहीं करेगा, जिस पर विचार नहीं किया गया था। लेकिन भले ही स्क्रॉल संपादक में काम नहीं करता है, यह उपकरणों पर काम करता है। (मैंने कई स्क्रॉल COnstraintLayouts किए हैं, इसलिए मैंने इसका परीक्षण किया है)

ध्यान दें

अपने कोड के बारे में। स्क्रॉलव्यू एक समापन टैग गायब है, मुझे नहीं पता कि यह फ़ाइल में है या यदि यह कॉपी-पेस्ट मिस है, लेकिन आप इसे देखना चाहते हैं।


1
एक स्क्रॉल करने योग्य बाधा को डिजाइन करने के लिए, सीएल की वर्तमान स्थिति में, आप डिवाइस की ऊंचाई का विस्तार कर सकते हैं और इसे कस्टम बना सकते हैं। लेआउट्स (स्क्रॉलव्यू और सीएल) की ऊँचाई को एक उच्च संख्या (जैसे 2000DP) पर सेट करें और सामान्य डिज़ाइनिंग करें। ध्यान दें कि आपको विस्तार को संभालने के लिए एक अच्छे कंप्यूटर की आवश्यकता है, क्योंकि वास्तव में बड़े कस्टम डिवाइस कंप्यूटर से बहुत अधिक मांग करते हैं। यह शर्म की बात है कि SC SCViewView के साथ डिजाइनिंग का समर्थन नहीं करता है, लेकिन इसमें वर्कअराउंड हैं। जैसे कि डिवाइस की ऊंचाई का विस्तार करना।
ज़ो

3

पिछले उत्तरों को पूरा करने के लिए मैं निम्नलिखित उदाहरण जोड़ रहा हूं, जो कि AppBar के उपयोग को भी ध्यान में रखता है। इस कोड के साथ, एंड्रॉइड स्टूडियो डिज़ाइन एडिटर कॉन्सट्रैटल लयआउट के साथ ठीक काम करता है।

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout
    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:fitsSystemWindows="true"
    android:background="@drawable/bg"
    android:orientation="vertical">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.ActionBar.AppOverlayTheme">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>

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

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

        <ImageView
            android:id="@+id/image_id"
            android:layout_width="match_parent"
            android:layout_height="@dimen/app_bar_height"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:src="@drawable/intro"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="parent" />

        <TextView
            android:id="@+id/desc_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/text_margin"
            android:text="@string/intro_desc"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/image_id" />

        <Button
            android:id="@+id/button_scan"
            style="?android:textAppearanceSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:backgroundTint="@color/colorAccent"
            android:padding="8dp"
            android:text="@string/intro_button_scan"
            android:textStyle="bold"
            app:layout_constraintTop_toBottomOf="@+id/desc_id" />

        <Button
            android:id="@+id/button_return"
            style="?android:textAppearanceSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="8dp"
            android:backgroundTint="@color/colorAccent"
            android:padding="8dp"
            android:text="@string/intro_button_return"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/button_recycle" />

        <Button
            android:id="@+id/button_recycle"
            style="?android:textAppearanceSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:backgroundTint="@color/colorAccent"
            android:padding="8dp"
            android:text="@string/intro_button_recycle"
            android:textStyle="bold"
            app:layout_constraintTop_toBottomOf="@+id/button_scan" />
    </android.support.constraint.ConstraintLayout>
</ScrollView>
</LinearLayout>

2

आपको स्क्रॉल दृश्य टैग के साथ मेरे बाधा-लेआउट को घेरने की आवश्यकता है और इसे संपत्ति दी Android: isScrollContainer = "true"।


1

संस्करण 2.2 में एक बग है जो कांस्ट्रेनल लयआउट को स्क्रॉल करना असंभव बनाता है। मुझे लगता है कि यह अभी भी मौजूद है। आप वैकल्पिक रूप से LinearLayout या RelativeLayout का उपयोग कर सकते हैं।

इसके अलावा, बाहर की जाँच करें: क्या स्क्रॉल स्क्रॉल के अंदर एक बाधा लेआउट डालना संभव है


इसके बजाय RelativeLayout का उपयोग करके सुझाव दें, यह ConstraintLayout के सबसे करीब है
Zoe

बग को ठीक कर दिया गया है।
X09

1

एक नए ऐप के लिए कॉन्स्ट्रेन्थेलेआउट डिफ़ॉल्ट है। मैं अब "Android पर सीख रहा हूँ" और एक बहुत कठिन समय था जब कीबोर्ड के उठने पर स्क्रॉल करने के लिए डिफ़ॉल्ट "नमूना" कोड को संभालना था। मैंने कई ऐप देखे हैं जहां मुझे "सबमिट" बटन पर क्लिक करने के लिए कीबोर्ड बंद करना पड़ता है और कभी-कभी यह दूर नहीं जाता है। इस [ScrollView / ContraintLayout / फ़ील्ड्स] पदानुक्रम का उपयोग करके यह अभी ठीक काम कर रहा है। इस तरह से हम एक स्क्रॉल दृश्य में कांस्ट्रेन्डलैटआउट से लाभ और आसानी का उपयोग कर सकते हैं।


1

नेस्टसेक्रोलव्यू के नीचे के बटन को बाहर निकालें और पैरेंटली के रूप में लीनियरआउटआउट लें। अपने बच्चों के रूप में नीचे और नेस्ट्सक्रॉलव्यू जोड़ें। यह बिल्कुल ठीक काम करेगा। गतिविधि का उपयोग करने के लिए इसे प्रकट करें - यह कीबोर्ड को खोलने पर बटन उठाएगा

android:windowSoftInputMode="adjustResize|stateVisible"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
    android:orientation="vertical">

    <androidx.core.widget.NestedScrollView xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:fillViewport="true">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/input_city_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="20dp"
                android:layout_marginTop="32dp"
                android:layout_marginEnd="20dp"
                android:hint="@string/city_name"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <com.google.android.material.textfield.TextInputEditText
                    android:id="@+id/city_name"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:digits="abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ"
                    android:lines="1"
                    android:maxLength="100"
                    android:textSize="16sp" />

            </com.google.android.material.textfield.TextInputLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.core.widget.NestedScrollView>

    <Button
        android:id="@+id/submit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:onClick="onSubmit"
        android:padding="12dp"
        android:text="@string/string_continue"
        android:textColor="#FFFFFF"
        app:layout_constraintBottom_toBottomOf="parent" />

</LinearLayout>


0

मैंने इसे कैसे हल किया है:
यदि आप नेस्ट स्क्रॉल का उपयोग कर रहे हैं अर्थात स्क्रॉल एक कॉन्स्ट्रेन्थ लयआउट के भीतर, तो "WRAP_CONTENT" या "MATCH_PARENT" के बजाय स्क्रॉल दृश्य के लिए निम्न कॉन्फ़िगरेशन का उपयोग करें:


<ScrollView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/someOtherWidget"
    app:layout_constraintTop_toTopOf="parent">

0

स्क्रोलव्यू में ऊँचाई और चौड़ाई में 0 जोड़ें Top_toBottomOfand bottom_toTopOf बाधाएं।


कृपया इस उत्तर को और अधिक समझाएं, जैसे कि लागू करने के लिए कोड का एक उदाहरण।
जेक

0

मेरे लिए, नीचे की बाधाओं को दूर करने और न ही स्क्रॉल कंटेनर को सच करने के बारे में कोई भी सुझाव काम नहीं कर रहा था। क्या काम किया: मेरे लेआउट में व्यक्तिगत / नेस्टेड विचारों की ऊंचाई का विस्तार करें ताकि वे नीचे दिखाए गए अनुसार कॉन्स्ट्रेन्थ लेआउट एडिटर के "विस्तृत रूप से" विकल्प का उपयोग करके माता-पिता से परे "फैला" सकें।

किसी भी दृष्टिकोण के लिए, यह महत्वपूर्ण है कि बिंदीदार पूर्वावलोकन लाइनें माता-पिता के ऊपर या नीचे के आयामों से परे लंबवत विस्तारित हों

विस्तृत रूप से विस्तार करें

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.