Android - UI डिज़ाइन

इस अध्याय में हम एंड्रॉइड स्क्रीन के विभिन्न UI घटकों को देखेंगे। यह अध्याय बेहतर UI डिज़ाइन बनाने के लिए युक्तियों को भी शामिल करता है और यह भी बताता है कि UI कैसे डिज़ाइन करें।

यूआई स्क्रीन घटक

एंड्रॉइड एप्लिकेशन के एक विशिष्ट उपयोगकर्ता इंटरफ़ेस में एक्शन बार और एप्लिकेशन सामग्री क्षेत्र शामिल हैं।

• मेन एक्शन बार
• नियंत्रण देखें
• सामग्री क्षेत्र
• स्प्लिट एक्शन बार

इन घटकों को नीचे दी गई छवि में भी दिखाया गया है -

स्क्रीन घटकों को समझना

Android एप्लिकेशन की मूल इकाई गतिविधि है। एक UI एक xml फ़ाइल में परिभाषित किया गया है। संकलन के दौरान, XML में प्रत्येक तत्व को विधियों द्वारा प्रस्तुत विशेषताओं के साथ समकक्ष एंड्रॉइड GUI वर्ग में संकलित किया जाता है।

दृश्य और दृश्य समूह

एक गतिविधि विचारों से युक्त होती है। एक दृश्य सिर्फ एक विजेट है जो स्क्रीन पर दिखाई देता है। यह बटन आदि हो सकता है। एक या एक से अधिक विचारों को एक साथ एक GroupView में वर्गीकृत किया जा सकता है। व्यूग्रुप के उदाहरण में लेआउट शामिल हैं।

लेआउट के प्रकार

कई तरह के लेआउट हैं। जिनमें से कुछ नीचे सूचीबद्ध हैं -

• रैखिक लेआउट
• पूर्ण लेआउट
• टेबल लेआउट
• फ़्रेम लेआउट
• अंतरंग परिस्थिति

रैखिक लेआउट

रैखिक लेआउट को क्षैतिज और ऊर्ध्वाधर लेआउट में विभाजित किया गया है। इसका मतलब है कि यह एक एकल स्तंभ या एक पंक्ति में विचारों को व्यवस्थित कर सकता है। यहां रैखिक लेआउट (ऊर्ध्वाधर) का कोड है जिसमें एक पाठ दृश्य शामिल है।

<?xml version=”1.0” encoding=”utf-8”?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   android:orientation=”vertical” >
   
   <TextView
      android:layout_width=”fill_parent”
      android:layout_height=”wrap_content”
      android:text=”@string/hello” />
</LinearLayout>

AbsoluteLayout

AbsoluteLayout आपको अपने बच्चों के सटीक स्थान को निर्दिष्ट करने में सक्षम बनाता है। इसे इस तरह घोषित किया जा सकता है।

<AbsoluteLayout
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
   
   <Button
      android:layout_width=”188dp”
      android:layout_height=”wrap_content”
      android:text=”Button”
      android:layout_x=”126px”
      android:layout_y=”361px” />
</AbsoluteLayout>

TableLayout

TableLayout समूह पंक्तियों और स्तंभों में विचार करता है। इसे इस तरह घोषित किया जा सकता है।

<TableLayout
   xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_height=”fill_parent”
   android:layout_width=”fill_parent” >
   
   <TableRow>
      <TextView
         android:text=”User Name:”
         android:width =”120dp”
         />
      
      <EditText
         android:id=”@+id/txtUserName”
         android:width=”200dp” />
   </TableRow>
   
</TableLayout>

अंतरंग परिस्थिति

RelativeLayout आपको यह निर्दिष्ट करने में सक्षम बनाता है कि बच्चे के विचार एक दूसरे के सापेक्ष कैसे तैनात हैं। इसे इस तरह घोषित किया जा सकता है।

<RelativeLayout
   android:id=”@+id/RLayout”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
</RelativeLayout>

FrameLayout

FrameLayout स्क्रीन पर एक प्लेसहोल्डर है जिसे आप एकल दृश्य प्रदर्शित करने के लिए उपयोग कर सकते हैं। इसे इस तरह घोषित किया जा सकता है।

<?xml version=”1.0” encoding=”utf-8”?>
<FrameLayout
   android:layout_width=”wrap_content”
   android:layout_height=”wrap_content”
   android:layout_alignLeft=”@+id/lblComments”
   android:layout_below=”@+id/lblComments”
   android:layout_centerHorizontal=”true” >
   
   <ImageView
      android:src = “@drawable/droid”
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content” />
</FrameLayout>

इन विशेषताओं के अलावा, अन्य विशेषताएँ हैं जो सभी दृश्यों और ViewGroups में सामान्य हैं। वे नीचे सूचीबद्ध हैं -

अनु क्रमांक	देखें और विवरण
1	layout_width व्यू या व्यूग्रुप की चौड़ाई निर्दिष्ट करता है
2	layout_height व्यू या व्यूग्रुप की ऊंचाई निर्दिष्ट करता है
3	layout_marginTop व्यू या व्यूग्रुप के शीर्ष पर अतिरिक्त स्थान निर्दिष्ट करता है
4	layout_marginBottom व्यू या व्यूग्रुप के नीचे की तरफ अतिरिक्त स्थान निर्दिष्ट करता है
5	layout_marginLeft व्यू या व्यूग्रुप के बाईं ओर अतिरिक्त स्थान निर्दिष्ट करता है
6	layout_marginRight व्यू या व्यूग्रुप के दाईं ओर अतिरिक्त स्थान निर्दिष्ट करता है
7	layout_gravity निर्दिष्ट करता है कि बच्चे कैसे दृश्य पोस्ट किए गए हैं
8	layout_weight निर्दिष्ट करता है कि लेआउट में कितना अतिरिक्त स्थान व्यू को आवंटित किया जाना चाहिए

माप की इकाइयाँ

जब आप एंड्रॉइड यूआई पर एक तत्व के आकार को निर्दिष्ट कर रहे हैं, तो आपको माप की निम्नलिखित इकाइयों को याद रखना चाहिए।

अनु क्रमांक	इकाई और विवरण
1	dp घनत्व-स्वतंत्र पिक्सेल। 1 डीपी 160 डीपीआई स्क्रीन पर एक पिक्सेल के बराबर है।
2	sp स्केल-स्वतंत्र पिक्सेल। यह डीपी के समान है और फ़ॉन्ट आकार निर्दिष्ट करने के लिए अनुशंसित है
3	pt बिंदु। भौतिक स्क्रीन के आकार के आधार पर, एक बिंदु को एक इंच का 1/72 माना जाता है।
4	px पिक्सेल। स्क्रीन पर वास्तविक पिक्सेल के अनुरूप

स्क्रीन घनत्व

अनु क्रमांक	घनत्व और डीपीआई
1	Low density (ldpi) 120 डीपीआई
2	Medium density (mdpi) 160 डीपीआई
3	High density (hdpi) 240 डीपीआई
4	Extra High density (xhdpi) 320 डीपीआई

अनुकूलन लेआउट

कुशल लेआउट बनाने के लिए यहां कुछ दिशानिर्देश दिए गए हैं।

• अनावश्यक घोंसले के शिकार से बचें
• बहुत सारे दृश्यों का उपयोग करने से बचें
• गहरी नेस्टिंग से बचें