Theory
वे Rules जिन्हें कोई पढ़ नहीं सका
Garba Night details screen बढ़ी: poster, description, timing, dress code, 12 rules। आपके emulator पर यह fit हुई। एक classmate के smaller phone पर, rule 4 के बाद सब कुछ simply exist ही नहीं करता था: कोई error नहीं, कोई hint नहीं, बस clipped।
Android layouts अपने आप scroll नहीं होते; screen के edge के बाद का content silently invisible है। Fix एक wrapper है जिसका पूरा काम scrolling है: ScrollView: plus इसका sideways twin, और children के बारे में एक strict law।
Theory
दो Scrollers, Formally
ScrollView अपने content को vertically scroll करता है: reading direction: long forms, detail pages, rules।
HorizontalScrollView sideways travel के लिए एक separate widget है: photo strips, sponsor logos, filter chips की एक row।
एक widget, एक axis: vertical ScrollView sideways scroll नहीं करता, और classic toolkit में कोई both-axes scroller नहीं है (rare map-like need के लिए एक को दूसरे के अंदर nest कीजिए)।
Sizing habit: scroller को match_parent height मिलती है; इसका content wraps: wrap_content।
Formula
One-Child Law
एक ScrollView (और इसका horizontal twin) exactly ONE direct child hold कर सकता है।
दो TextViews जो सीधे इसके अंदर placed हों inflate भी नहीं होंगे: IllegalStateException: ScrollView can host only one direct child।
Pattern, हमेशा: ONE layout अंदर रखिए (ScrollView के लिए एक vertical LinearLayout, HorizontalScrollView के लिए एक horizontal), और सब कुछ उस layout के अंदर stack कीजिए। एक wrapper, एक child, unlimited grandchildren।
Practical
event_details.xml: Scrolling Page + Sponsor Strip
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- the ONE direct child -->
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView android:id="@+id/poster"
android:layout_width="match_parent"
android:layout_height="220dp" />
<TextView android:id="@+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- sideways strip inside the vertical page -->
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!-- sponsor ImageViews line up here -->
</LinearLayout>
</HorizontalScrollView>
<TextView android:id="@+id/rules"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
This example runs in Gri-Learn on the web, where you can edit it and see the output.
Quiz
एक layout 2 TextViews सीधे एक ScrollView के अंदर रखता है। Screen खुलने पर क्या होता है?
- दोनों दिखते हैं; ScrollView उन्हें LinearLayout की तरह vertically stack करता है
- App inflate time पर crash होता है: ScrollView सिर्फ़ एक direct child host कर सकता है
- सिर्फ़ पहला TextView दिखता है; दूसरा एक warning के साथ ignore होता है
- वे overlap होते हैं, दोनों top से anchored
Show the answer
App inflate time पर crash होता है: ScrollView सिर्फ़ एक direct child host कर सकता है
One-child law XML inflate होते ही एक IllegalStateException से enforce होता है: screen कभी appear ही नहीं होती। ScrollView एक scrolling WRAPPER है, stacking layout नहीं: children arrange करना एक LinearLayout का काम है, यही exactly वजह है canonical structure ScrollView है जो एक LinearLayout hold करता है जो सब कुछ hold करता है। Option A ScrollView को ऐसी abilities देता है जो इसके पास deliberately नहीं हैं; options C और D ऐसी mercies (silent ignoring, overlap) describe करते हैं जो दूसरे containers दिखाते हैं पर ScrollView refuse करता है। एक wrapper, एक child: grandchildren unlimited हैं।
Think first
Scroller जिसने ListView खा लिया
एक classmate पिछले lesson की event ListView को details ScrollView के अंदर wrap करता है ताकि पूरी page साथ scroll हो। दो distinct चीज़ें ग़लत होती हैं। हर widget कैसे scroll करता है यह इस्तेमाल करते हुए इन्हें reason कीजिए, फिर tap कीजिए।
Show the answer
Gesture War: दोनों widgets vertical swipes claim करते हैं; touch एक को जाता है और दूसरा कभी properly scroll नहीं होता: list एक stunted strip बन जाती है। Recycling मरती है: ScrollView के अंदर, ListView अपनी FULL content height तक measured होती है (scroller को अपने child का size जानना ज़रूरी है), तो सारी 10000 rows एक साथ inflate होती हैं: ListView lesson का thali system 10000 plates में collapse हो जाता है। Rule: एक ListView खुद को scroll करती है, कभी एक scroller में wrapped नहीं; long mixed pages या तो extra content list के header/footer views में डालती हैं, या mix avoid करती हैं।
Watch out
Scroll Traps
Invisible Clipping: कोई scroller नहीं मतलब screen edge के बाद का content silently vanish होता है: SMALL screen पर test कीजिए, सिर्फ़ अपने emulator पर नहीं।
Wrong Axis: एक HorizontalScrollView में text wrap नहीं होगा और sideways walk off होगा; reading content को vertical वाला चाहिए।
Short Content, Ugly Gap: एक ScrollView जिसका content screen से छोटा है dead space छोड़ता है; android:fillViewport="true" child को stretch करके fill करता है।
Scroller के अंदर Scroller (Same Axis): ListView story फिर से: कोई भी दो same-axis scrollers लड़ते हैं।
Theory
Scrolling एक Wrapper है, एक Property नहीं
रखने लायक design insight: Android में, scrolling एक layout पर checkbox नहीं है: यह एक CONTAINER है जो आप deliberately add करते हैं, exactly एक child के around, एक बार में एक axis। (Flutter, Unit 3 में wait करते हुए, SingleChildScrollView से वही move करता है: नाम same law confess करता है।) अगला lesson search box सोचना सीखती है: AutoCompleteTextView TextWatcher की पूरी machinery के साथ BCA305-02 से एक deeper second pass के लिए लौटती है।
Summary
Key takeaways
- ScrollView vertically scroll करता है; HorizontalScrollView separate sideways widget है: हर एक की एक axis।
- हर एक exactly ONE direct child hold कर सकता है: इसके अंदर एक single LinearLayout में content wrap कीजिए।
- दो direct children = inflate पर IllegalStateException: screen कभी नहीं खुलती।
- एक ListView को कभी एक ScrollView में wrap मत कीजिए: gestures लड़ते हैं और recycling टूटती है।
- fillViewport="true" short content को screen fill करने के लिए stretch करता है।
- बिना scroller के screen edge के बाद का content silently clip होता है: small screens test कीजिए।
- Memory hook: एक wrapper, एक axis, एक child।