अपना Android ऐप बनाना शुरू करें: योजना बनाएं, मॉक अप करें, और UI डिज़ाइन करें

Kriptofolio ऐप सीरीज़ - भाग 2

तो आप वास्तव में एक नया ऐप कैसे बनाना शुरू करते हैं? आपका पहला कदम क्या होना चाहिए? यदि आपको लगता है कि हमें बस Android Studio लॉन्च करना है और सीधे कोड पर कूदना है, तो फिर से सोचें। यह ठीक वही चीज है जिसे मैं न करने की सलाह दूंगा क्योंकि यह अच्छे से ज्यादा नुकसान कर सकता है। लेकिन अपने कोड की पहली लाइनें जल्द से जल्द लिखना शुरू करना बहुत लुभावना है।

इसके बजाय मैं UI मॉकअप्स के साथ एक बुद्धिमान योजना बनाने पर ध्यान केंद्रित करने का सुझाव दूंगा। याद रखें कि हर अच्छे नए ऐप प्रोजेक्ट की शुरुआत इसी से होनी चाहिए। इस दृष्टिकोण के साथ आप बहुत समय नहीं गंवाएंगे और शुरुआत से ही उच्च गुणवत्ता वाले प्रोडक्ट्स बनाने में सक्षम होंगे।

तो सीरीज़ के इस भाग में, मैं "Kriptofolio" (पहले "My Crypto Coins") ऐप मॉकअप्स प्रस्तुत करूंगा और चर्चा करूंगा कि उन्हें कैसे बनाया जाए। साथ ही हम सभी UI लेआउट्स बनाएंगे। ये लेआउट्स हमारी ठोस नींव बन जाएंगे जो स्पष्ट रूप से इंगित करेंगे कि क्या कोड करना है। अंत में हम अपने ऐप को विभिन्न भाषाओं में लोकलाइज़ करेंगे और सीखेंगे कि उन भाषाओं को कैसे हैंडल किया जाए जो दाएं से बाएं लिखी जाती हैं।

सीरीज़ कंटेंट

• परिचय: 2018-2019 में एक आधुनिक Android ऐप बनाने का रोडमैप
• भाग 1: SOLID सिद्धांतों का परिचय
• भाग 2: अपना Android ऐप बनाना शुरू कैसे करें: मॉकअप्स, UI, और XML लेआउट्स बनाना (आप यहाँ हैं)
• भाग 3: आर्किटेक्चर के बारे में सब कुछ: विभिन्न आर्किटेक्चर पैटर्न्स की खोज और उन्हें अपने ऐप में कैसे उपयोग करें
• भाग 4: Dagger 2 के साथ अपने ऐप में डिपेंडेंसी इंजेक्शन कैसे इम्प्लीमेंट करें
• भाग 5: Retrofit, OkHttp, Gson, Glide और Coroutines का उपयोग करके RESTful वेब सर्विसेज को हैंडल करना

मॉकअप्स

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

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

बाजार में चुनने के लिए विभिन्न सॉफ्टवेयर विकल्प हैं। आपको अपनी खुद की जांच करनी होगी कि कौन सा आपकी सभी जरूरतों के लिए सबसे उपयुक्त है। अभी अपने सभी प्रोजेक्ट्स मॉकअप्स के लिए मैं Balsamiq Mockups for Desktop ऐप का उपयोग कर रहा हूँ। Balsamiq रैपिड, प्रभावी और उपयोग में बहुत आसान वायरफ्रेमिंग सॉफ्टवेयर है। चूंकि मैं इससे काफी खुश हूँ, मैं Android ऐप्स बनाने के लिए इसकी अनुशंसा करता हूँ, इसलिए कृपया इसे आज़माने के लिए स्वतंत्र महसूस करें।

मैंने My Crypto Coins ऐप प्रोजेक्ट को अच्छी तरह से सोचे-समझे और बहुत डिटेल्ड मॉकअप्स बनाकर शुरू किया। मैंने खुद से सोचा कि अगर मैं सब कुछ बहुत डिटेल्ड तरीके से बनाऊंगा, तो मैं गलतियों से बचूंगा। मैं विकास प्रक्रिया के दौरान अचानक कार्यक्षमता बदलने में समय भी बर्बाद नहीं करूंगा। यदि आप अच्छे मॉकअप्स बनाने में बहुत प्रयास करते हैं, तो थोड़ी कल्पना के साथ, आप अंतिम उत्पाद को देख और महसूस कर सकते हैं।

मेरा लक्ष्य मॉकअप्स में सब कुछ परिभाषित करना था जैसे यह अंतिम उत्पाद में दिखना चाहिए। इसके लिए मैंने जल्दबाजी न करके उतना समय बिताने की कोशिश की जितनी मुझे जरूरत थी। यहां My Crypto Coins ऐप के लिए मेरे अंतिम मॉकअप्स हैं:

स्टॉक डिज़ाइन - Material

बात करने के लिए एक और महत्वपूर्ण चीज ऐप का विजुअल डिज़ाइन है। इस लेखन के समय, Material Design Google द्वारा सभी Android ऐप्स के लिए अनुशंसित स्टॉक विजुअल डिज़ाइन है। और अनुमान लगाइए क्या - आप स्टॉक डिज़ाइन के साथ गलत नहीं हो सकते।

My Crypto Coins ऐप के लिए हम Material Design का उपयोग करेंगे। ऐप विस्तृत ऑनलाइन दिशानिर्देशों में परिभाषित सर्वोत्तम प्रथाओं का पालन करता है।

Material.io/guidelines - आधिकारिक मटीरियल डिज़ाइन लिविंग स्पेक्स डॉक्यूमेंट जो इस प्रोजेक्ट के लिए हमारे डिज़ाइन दिशानिर्देश होंगे।

लेआउट्स

अब जब हमारे पास पहले से ही हमारे ऐप के वायरफ्रेम्स तैयार हैं, तो असली UI बनाने का समय आ गया है। फिर हम कोड लिखने में कूद सकते हैं, लेकिन जल्दी क्यों? इसके बजाय मैं आपके सभी XML लेआउट्स बनाने पर ध्यान केंद्रित करने की सलाह दूंगा। यहां मेरी सलाह होगी कि आप XML में जितना अधिक मैनेज करेंगे, उतना कम कोड आपको लिखना होगा।

Android टीम लगातार XML लेआउट्स में नई सुविधाएं जोड़कर आपके UI बनाने के तरीके में सुधार करती है। कभी-कभी वांछित लुक पाने के लिए कोड की कुछ लाइनें लिखना बहुत लुभावना होता है। लेकिन विषय की अधिक गहराई से जांच करना बेहतर है यह पता लगाने के लिए कि क्या इसे कोड के बिना करना संभव है। याद रखें: कम कोड आपके प्रोजेक्ट को क्लीनर बनाता है। यह अन्य डेवलपर्स के लिए अधिक समझने योग्य और बनाए रखने में आसान भी होगा।

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

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

इस ऐप के लिए मैं विभिन्न कंपोनेंट्स का उपयोग करूंगा जो सभी आधुनिक Android ऐप्स में आम हैं:

• CoordinatorLayout - एक सुपर-पावर्ड FrameLayout, जिसकी मुख्य अपील इसके भीतर व्यूज़ के एनिमेशन और ट्रांजिशन को कोऑर्डिनेट करने की क्षमता है।
• AppBarLayout - एक वर्टिकल LinearLayout जो मटीरियल डिज़ाइन के ऐप बार कॉन्सेप्ट की कई विशेषताओं को इम्प्लीमेंट करता है, अर्थात् स्क्रॉलिंग जेस्चर्स।
• Toolbar - एप्लिकेशन लेआउट्स में उपयोग के लिए एक्शन बार्स का जनरलाइज़ेशन।
• CollapsingToolbarLayout - Toolbar के लिए एक रैपर जो एक कोलैप्सिंग ऐप बार इम्प्लीमेंट करता है। इसे AppBarLayout के डायरेक्ट चाइल्ड के रूप में उपयोग करने के लिए डिज़ाइन किया गया है।
• ConstraintLayout - एक ViewGroup जो आपको विजेट्स को फ्लेक्सिबल तरीके से पोज़िशन और साइज़ करने की अनुमति देता है। स्टेरॉयड पर एक RelativeLayout की कल्पना करें।
• SwipeRefreshLayout - वह विजेट जो स्वाइप-टू-रिफ्रेश यूज़र इंटरफेस पैटर्न को पूरी तरह से इम्प्लीमेंट करने की अनुमति देता है। यह वर्टिकल स्वाइप का पता लगाता है, एक विशिष्ट प्रोग्रेस बार प्रदर्शित करता है, और आपके ऐप में कॉलबैक मेथड्स ट्रिगर करता है।
• FloatingActionButton - एक सर्कुलर बटन जो आपके ऐप के UI में प्राथमिक एक्शन को ट्रिगर करता है।

मेन स्क्रीन के लिए हम इन सभी कंपोनेंट्स के संयोजन का उपयोग करके अच्छा UI/UX बनाएंगे। यूज़र्स लेआउट के ऊपरी हिस्से को एक्सपैंड और कोलैप्स कर सकते हैं ताकि उनके सभी क्रिप्टोकरेंसी पोर्टफोलियो का कुल मूल्य ढूंढ सकें। वे पिछले 24 घंटों में मूल्य में किसी भी परिवर्तन की जांच कर सकते हैं और चयनित फिएट करेंसी को बदल सकते हैं।

बेशक इन नौ के अलावा अन्य कंपोनेंट्स भी हैं। पूरे कंपोनेंट पैलेट में महारत हासिल करना बहुत महत्वपूर्ण है ताकि किसी विशेष मामले में किसका उपयोग करना है, यह पता चल सके। मोबाइल ट्रेंड्स के समय-समय पर बदलने के साथ पैलेट का भी विस्तार होगा।

मैं हर कंपोनेंट के बारे में बात नहीं करने जा रहा हूँ, लेकिन मेरी सलाह है कि आप इसे स्वयं जांचें। मेरे लिए उन्हें समझने का सबसे अच्छा तरीका Android Studio में ऑटोमैटिक ड्रैग एंड ड्रॉप टूल्स का उपयोग करने के बजाय मैन्युअली XML लेआउट्स बनाने की कोशिश करना है।

स्टाइल्स, कलर्स, डायमेंशन्स, स्ट्रिंग्स, आइकन्स

पहली नज़र में, इस सेक्शन शीर्षक में उल्लिखित चीजें महत्वपूर्ण नहीं लग सकती हैं। हालांकि, मैं आपसे अनुरोध करता हूं कि किसी भी ऐप में उन्हें बनाते समय प्रयास करें यदि आप इसे आधुनिक और एक्सक्लूसिव बनाना चाहते हैं। याद रखें कि यह ब्लॉग पोस्ट सीरीज़ एक आधुनिक Android ऐप बनाने का तरीका है! कोई फर्क नहीं पड़ता कि यह कितना गलत है, लोग आमतौर पर आपके ऐप को पहले इसकी लुक से जज करते हैं, इसकी कार्यक्षमता से नहीं।

तो यहां शुरुआत से ही नए यूज़र्स का प्यार पाने का एक सही मौका है। ये मेरे सुझाव हैं:

• अपनी XML लेआउट फ़ाइलें बनाते समय, आपको यह पहचानना चाहिए कि आप व्यूज़ के लिए कुछ सामान्य एट्रिब्यूट्स कहां दोहराते हैं। उन्हें अलग XML स्टाइल्स के रूप में परिभाषित करने के लिए ले जाएं। इस तरह आपके XML लेआउट फ़ाइलें छोटी होंगी। आप ऐप स्टाइलिंग के सभी पहलुओं को एक अलग स्थान से कंट्रोल कर सकते हैं। कल्पना करें कि यह आपको क्या लाभ देगा। उदाहरण के लिए, आप यूज़र को ऐप स्किन (ब्राइट, डार्क, आदि) चुनने की अनुमति दे सकते हैं।
• अपने सभी ऐप कलर्स को एक अलग फ़ाइल में भी परिभाषित करें, और तुरंत उन्हें बदलकर लुक के साथ प्रयोग करने की क्षमता का आनंद लें। कभी-कभी वही उत्पाद नए कलर्स के साथ रिफ्रेश करके नया जीवन प्राप्त कर सकता है और यूज़र्स को फिर से जोड़ सकता है। कई वेबसाइट्स हैं जो आपको अच्छे कलर्स चुनने में मदद कर सकती हैं, लेकिन मेरी पसंदीदा MaterialPalette.com है, इसलिए एक नज़र डालें।
• अपने ऐप डायमेंशन्स को एक अलग फ़ाइल में परिभाषित करें। यह आपको अपने ऐप को विभिन्न आकार की स्क्रीन्स पर अच्छा दिखने के लिए एडजस्ट करने की अनुमति देगा।
• आपके सभी स्ट्रिंग्स हार्डकोडेड नहीं होने चाहिए, और Android Studio आपको सूचित करेगा यदि आप भूल जाते हैं। इसे नज़रअंदाज़ न करें। जब आपके स्ट्रिंग्स अलग होते हैं तो सबसे अच्छी बात यह है कि आप अपने ऐप को विभिन्न भाषाओं में ट्रांसलेट कर सकते हैं।
• अपने ऐप के लिए आइकन्स का उपयोग करते समय, हमेशा XML वेक्टर ड्रॉएबल फॉर्मेट को प्राथमिकता दें। यह नया अनुशंसित मानक है और किसी भी पिक्सेलेशन से बचने का एक चतुर तरीका है। कम्युनिटी से कई प्रोफेशनली बने मटीरियल डिज़ाइन स्टाइल आइकन्स खोजने के लिए, कृपया MaterialDesignIcons.com देखें। मैंने My Crypto Coins ऐप के लिए आइकन्स प्राप्त करने के लिए इस वेबसाइट का उपयोग किया।

RecyclerView

My Crypto Coins ऐप की मेन स्क्रीन में यूज़र द्वारा रखी गई क्रिप्टोकरेंसीज़ की एक लिस्ट होगी। इस उद्देश्य के लिए RecyclerView विजेट सबसे उपयुक्त है। यह एक विजेट है जो बड़े डेटा सेट्स (या डेटा जो बार-बार बदलता है) के आधार पर एलिमेंट्स की एक स्क्रॉलिंग लिस्ट प्रदर्शित करता है।

इसके फायदों के कारण, RecyclerView किसी भी लिस्ट स्क्रीन बनाने के लिए अनुशंसित कंपोनेंट है। यह सरल ListView कंपोनेंट का एक अधिक उन्नत और फ्लेक्सिबल संस्करण है। हम इसके बारे में बाद में भी बात करेंगे। इस भाग में हम केवल लेआउट्स बना रहे हैं। हम कोडिंग पर ध्यान केंद्रित नहीं कर रहे हैं।

हमारे ऐप को विजुअली देखने के लिए, हमें कुछ कोड लिखकर RecyclerView इम्प्लीमेंट करना होगा। RecyclerView इम्प्लीमेंट करने के ये चरण हैं:

1. एक RecyclerView कंपोनेंट जोड़ें।

हमारा MainActivity लेआउट activity_main.xml है। यह लेआउट content_main.xml लेआउट को शामिल करता है जो एक फ्रैगमेंट है। यह MainActivityListFragment लेआउट fragment_main_list.xml को इन्फ्लेट करता है। तो आपको RecyclerView कंपोनेंट यहां जोड़ना चाहिए।

... <android.support.v7.widget.RecyclerView android:id="@+id/recyclerview_fragment_main_list" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorForMainListBackground" android:clipToPadding="false" android:paddingBottom="72dp" android:paddingTop="5dp" android:scrollbarStyle="outsideOverlay" android:scrollbars="vertical" /> ...

जैसा कि आप देख सकते हैं हम अपने RecyclerView को नीचे कुछ पैडिंग स्पेस छोड़ने के लिए कॉन्फ़िगर करते हैं। हम ऐसा अंतिम लिस्ट आइटम को FloatingActionButton से ढके जाने से बचाने के लिए करते हैं। साथ ही हम वर्टिकल स्क्रॉलबार ऑन करते हैं ताकि यह उपलब्ध हो।

2. RecyclerView रो लेआउट बनाएं।

हमारे प्रारंभिक उद्देश्य के लिए हम प्रत्येक रो के लिए केवल आइटम नाम सेट करेंगे। हमारा सरलीकृत लेआउट इस तरह दिखना चाहिए।

<android.support.v7.widget.CardView xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="https://schemas.android.com/apk/res-auto" xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/main_cardview_list_item_outer_top_bottom_margin" android:layout_marginEnd="@dimen/main_cardview_list_item_outer_start_end_margin" android:layout_marginStart="@dimen/main_cardview_list_item_outer_start_end_margin" android:layout_marginTop="@dimen/main_cardview_list_item_outer_top_bottom_margin" android:foreground="?android:attr/selectableItemBackground" android:clickable="true" android:focusable="true" app:cardBackgroundColor="@color/colorForMainListItemBackground"> <android.support.constraint.ConstraintLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="@dimen/main_cardview_list_item_inner_margin"> ... <android.support.v7.widget.AppCompatTextView android:id="@+id/item_name" style="@style/MainListItemPrimeText" android:layout_marginEnd="@dimen/main_cardview_list_item_text_between_margin" android:layout_marginStart="@dimen/main_cardview_list_item_inner_margin" app:layout_constraintBottom_toTopOf="@+id/item_amount_symbol" app:layout_constraintEnd_toStartOf="@+id/guideline1_percent" app:layout_constraintStart_toEndOf="@+id/item_image_icon" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_chainStyle="spread" tools:text="@string/sample_text_item_name" /> ... </android.support.constraint.ConstraintLayout> </android.support.v7.widget.CardView>

3. डेटा एडाप्टर क्लास बनाएं।

हमारा एडाप्टर अभी के लिए स्ट्रिंग डेटा स्वीकार करेगा। बाद में हमें एक अलग क्लास डेटा मॉडल बनाने की आवश्यकता होगी। हमें केवल एक स्ट्रिंग से अधिक जानकारी पास करने की आवश्यकता होगी।

class MainRecyclerViewAdapter(val dataList: ArrayList<String>) : RecyclerView.Adapter<MainRecyclerViewAdapter.CustomViewHolder>() { override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CustomViewHolder { val v = LayoutInflater.from(parent.context).inflate(R.layout.fragment_main_list_item, parent, false) return CustomViewHolder(v) } override fun onBindViewHolder(holder: CustomViewHolder, position: Int) { holder.txtName?.text = dataList[position] } override fun getItemCount(): Int { return dataList.size } inner class CustomViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) { val txtName = itemView.findViewById<TextView>(R.id.item_name) } }

4. RecyclerView को कस्टम एडाप्टर से कनेक्ट करें।

class MainActivityListFragment : Fragment() { private lateinit var recyclerView: RecyclerView private lateinit var recyclerAdapter: MainRecyclerViewAdapter override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? { val v: View = inflater.inflate(R.layout.fragment_main_list, container, false) recyclerView = v.findViewById(R.id.recyclerview_fragment_main_list) return v } override fun onActivityCreated(savedInstanceState: Bundle?) { super.onActivityCreated(savedInstanceState) setupList() } private fun setupList() { val data = ArrayList<String>() data.add("Bitcoin") data.add("Etherium") data.add("Ripple") data.add("Bitcoin Cash") data.add("Litecoin") data.add("NEO") data.add("Stellar") data.add("EOS") data.add("Cardano") data.add("Stellar") data.add("IOTA") data.add("Dash") data.add("Monero") data.add("TRON") data.add("NEM") data.add("ICON") data.add("Bitcoin Gold") data.add("Zcash") data.add("Verge") recyclerView.layoutManager = LinearLayoutManager(activity) recyclerAdapter = MainRecyclerViewAdapter(data) recyclerView.adapter = recyclerAdapter } }

हो गया! अब हमारी मेन स्क्रीन इस तरह दिखती है:

ListView

इस प्रोजेक्ट में, हम उस स्क्रीन के लिए ListView का उपयोग करेंगे जहां आप उन क्रिप्टो कॉइन(s) को जोड़ सकते हैं जो आपके पास पहले से हैं। हाल के वर्षों में इसकी कमियों के कारण यह शायद ही उपयोग किया जाता है।

तो मुझे लगता है कि आप में से बहुत से लोग इस क्षण सोच रहे होंगे कि मैंने My Crypto Coins ऐप में इसका उपयोग करने का फैसला क्यों किया जब हम वही कार्यक्षमता आसानी से RecyclerView से बना सकते थे।

याद रखें, हालांकि, कि यह प्रोजेक्ट पहले प्रशिक्षण उद्देश्यों के लिए बनाया गया था। मैंने सोचा कि ListView में अंतर्दृष्टि प्राप्त करना और यह कैसे काम करता है, लाभदायक होगा। कोई भी डेवलपर लिगेसी कोड में ListView का सामना कर सकता है, और यह जानना सबसे अच्छा है कि इसके साथ कैसे काम करना है। इसके अलावा, हम जो लिस्ट बनाने जा रहे हैं वह इतनी सरल है कि ListView की तकनीकी सीमाएं हमें कोई समस्या नहीं देंगी।

ListView इम्प्लीमेंट करने के लिए आवश्यक बहुत समान चरणों का पालन करें:

1. एक ListView कंपोनेंट जोड़ें।

पहली बात यह है कि AddSearchActivity में एक ListView जोड़ें। एक्टिविटी लेआउट फ़ाइल activity_add_search.xml खोलें और आप देखेंगे कि इसमें content_add_search.xml शामिल है। वहां हम ListView कंपोनेंट जोड़ेंगे।

... <ListView android:id="@+id/listview_activity_add_search" android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars="vertical" /> ...

2. ListView रो लेआउट बनाएं।

पहले की तरह, केवल प्रारंभिक उद्देश्यों के लिए, हम प्रत्येक रो के लिए केवल आइटम नाम सेट करेंगे। यहां सरलीकृत लेआउट है:

<android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="https://schemas.android.com/apk/res-auto" xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="@dimen/add_search_list_item_inner_margin"> ... <android.support.v7.widget.AppCompatTextView android:id="@+id/item_name" style="@style/AddSearchListItemPrimeText" android:layout_marginEnd="@dimen/add_search_list_item_text_between_margin_2x" android:layout_marginStart="@dimen/add_search_list_item_text_between_margin" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="@+id/item_symbol" app:layout_constraintStart_toEndOf="@+id/item_image_icon" app:layout_constraintTop_toTopOf="parent" tools:text="@string/sample_text_item_name" /> ... </android.support.constraint.ConstraintLayout>

3. डेटा एडाप्टर क्लास बनाएं।

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

class AddSearchListAdapter(context: Context, private val dataSource: ArrayList<String>) : BaseAdapter() { private val inflater: LayoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View { val view: View val holder: CustomViewHolder if (convertView == null) { view = inflater.inflate(R.layout.activity_add_search_list_item, parent, false) holder = CustomViewHolder() holder.nameTextView = view.findViewById(R.id.item_name) view.tag = holder } else { view = convertView holder = convertView.tag as CustomViewHolder } val nameTextView = holder.nameTextView nameTextView.text = getItem(position) as String return view } override fun getItem(position: Int): Any { return dataSource[position] } override fun getItemId(position: Int): Long { return position.toLong(); } override fun getCount(): Int { return dataSource.size } inner class CustomViewHolder { lateinit var nameTextView: AppCompatTextView } }

जैसा कि आप एडाप्टर कोड में देख सकते हैं, CustomViewHolder ऑब्जेक्ट बनाकर मैं ViewHolder पैटर्न का उपयोग करता हूँ। यह लिस्ट रो व्यू रेफरेंसेस स्टोर करता है। findViewById() मेथड को कॉल करना केवल कुछ बार होता है। यह हमें अपनी लिस्ट स्क्रॉलिंग को सुचारू और कुशलता से कार्य करने की अनुमति देता है।

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

4. ListView को कस्टम एडाप्टर से कनेक्ट करें।

डिफ़ॉल्ट ArrayAdapter के साथ यह val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, data) जैसा दिख सकता है। यह ListView कंपोनेंट की सुंदरता है। यदि आप चाहें, तो आप अपना खुद का एडाप्टर या रो लेआउट बनाए बिना (चरण 2 और 3 छोड़ें) वास्तव में तेजी से एक सिंपल लिस्ट बना सकते हैं।

class AddSearchActivity : AppCompatActivity() { private lateinit var listView: ListView override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_add_search) setSupportActionBar(toolbar2) supportActionBar?.setDisplayHomeAsUpEnabled(true) val data = ArrayList<String>() data.add("Bitcoin") data.add("Etherium") data.add("Ripple") data.add("Bitcoin Cash") data.add("Litecoin") data.add("NEO") data.add("Stellar") data.add("EOS") data.add("Cardano") data.add("Stellar") data.add("IOTA") data.add("Dash") data.add("Monero") data.add("TRON") data.add("NEM") data.add("ICON") data.add("Bitcoin Gold") data.add("Zcash") data.add("Verge") val adapter = AddSearchListAdapter(this, data) listView = findViewById(R.id.listview_activity_add_search) listView.adapter = adapter } ... }

ListView सेटअप तैयार है!

SearchView

सभी क्रिप्टोकरेंसीज़ लिस्ट की गई उसी स्क्रीन में, हमें SearchView भी जोड़ना होगा। किसी भी यूज़र के लिए खोज एक उपयोगी कार्यक्षमता होगी जो उसका नाम टाइप करके एक विशिष्ट क्रिप्टोकरेंसी ढूंढना चाहता है। इस भाग के लिए हम पूरी कार्यक्षमता नहीं बनाएंगे बल्कि केवल इसका विजुअल पार्ट इम्प्लीमेंट करेंगे। प्रोजेक्ट में SearchView जोड़ने के लिए इन चरणों का पालन करें:

1. XML में सर्चेबल कॉन्फ़िगरेशन घोषित करें।

सर्चेबल कॉन्फ़िगरेशन फ़ाइल को आपके res डायरेक्टरी में xml नाम से जोड़ा जाना चाहिए। यहां आप अपने SearchView कंपोनेंट के लिए एट्रिब्यूट्स निर्दिष्ट कर सकते हैं जो परिभाषित करते हैं कि यह कैसे व्यवहार करता है।

<searchable xmlns:android="https://schemas.android.com/apk/res/android" android:label="@string/app_name" android:hint="@string/search_hint"> </searchable>

2. नई एक्टिविटी बनाएं जो हमारी सर्चेबल एक्टिविटी बनेगी।

हम एक नई ब्लैंक एक्टिविटी बनाने जा रहे हैं जो AppCompatActivity() एक्सटेंड करती है। हम इसे AddSearchActivity नाम देंगे।

3. नई बनाई गई एक्टिविटी को Android मैनिफेस्ट फ़ाइल में सर्चेबल होने के लिए निर्दिष्ट करें।

<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="com.baruckis.mycryptocoins"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> ... <activity android:name=".AddSearchList.AddSearchActivity" android:launchMode="singleTop" android:parentActivityName=".MainList.MainActivity" android:theme="@style/AppTheme.NoActionBar"> <intent-filter> <action android:name="android.intent.action.SEARCH" /> </intent-filter> <meta-data android:name="android.app.searchable" android:resource="@xml/searchable" /> </activity> ... </application> </manifest>

हम Android सिस्टम को खोज प्रक्रिया को संभालने देंगे। इसीलिए हम AddSearchActivity के एक्टिविटी एलिमेंट में इंटेंट एक्शन सर्च और मेटा-डेटा जोड़ते हैं। मेटा-डेटा में नाम और रिसोर्स होता है जो res/xml फोल्डर में स्थित सर्चेबल कॉन्फ़िगरेशन फ़ाइल से जुड़ा होता है।

4. सर्च मेनू बनाएं।

res/menu फोल्डर के अंदर हम एक मेनू रिसोर्स फ़ाइल बनाने जा रहे हैं।

<menu xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="https://schemas.android.com/apk/res-auto"> <item android:id="@+id/search" android:icon="@drawable/ic_search" android:title="@string/action_search" app:actionViewClass="android.support.v7.widget.SearchView" app:showAsAction="ifRoom|collapseActionView" /> </menu>

5. सर्च मेनू को एक्टिविटी में जोड़ें।

हम Android सर्च विजेट को मेनू एक्शन व्यू के रूप में जोड़ेंगे।

class AddSearchActivity : AppCompatActivity() { ... override fun onCreateOptionsMenu(menu: Menu?): Boolean { menuInflater.inflate(R.menu.menu_search, menu) val searchManager = getSystemService(Context.SEARCH_SERVICE) as SearchManager val searchView = menu?.findItem(R.id.search)?.actionView as SearchView searchView.setSearchableInfo(searchManager.getSearchableInfo(componentName)) searchView.maxWidth = Integer.MAX_VALUE return true } }

अब SearchView एक्टिविटी में जोड़ा गया है। फिर भी खोज कार्यक्षमता काम नहीं कर रही है। लेकिन हमने इसे इस भाग के लिए वैसे ही इम्प्लीमेंट किया जैसा हम चाहते थे।

सेटिंग्स

यदि आप एक आधुनिक Android ऐप बनाना चाहते हैं, तो मैं अनुशंसा करता हूं कि आप एक सेटिंग्स स्क्रीन शामिल करें और यूज़र को ऐप सेटिंग्स तक पहुंच दें। अपने ऐप में सेटिंग्स शामिल करना आपके यूज़र्स को आपके ऐप की कुछ कार्यक्षमता को कंट्रोल करने की शक्ति देता है जिससे वे खुश होते हैं। अब वे कंट्रोल में हैं कि ऐप कैसे व्यवहार करता है। तो हम My Crypto Coins ऐप के लिए एक सेटिंग्स स्क्रीन भी बनाने जा रहे हैं।

आप Android Studio टेम्पलेट के साथ एक सेटिंग्स स्क्रीन बना सकते हैं और यह आपके लिए आवश्यक सभी कोड जनरेट करेगा। इस ब्लॉग पोस्ट को लिखने के समय डिफ़ॉल्ट रूप से, सेटिंग्स एक्टिविटी प्रेफरेंस हेडर्स के साथ जनरेट होती है। यह वह नहीं है जो हम इतने छोटे ऐप के लिए चाहते हैं जहां हम शुरू में केवल कुछ सेटिंग्स रखने की योजना बना रहे हैं।

इसलिए हम इस ब्लॉग पोस्ट के लिए फिर से केवल विजुअल पार्ट बनाने के लिए सब कुछ मैन्युअली बनाने जा रहे हैं। सेटिंग्स स्क्रीन XML-जैसे लेआउट के साथ डिज़ाइन की गई है। आइए स्टेप बाय स्टेप जाएं:

1. प्रेफरेंस स्क्रीन XML फ़ाइल बनाएं।

हम प्रेफरेंस स्क्रीन XML फ़ाइल बनाने जा रहे हैं जिसे res/xml डायरेक्टरी में रखा जाना चाहिए।

<PreferenceScreen xmlns:android="https://schemas.android.com/apk/res/android" xmlns:tools="https://schemas.android.com/tools"> <PreferenceCategory android:title="@string/pref_general_category_title"> <ListPreference android:defaultValue="@string/pref_default_language_value" android:entries="@array/pref_language_list_entries" android:entryValues="@array/pref_language_list_values" android:icon="@drawable/ic_translate" android:key="language_list" android:summary="@string/pref_default_language_entry" android:title="@string/pref_language_title" tools:summary="@string/pref_default_language_entry" /> <ListPreference android:defaultValue="@string/pref_default_fiat_currency_value" android:entries="@array/pref_fiat_currency_list_entries" android:entryValues="@array/pref_fiat_currency_list_values" android:icon="@drawable/ic_cash" android:key="fiat_currency_list" android:summary="@string/pref_default_fiat_currency_entry" android:title="@string/pref_fiat_currency_title" tools:summary="@string/pref_default_fiat_currency_entry" /> <ListPreference android:defaultValue="@string/pref_default_date_format_value" android:entries="@array/pref_date_format_list_entries" android:entryValues="@array/pref_date_format_list_values" android:icon="@drawable/ic_date_range" android:key="date_format_list" android:summary="@string/pref_default_date_format_entry" android:title="@string/pref_date_format_title" tools:summary="@string/pref_default_date_format_entry" /> <SwitchPreference android:defaultValue="true" android:icon="@drawable/ic_calendar_clock" android:key="24h_switch" android:summary="@string/pref_24h_switch_summary" android:title="@string/pref_24h_switch_title" /> </PreferenceCategory> <PreferenceCategory android:title="@string/pref_support_category_title"> <Preference android:icon="@drawable/ic_star" android:title="@string/pref_rate_app_title" /> <Preference android:icon="@drawable/ic_share" android:title="@string/pref_share_app_title" /> <Preference android:icon="@drawable/ic_attach_money" android:summary="@string/pref_donate_view_summary" android:title="@string/pref_donate_view_title" /> <Preference android:icon="@drawable/ic_currency_btc" android:summary="@string/pref_donate_crypto_summary" android:title="@string/pref_donate_crypto_title" /> </PreferenceCategory> <PreferenceCategory android:title="@string/pref_support_about_title"> <Preference android:icon="@drawable/ic_web" android:summary="@string/pref_website_summary" android:title="@string/pref_website_title" /> <Preference android:icon="@drawable/ic_human_greeting" android:summary="@string/pref_author_summary" android:title="@string/pref_author_title" /> <Preference android:icon="@drawable/ic_github_circle" android:summary="@string/pref_source_summary" android:title="@string/pref_source_title" /> <Preference android:icon="@drawable/ic_file_multiple" android:title="@string/pref_open_source_title" /> <Preference android:icon="@drawable/ic_copyright" android:summary="@string/pref_license_summary" android:title="@string/pref_license_title" /> <Preference android:icon="@drawable/ic_info_outline" android:summary="@string/pref_app_summary" android:title="@string/pref_app_title" /> </PreferenceCategory> </PreferenceScreen>

2. प्रेफरेंसेज फ्रैगमेंट बनाएं।

फिर हमें एक सिंपल ब्लैंक फ्रैगमेंट - SettingsFragment बनाना चाहिए, जो PreferenceFragment() एक्सटेंड करता है। यह फ्रैगमेंट उस XML रिसोर्स से प्रेफरेंसेज बनाएगा जिसे हमने बनाया था। भविष्य में यह फ्रैगमेंट XML सेटिंग्स को इन्फ्लेट करने के लिए सभी आवश्यक मेथड्स समाहित करेगा। यह सेटिंग्स बदलने पर कॉलबैक भी प्रदान करेगा।

class SettingsFragment : PreferenceFragment() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) addPreferencesFromResource(R.xml.pref_main); } }

3. प्रेफरेंसेज एक्टिविटी बनाएं।

सेटिंग्स फ्रैगमेंट तैयार होने के साथ आइए नई एक्टिविटी - AppCompatPreferenceActivity बनाएं, जो PreferenceActivity() एक्सटेंड करती है। यह क्लास सभी डिवाइसेज और संस्करणों में कम्पैटिबिलिटी प्रदान करती है।

abstract class AppCompatPreferenceActivity : PreferenceActivity() { override fun onCreate(savedInstanceState: Bundle?) { delegate.installViewFactory() delegate.onCreate(savedInstanceState) super.onCreate(savedInstanceState) } override fun onPostCreate(savedInstanceState: Bundle?) { super.onPostCreate(savedInstanceState) delegate.onPostCreate(savedInstanceState) } val supportActionBar: ActionBar? get() = delegate.supportActionBar fun setSupportActionBar(toolbar: Toolbar?) { delegate.setSupportActionBar(toolbar) } override fun getMenuInflater(): MenuInflater { return delegate.menuInflater } override fun setContentView(@LayoutRes layoutResID: Int) { delegate.setContentView(layoutResID) } override fun setContentView(view: View) { delegate.setContentView(view) } override fun setContentView(view: View, params: ViewGroup.LayoutParams) { delegate.setContentView(view, params) } override fun addContentView(view: View, params: ViewGroup.LayoutParams) { delegate.addContentView(view, params) } override fun onPostResume() { super.onPostResume() delegate.onPostResume() } override fun onTitleChanged(title: CharSequence, color: Int) { super.onTitleChanged(title, color) delegate.setTitle(title) } override fun onConfigurationChanged(newConfig: Configuration) { super.onConfigurationChanged(newConfig) delegate.onConfigurationChanged(newConfig) } override fun onStop() { super.onStop() delegate.onStop() } override fun onDestroy() { super.onDestroy() delegate.onDestroy() } override fun invalidateOptionsMenu() { delegate.invalidateOptionsMenu() } private val delegate: AppCompatDelegate by lazy { AppCompatDelegate.create(this, null) } }

4. सेटिंग्स एक्टिविटी बनाएं।

class SettingsActivity : AppCompatPreferenceActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setupActionBar() fragmentManager.beginTransaction().replace(android.R.id.content, SettingsFragment()).commit() } private fun setupActionBar() { supportActionBar?.setDisplayHomeAsUpEnabled(true) } override fun onMenuItemSelected(featureId: Int, item: MenuItem): Boolean { val id = item.itemId if (id == android.R.id.home) { if (!super.onMenuItemSelected(featureId, item)) { NavUtils.navigateUpFromSameTask(this) } return true } return super.onMenuItemSelected(featureId, item) } }

5. मेन मेनू में सेटिंग्स आइटम जोड़ें।

<menu xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="https://schemas.android.com/apk/res-auto" xmlns:tools="https://schemas.android.com/tools" tools:context="com.baruckis.mycryptocoins.MainList.MainActivity"> <item android:id="@+id/action_settings" android:orderInCategory="100" android:title="@string/action_settings" app:showAsAction="never" /> </menu>

6. जब सेटिंग्स को ओवरफ्लो मेनू से चुना जाए तो नई बनाई गई सेटिंग्स एक्टिविटी लॉन्च करें।

class MainActivity : AppCompatActivity() { ... override fun onCreateOptionsMenu(menu: Menu): Boolean { // मेनू इन्फ्लेट करें; यह आइटम्स को एक्शन बार में जोड़ता है यदि यह मौजूद है। menuInflater.inflate(R.menu.menu_main, menu) return true } override fun onOptionsItemSelected(item: MenuItem): Boolean { return when (item.itemId) { R.id.action_settings -> { startActivity(Intent(this@MainActivity, SettingsActivity::class.java)); return true } else -> super.onOptionsItemSelected(item) } } }

7. नई बनाई गई सेटिंग्स एक्टिविटी को Android मैनिफेस्ट फ़ाइल में निर्दिष्ट करें।

<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="com.baruckis.mycryptocoins"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> ... <activity android:name=".Settings.SettingsActivity" android:label="@string/title_activity_settings" android:parentActivityName=".MainList.MainActivity"> <meta-data android:name="android.support.PARENT_ACTIVITY" android:value="com.baruckis.mycryptocoins.MainList.MainActivity" /> </activity> </application> </manifest>

बधाई हो, आप अंततः टूलबार के मेनू आइटम से सेटिंग्स लॉन्च कर सकते हैं।

थर्ड-पार्टी लाइब्रेरीज़ का उपयोग - Gmail स्टाइल फ्लिप सर्कल बटन-व्यू

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

उनका उपयोग करने का आपका निर्णय आपके विशेष मामले पर निर्भर करना चाहिए। आपको लाइब्रेरी की अपनी जांच करनी चाहिए और यह निर्धारित करना चाहिए कि क्या यह आपकी सभी आवश्यकताओं को फिट करने के लिए पर्याप्त फ्लेक्सिबल है।

My Crypto Coins ऐप के लिए, एक स्थिति है जहां मैं एक सर्कल इमेज व्यू बनाना चाहूंगा। यह इमेज एक सर्कल शेप के अंदर एक विशिष्ट क्रिप्टोकरेंसी आइकन दिखाना चाहिए। लेकिन अगर आइकन मौजूद नहीं है, तो मैं क्रिप्टोकरेंसी कोड के पहले तीन अक्षर दिखाना चाहूंगा।

इस सब के अलावा मैं उन्हें क्लिक करके इमेजेज को चुनने में सक्षम होना चाहूंगा। चयन को एक छोटे फ्लिप व्यू एनिमेशन के रूप में प्रस्तुत किया जाना चाहिए।

मैंने जिस UX का वर्णन किया वह मूल रूप से मेरे द्वारा आविष्कृत नहीं था। आप Gmail ऐप पर समान व्यवहार पा सकते हैं और यह वास्तव में अच्छा दिखता है।

लेकिन हम इसे कैसे बनाते हैं? वास्तव में, सर्कल इमेज व्यू Android Studio कंपोनेंट पैलेट में मिलने वाला डिफ़ॉल्ट कंपोनेंट भी नहीं है।

आप कठिन रास्ता अपना सकते हैं और सब कुछ स्वयं बनाने की कोशिश कर सकते हैं, लेकिन यह समय और ऊर्जा बर्बाद कर सकता है। इसके बजाय, आप विशेष रूप से इसके लिए बनाए गए कई ओपन सोर्स लाइब्रेरीज़ में से एक को इम्प्लीमेंट करना चुन सकते हैं।

मेरी UI/UX आवश्यकता के लिए, मुझे GitHub पर davideas/FlipView लाइब्रेरी मिली। कुछ जांच के बाद मैंने फैसला किया कि यह वास्तव में प्रोफेशनली बनाई गई थी। इसे इम्प्लीमेंट करना आसान है और इसे आज़माने के लिए पर्याप्त समय तक समर्थित किया गया है। तो इसका उपयोग शुरू करने के लिए, हम इन आसान चरणों का पालन करेंगे:

1. डिपेंडेंसी जोड़ें।

लाइब्रेरी को अपने प्रोजेक्ट में इम्पोर्ट करें।

dependencies { implementation 'eu.davidea:flipview:1.1.3' }

2. इसका उपयोग करें।

Android के सामान्य और कस्टम ऐप एट्रिब्यूट्स के साथ FlipView कॉन्फ़िगर करें। क्या यह आसान नहीं है?

<android.support.v7.widget.CardView xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="https://schemas.android.com/apk/res-auto" ... <eu.davidea.flipview.FlipView android:id="@+id/item_image_icon" style="@style/FlipView" android:clickable="true" android:focusable="true" app:layout_constraintBottom_toTopOf="@+id/item_ranking" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> ... </android.support.v7.widget.CardView>

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

RTL सपोर्ट के साथ लोकलाइज़ेशन

जब मैंने यह ऐप बनाने का फैसला किया, तो मैंने खुद को एक लक्ष्य निर्धारित किया न केवल इसे डिफ़ॉल्ट English UI के साथ बनाने का, बल्कि विकास की शुरुआत से ही इसे अपनी मातृभाषा, लिथुआनियाई में ट्रांसलेट करने का।

इस लक्ष्य ने मुझे Android में लोकलाइज़ेशन के बारे में सीखने के लिए प्रेरित किया। मुझे जो मिला वह यह है कि कई भाषाओं के लिए सपोर्ट जोड़ना बहुत आसान है। जैसा कि मैंने पहले उल्लेख किया है, पहले आपको अपने सभी स्ट्रिंग्स को strings.xml फ़ाइल में अलग करने की आवश्यकता है। फिर आप Android Studio के अंदर Translations Editor टूल लॉन्च कर सकते हैं। यह आपको नई भाषाओं का सपोर्ट जोड़ने की अनुमति देगा।

आप देखेंगे कि इंटरफेस बहुत सहज है। अब आपको अपने strings.xml फ़ाइल से प्रत्येक स्ट्रिंग को एक नई भाषा में ट्रांसलेट करने की आवश्यकता है। IDE द्वारा एक नई फ़ाइल अलग डायरेक्टरी में जनरेट की जाएगी। उदाहरण के लिए, लिथुआनियाई भाषा के लिए, यह values-lt/strings.xml है। बस इतना ही!

यदि आप अपने Android डिवाइस की सिस्टम भाषा को उस भाषा पर स्विच करते हैं जिसे आपने अभी ट्रांसलेट किया है और फिर अपना ऐप चलाते हैं, तो सभी UI आपके ट्रांसलेशन्स पर ऑटोमेटिकली अपडेट हो जाएंगे। इसके अलावा, My Crypto Coins ऐप के लिए, बाद में मैं रनटाइम पर भाषाएं स्विच करने की क्षमता जोड़ने की योजना बना रहा हूँ। इसीलिए आप सेटिंग्स स्क्रीन के अंदर लैंग्वेज स्विचर देखेंगे।

अपने ऐप को विभिन्न भाषाओं में ट्रांसलेट करना निश्चित रूप से आपके दर्शकों को बढ़ाएगा। कुछ विशेष भाषाओं के लिए सपोर्ट जोड़कर आगे क्यों न बढ़ें जो दाएं से बाएं (RTL) लिखी जाती हैं - जैसे अरबी, हिब्रू या फारसी।

वास्तव में RTL सपोर्ट जोड़ना बिल्कुल भी मुश्किल नहीं है। बस अपने मैनिफेस्ट फ़ाइल में सपोर्ट एट्रिब्यूट जोड़ें:

<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="com.baruckis.mycryptocoins"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> ... </application> </manifest>

बधाई हो, आपका ऐप अब RTL सपोर्ट करता है। हालांकि आप आंख मूंदकर भरोसा नहीं कर सकते कि सब कुछ तुरंत सही काम करेगा। आपको खुद जांचना चाहिए कि यह कितनी अच्छी तरह सपोर्टेड है। ऐसा करने के लिए RTL भाषाओं में से एक को अपनी प्राथमिक डिवाइस भाषा के रूप में चुनें।

RTL के लिए कुछ टिप्स:

• अपने सभी लेआउट्स में आपको सभी Left और Right लेआउट प्रॉपर्टीज़ को Start और End समकक्ष से बदलना होगा। उदाहरण के लिए android:paddingLeft को android:paddingStart से बदलना चाहिए।
• यदि आपके पास RTL के लिए कोई विशेष ड्रॉएबल नहीं है, तो शायद आप अपने वर्तमान को एक विशेष autoMirrored एट्रिब्यूट के साथ मिरर करना चाहेंगे।

<vector xmlns:android="https://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:autoMirrored="true" android:tint="@color/colorForPreferenceIcon" android:viewportHeight="24.0" android:viewportWidth="24.0"> <path android:fillColor="#FF000000" android:pathData="M1.5,4V5.5C1.5,9.65 3.71,13.28 7,15.3V20H22V18C22,15.34 16.67,14 14,14C14,14 13.83,14 13.75,14C9,14 5,10 5,5.5V4M14,4A4,4 0 0,0 10,8A4,4 0 0,0 14,12A4,4 0 0,0 18,8A4,4 0 0,0 14,4Z" /> </vector>

• यदि कुछ स्थान ऐसे हैं जहां आपको RTL के बजाय LTR की आवश्यकता है, तो आप वह भी कर सकते हैं। उदाहरण के लिए किसी भी लेआउट को LTR बाध्य करने के लिए बस उस व्यू में android:layoutDirection="ltr" जोड़ें। यदि आपको टेक्स्ट व्यू के अंदर टेक्स्ट दिशा को बाध्य करने की आवश्यकता है तो android:textDirection="ltr" उपयोग करें।

वैसे, Translations Editor का उपयोग करते समय, प्रोफेशनल ट्रांसलेशन सर्विस ऑर्डर करने के लिए एक बहुत उपयोगी फीचर है। भले ही मैं व्यक्तिगत रूप से हिब्रू भाषा के बारे में कुछ नहीं जानता, फिर भी मैंने My Crypto Coins प्रोजेक्ट के लिए एक उदाहरण RTL भाषा के रूप में इसके लिए सपोर्ट जोड़ने का लक्ष्य निर्धारित किया था। तो यह फीचर आज़माने के लिए वास्तव में एक अच्छा विचार लगा। मैंने IDE से सीधे कुछ ही क्लिक के साथ English से हिब्रू में ट्रांसलेशन सफलतापूर्वक ऑर्डर किया।

अंतिम विचार

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

यदि आपको कुछ पर्याप्त रूप से कवर नहीं किया गया लगता है, तो इसे अपना खुद का शोध करने के लिए एक जंपिंग-ऑफ पॉइंट के रूप में उपयोग करें। वेब पर सीखने के लिए हमेशा बहुत सारे अच्छे संसाधन मौजूद हैं।

रिपॉजिटरी

आप इस भाग के लिए बनाए गए सभी XML लेआउट्स और कोड यहाँ पा सकते हैं:

GitHub पर सोर्स देखें

Ačiū! पढ़ने के लिए धन्यवाद! मैंने मूल रूप से यह पोस्ट अपने पर्सनल ब्लॉग www.baruckis.com पर 14 मई, 2018 को प्रकाशित की थी।