👩🏽‍🏫 👩‍👧 🛒 मूवी प्रशंसकों के लिए एक Android ऐप लिखना - भाग 2 (डिज़ाइन) 👨‍👧‍👦 🧑🏿‍🤝‍🧑🏻 🧡

नमस्कार, हेब्र!

इस लेख में, हम पहले भाग से लेआउट के आधार पर स्क्रीन बनाने की प्रक्रिया पर विचार करेंगे।

स्क्रीन लेआउट

होम स्क्रीन

मुख्य स्क्रीन में टुकड़े और नेविगेशन मेनू होंगे। आइकनों को बनाने के बाद, मेनू लिखें। ऐसा करने के लिए, ड्रा करने योग्य फ़ोल्डर खोलें, नया क्लिक करें और वेक्टर परिसंपत्तियों का चयन करें। दिखाई देने वाली विंडो में, क्लिप आर्ट पर क्लिक करें और सेटिंग्स , खोज और सामग्री पेस्ट आइकन चुनें । साइज 24 बाय 24 हो जाएगी।

मान फ़ोल्डर में एक स्ट्रिंग फ़ाइल बनाएँ और निम्न पंक्तियाँ जोड़ें:

<resources> <string name="title_home">Home</string> <string name="title_search">Search</string> <string name="title_settings">Settings</string> </resources>

एक फाइल में सभी लाइनों को डालने से आवेदन के आगे स्थानीयकरण को सरल बनाया जाएगा।
यदि आप दूसरी भाषा जोड़ना चाहते हैं, उदाहरण के लिए, रूसी, लोकेल विशेषता के साथ एक फ़ाइल बनाएं, भाषा सूची से वांछित भाषा का चयन करें और अनुवाद करने के बाद, उसी पंक्तियों को जोड़ें।

अब हम सीधे मेनू बनाने के लिए आगे बढ़ते हैं। मेनू फ़ोल्डर में, मेनू रिसोर्स फ़ाइल बनाएं, इसे " bottom_nav_menu " नाम दें और इसमें निम्न कोड जोड़ें:

 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/navigation_home" android:icon="@drawable/ic_content_paste_black_24dp" android:title="@string/title_home"/> <item android:id="@+id/navigation_search" android:icon="@drawable/ic_search_black_24dp" android:title="@string/title_search"/> <item android:id="@+id/navigation_settings" android:icon="@drawable/ic_settings_black_24dp" android:title="@string/title_settings"/> </menu>

मान फ़ोल्डर में एक शैली फ़ाइल बनाएँ और निम्न कोड जोड़ें:

 <resources> <style name="MyLinearLayout"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">match_parent</item> <item name="android:orientation">vertical</item> </style> </resources>

निर्मित शैलियों को मार्कअप फ़ाइलों और शैली फ़ाइलों को अलग करने के लिए विचारों के लिए उपयोग किया जाता है। उनमें स्वरूपण गुण होते हैं जो तत्वों की उपस्थिति और व्यवहार के लिए जिम्मेदार होते हैं। सबसे पहले, आप मार्कअप फ़ाइल में सभी विशेषताओं को लिख सकते हैं, और फिर निम्नलिखित संयोजन पर क्लिक करके स्टाइल फ़ाइल में निर्यात कर सकते हैं: आरएमबी -> रिफैक्टर -> एक्सट्रैक्ट -> स्टाइल । शैली केवल विचारों के अंदर उपलब्ध होगी। इसके बारे में यहाँ और पढ़ें।

उसके बाद, आप गतिविधि के लिए एक लेआउट बनाने के लिए सीधे आगे बढ़ सकते हैं। लेआउट फ़ोल्डर में, एक लेआउट रिसोर्स फाइल बनाएं, इसे " एक्टिविटी_मैन " नाम दें और निम्न कोड जोड़ें:

 <?xml version="1.0" encoding="utf-8"?> <FrameLayout 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" tools:context=".MainActivity" style="@style/MyLinearLayout"> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/fragment_container" android:layout_marginBottom="?attr/actionBarSize" /> <android.support.design.widget.BottomNavigationView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/nav_view" app:menu="@menu/bottom_nav_menu" android:background="#6986c2" android:layout_gravity="bottom"/> </FrameLayout>

आइए देखें क्या हुआ।

होम टैब स्क्रीन

स्टाइल फाइल खोलें और टूलबार के लिए एक टेक्स्ट TextView और RecyclerView के साथ शैलियों को जोड़ें:

  <style name="MyToolbar"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:background">#6986c2</item> </style> <style name="Toolbar_TextView"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">match_parent</item> <item name="android:gravity">center</item> </style> <style name="MyRecyclerView"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">match_parent</item> <item name="android:background">#fff</item> </style>

तार फ़ाइल में निम्न पंक्तियाँ जोड़ें:

  <string name="desc_home">Notification list</string> <string name="movie_title">Movie title</string> <string name="default_imdb_rating">IMDb rating: 7,4</string>

अब " fragment_home " नामक एक लेआउट बनाएं और इसमें निम्न कोड जोड़ें:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/MyLinearLayout"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar_home" style="@style/MyToolbar"> <TextView android:text="@string/desc_home" style="@style/Toolbar_TextView"/> </android.support.v7.widget.Toolbar> <android.support.v7.widget.RecyclerView android:id="@+id/recView_home" style="@style/MyRecyclerView"/> </LinearLayout>

ड्रा करने योग्य फ़ोल्डर में अधिसूचना और अधिसूचना कोई भी चिह्न नहीं जोड़ें।

सूची आइटम बनाने के लिए आगे बढ़ते हैं। फ़ाइल " item_movie " को लेआउट फ़ोल्डर में जोड़ें और इसमें निम्न कोड लिखें:

 <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView 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="120dp" app:cardCornerRadius="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="8dp" android:layout_marginRight="16dp" android:layout_marginBottom="8dp" app:cardBackgroundColor="#00FFFFFF"> <ImageView android:layout_width="98dp" android:layout_height="98dp" app:srcCompat="@mipmap/ic_launcher" android:id="@+id/item_image" android:layout_gravity="center|start" android:layout_marginLeft="10dp"/> <TextView android:text="@string/movie_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/item_title" android:layout_marginTop="18dp" android:layout_marginLeft="120dp" android:textStyle="bold" android:textColor="@android:color/black" android:ellipsize="end" android:maxLines="1" android:layout_marginRight="16dp"/> <TextView android:text="@string/default_imdb_rating" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/item_rating" android:layout_marginLeft="120dp" android:layout_marginTop="50dp"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_notifications_black_24dp" android:id="@+id/item_notification" android:layout_gravity="bottom|right" android:layout_marginRight="16dp" android:layout_marginBottom="16dp" tools:ignore="VectorDrawableCompat"/> </android.support.v7.widget.CardView>

आइए देखें परिणाम:

टैब स्क्रीन खोजें

स्ट्रिंग्स फ़ाइल में, टूलबार के लिए हेडर जोड़ें:

 <string name="desc_settings">Preferences</string>

और निम्नलिखित कोड ब्लॉक को जोड़ते हुए, " fragment_search " नामक एक लेआउट बनाएं:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="@style/MyLinearLayout"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar_search" style="@style/MyToolbar"> <android.support.v7.widget.SearchView android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/border_search_view" android:layout_marginRight="15dp" android:id="@+id/search_view"/> </android.support.v7.widget.Toolbar> <android.support.v7.widget.RecyclerView android:id="@+id/recView_search" style="@style/MyRecyclerView"/> </LinearLayout>

आइए देखें रिजल्ट:

सेटिंग्स टैब के लिए स्क्रीन

यह स्क्रीन सबसे अधिक चमकदार निकला, क्योंकि इसमें कुछ दोहराई जाने वाली शैलियाँ हैं।

TextView और CardView के लिए कोड को शैली फ़ाइल में जोड़ें:

  <style name="MyTextView"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:textStyle">bold</item> <item name="android:textColor">@android:color/black</item> <item name="android:layout_marginLeft">16dp</item> <item name="android:layout_marginTop">8dp</item> <item name="android:layout_marginBottom">8dp</item> <item name="android:typeface">normal</item> </style> <style name="MyCardView"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_margin">16dp</item> </style>

तार फ़ाइल में कुछ और पंक्तियाँ जोड़ें:

 <string name="imdb_rating">IMDb rating</string> <string name="default_rating">6</string> <string name="movie_genres">Movie genres</string>

आपको ड्रॉ करने योग्य फ़ोल्डर में स्टार बॉर्डर आइकन भी जोड़ना होगा।

" Fragment_settings " नामक एक लेआउट बनाएं और निम्नलिखित कोड जोड़ें:

 <?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" style="@style/MyLinearLayout" android:background="#fff"> <android.support.v7.widget.Toolbar style="@style/MyToolbar" android:id="@+id/toolbar_home" app:title="@string/desc_home"> <TextView android:text="@string/desc_settings" style="@style/Toolbar_TextView"/> </android.support.v7.widget.Toolbar> <android.support.v7.widget.CardView app:cardCornerRadius="16dp" app:cardBackgroundColor="#00FFFFFF" style="@style/MyCardView"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/ic_star_border_black_24dp" android:layout_gravity="right" android:layout_marginRight="50dp" android:layout_marginTop="8dp" tools:ignore="VectorDrawableCompat"/> <TextView android:text="@string/default_rating" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/rating_value" android:layout_gravity="right" android:layout_marginRight="40dp" android:layout_marginTop="8dp" android:textColor="#666666"/> <TextView android:text="@string/imdb_rating" android:id="@+id/textView" style="@style/MyTextView"/> <SeekBar style="@style/Widget.AppCompat.SeekBar.Discrete" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="10" android:progress="6" android:id="@+id/seek_bar" android:layout_marginLeft="16dp" android:layout_marginTop="50dp" android:layout_marginBottom="20dp" android:layout_marginRight="16dp"/> </android.support.v7.widget.CardView> <android.support.v7.widget.CardView app:cardCornerRadius="16dp" app:cardBackgroundColor="#00FFFFFF" style="@style/MyCardView"> <TextView android:text="@string/movie_genres" style="@style/MyTextView"/> <android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:layout_height="match_parent" android:background="#00FFFFFF" android:layout_marginLeft="16dp" android:layout_marginTop="36dp" android:layout_marginBottom="16dp" android:layout_marginRight="16dp" android:id="@+id/recView_settings"/> </android.support.v7.widget.CardView> </LinearLayout>

सूची के लिए एक आइटम बनाएँ। फ़ाइल " item_genre " को लेआउट फ़ोल्डर में जोड़ें और निम्नलिखित कोड लिखें:

 <?xml version="1.0" encoding="utf-8"?> <CheckBox xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:text="@string/movie_genres" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/item_check_box" />

आइए देखें परिणाम:

डिजाइन परीक्षण

आइए देखें कि स्क्रीन के एक ही खंड को कितनी बार फिर से तैयार किया गया है, अर्थात अतिरिक्त काम किया जा रहा है।

अच्छी तरह से	बीमार

रंग नीला - redraws एक बार। सब ठीक है।
रंग हरा - दो बार redraws। अनुकूलन की आवश्यकता है।
रंग हल्का लाल - तीन बार लाल। बहुत बुरा।
लाल रंग - 4 से अधिक बार redraws। कुछ गड़बड़ हो गई।
और अगर कुछ भी चित्रित नहीं किया गया है, तो भूखंड को फिर से तैयार नहीं किया जाता है। बढ़िया काम है।

दूसरे स्क्रीनशॉट पर सब कुछ लाल क्यों है? प्रत्येक लेआउट, RecyclerView और CardView में एक सफेद पृष्ठभूमि जोड़ी गई, जिससे परतें ओवरलैप हो गईं। यह ऊपर वर्णित डिज़ाइन में ऐसा नहीं है, उदाहरण केवल स्टाइलाइज़ेशन के असफल अनुप्रयोग को प्रदर्शित करता है।

पहले स्क्रीनशॉट में, घर के टुकड़े के लिए केवल एक पृष्ठभूमि का उपयोग किया गया था LinearLayout, जिसमें से redrawing को प्रोग्रामिक रूप से निम्नलिखित विधि का उपयोग करके रद्द कर दिया गया था:

 window.setBackgroundDrawable(null)

देखते हैं कि फ्रेम को प्रस्तुत करने में कितना समय लगता है।

पहले मामले के लिए	दूसरे मामले के लिए

दृश्य बनाने और अद्यतन करने के लिए उपयोग किए जाने वाले समय के लिए सियान जिम्मेदार है।
बैंगनी भाग धारा के प्रतिपादन संसाधनों को स्थानांतरित करने में लगने वाले समय का प्रतिनिधित्व करता है।
लाल आकर्षित करने का समय है।
एक नारंगी रंग इंगित करता है कि प्रोसेसर ने अपना काम पूरा करने के लिए GPU का इंतजार करने में कितना समय लिया। यह बड़ी मात्रा में समस्याओं का एक स्रोत है। - अलेक्जेंडर क्लिमोव

हमारे मामले में, लगभग सभी टैब 16ms से कम में खींचे जाते हैं, अर्थात, हरे रंग की पट्टी के नीचे। यदि बार इस रेखा से बड़ा है, तो प्रोग्राम धीमा हो सकता है।

निष्कर्ष

अगले लेख में, हम सर्वर के साथ काम करने पर विचार करेंगे, और जब लेखक इसे लिखता है, तो आप नीचे दिए गए सर्वेक्षण में वर्तमान डिजाइन का मूल्यांकन कर सकते हैं।

यदि कोई बिंदु स्पष्ट नहीं है, तो टिप्पणियों में प्रश्न पूछें।

अगर आपको लगता है कि डिज़ाइन (XML) को सरल या बेहतर बनाया जा सकता है, तो कृपया इसके बारे में लिखें।

मूवी प्रशंसकों के लिए एक Android ऐप लिखना - भाग 2 (डिज़ाइन)