Android Layout – The Fundamental Concepts

Android Layout किसी भी Android App के User Interface का Visual Structure होता है जैसाकि पिछले Example में हमने एक Activity के लिए Simple सा Layout Create किया है। ठीक इसी तरह से हम किसी App Widget के लिए भी UI Layout Create कर सकते हैं, जो कि Activity के लिए Create किए जाने वाले Layout के समान ही होता है। किसी भी तरह के Layout को दो तरीकों से Create किया जा सकता है:

• पहले तरीके के अन्‍तर्गत हम XML Codes का प्रयोग करते हुए Layout Create करते हैं, जिसमें Layout Create करने से सम्‍बंधित विभिन्‍न View Classes व Sub-Classes को XML Elements या Tags के रूप में Specify किया जाता है, जैसाकि पिछले Example में किया गया है। जबकि

• दूसरे तरीके के अन्‍तर्गत हम हमारे Android App से सम्‍बंधित विभिन्‍न Layout व UI Controls को View व ViewGroup Classes का प्रयोग करते हुए Application के Runtime में Programmatically Create करते हैं।

Android Framework हमें ये सुविधा देता है कि हम जो चाहें, वो तरीका Use करते हुए अपने Android App का UI Create कर सकते हैं अथवा दोनों तरीकों को आपस में Mix करके भी अपने Android App का Layout व User Interface Create कर सकते हैं।

लेकिन जैसाकि हमने पहले भी बताया, हमें UI को हमेंशा Declarative Form में XML Codes के माध्‍यम से ही Develop करना चाहिए, ताकि Separation of Concerns का Rule Violate न हो, जिसके अनुसार Presentation से सम्‍बंधित UI Logics को, Application के Behavior से सम्‍बंधित Program Logics से अलग रखना चाहिए। ताकि यदि भविष्‍य में कभी हमें हमारे App के Presentation यानी Layout में किसी तरह का कोई Modification करना हो, तो हमें उसके Java Program Logics को छेड़ने की जरूरत न पड़े और यदि हमें App के Behavior में किसी तरह का Modification करना हो, तो उसके Presentation से सम्‍बंधित XML Codes को Modify करने की जरूरत न पड़े।

उदाहरण के लिए हम Different Screen Sizes, Different Languages व Different Orientation के लिए Different Layouts Create कर सकते हैं और Different Layouts को XML के माध्‍यम से Create करना ही आसान होता है, क्‍योंकि यदि हम Programmatically ऐसा करेंगे, तो ढेर सारे Layouts को Control करना वैसे ही काफी मुश्किल हो जाएगा। साथ ही XML के माध्‍यम से Create किया जाने वाला Layout Visual Studio IDE के माध्‍यम से Visually भी Design हो सकता है जबकि Programmatically Design होने वाला Layout पूरी तरह से Blind होता है और App को Run करने के बाद ही पता चलता है कि हमारा Layout व UI कैसा बना और कैसा दिखाई दे रहा है।

सामान्‍यत: जब हम XML Codes के माध्‍यम से Layout Design करते हैं, तब विभिन्‍न UI Elements का नाम वास्‍तव में सम्‍बंधित Java Class का नाम होता है और XML Element में Specify किए जाने वाले Attributes का नाम उन Java Classes के Methods का नाम होता है।

हालांकि ज्‍यादातर Attributes का नाम वही होता है, जो सम्‍बंधित Class के Methods का नाम होता है, लेकिन सभी Attributes का नाम Methods के नाम के समान नहीं होता। उदाहरण के लिए EditText Element में जो text Attribute होता है, सम्‍बंधित EditText Class में उससे सम्‍बंधित Method का नाम setText() होता है।

Layout Parameters

layout something वे XML Layout Attributes होते हैं, जो किसी ViewGroup में Exist किसी View के विभिन्‍न Layout Parameters को Define करते हैं।

प्रत्‍येक ViewGroup Class वास्‍तव में एक Nested Class को Implement करता है जो कि ViewGroup.LayoutParams को Extend करता है। ये Subclass उन Property Types को Contain करता है जो अपने Container ViewGroup के अनुसार प्रत्‍येक Child View यानी Contained View की Position व Size को Define करता है।

जैसाकि हम अगले चित्र में देख सकते हैं कि Parent LayoutGroup Container अपने सभी Child Views के यहां कि कि अपने Nested ViewGroup के भी Layout Parameters को Define करता है, इसी वजह से LinearLayout ViewGroup में Nested RelativeLayout ViewGroup के लिए भी LayoutParams Define होता है यानी Nested RelativeLayout ViewGroup Container की Size व Position को भी Parent LinearLayout Container द्वारा निश्चित किया जाता है और फिर उस RelativeLayout Container द्वारा अपने Child Views के लिए Position व Size को Define किया जाता है:

यहां ध्‍यान रखने वाली एक बात ये भी है कि प्रत्‍येक LayoutParams Subclass का विभिन्‍न प्रकार की Values Set करने का स्‍वयं का अलग Syntax होता है। इसलिए प्रत्‍येक Child Element को ऐसा LayoutParams Define करना जरूरी होता है जो कि उसके Parent के लिए Appropriate हो। हालांकि Parent ViewGroup में Nested Child ViewGroup स्‍वयं अपने Child Elements के लिए अपने स्‍वयं के ऐसे LayoutParams Define कर सकता है, जो कि उसके लिए Appropriate हो, जो कि उसके Parent के LayoutParams से भिन्‍न हो सकते हैं।

प्रत्‍येक ViewGroup के अन्‍तर्गत layout_width व layout_height नाम के दो Parameters होते हैं और प्रत्‍येक ViewGroup में इन्‍हें Define करना जरूरी होता है। सामान्‍यत: इन Attributes में Value के रूप में हम wrap_content अथवा match_parent Set करते हैं और इन दोनों ही Attributes व Values के बारे में हम पिछले Section में विस्‍तार से Discussion कर चुके हैं।

हमें कभी भी किसी भी ViewGroup Layout की Height / Width को Pixels जैसी Absolute Units में Set नहीं करना चाहिए। बल्कि इसे हमेंशा Relative Measurement Units जैसे कि Density-Independent Pixel Units (dp), wrap_content अथवा match_parent Values से ही Set करना चाहिए, क्‍योंकि इन Relative Units को Use करने पर हमारा Android App Multiple Screen Sizes वाली Different Devices पर लगभग एक समान दिखाई देता है।

Layout Position

View हमेंशा एक Rectangle की तरह होता है, जिसे Screen की जिस Location पर Place किया जाना होता है, वहां का एक निश्चित Top – Left Coordinate होता है और प्रत्‍येक View Control का एक निश्चित Dimension होता है, जिसे Height – Width के रूप में Specify किया जाता है और इसके Location व Dimension को Pixel Unit के माध्‍यम से Specify किया जा सकता है।

किसी भी View Control के Location को Access करने के लिए Android SDK हमें getLeft() व getTop() नाम के दो Methods Provide करता है जो कि क्रमश: Screen के Left या X Coordinate व Top या Y Coordinate Return करता है। ये दोनों Methods Current View की Location को उसके Parent Container के संदर्भ में Return करते हैं।

उदाहरण के लिए यदि getLeft() Method Use करने पर 30 Return होता है, तो इसका मतलब यही है कि Current View Object अपने Parent Container के Left Edge से 30 Pixel Right में Positioned है।

Android SDK हमें इसी तरह के getRight() व getBottom() कई और Methods भी Provide करता है, जिनका प्रयोग करके हम बिना कोई Extra Computation किए हुए किसी भी View के Right Edge व Bottom Edge का पता लगा सकते हैं साथ ही यदि हम getRight() Method Call करते हैं, तो वास्‍तव में हम Internally getLeft() + getWidth() Method ही Call कर रहे होते हैं।

Buy this eBook to read more about…

• Size, Margins and Padding