अपने Android ऐप का निर्माण कैसे शुरू करें:मॉकअप, UI और XML लेआउट बनाना

क्रिप्टोफोलियो ऐप सीरीज़ - पार्ट 2

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

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

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

श्रृंखला सामग्री

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

मॉकअप

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

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

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

अपने Android ऐप का निर्माण कैसे शुरू करें:मॉकअप, UI और XML लेआउट बनाना

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

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

बाल्सामीक मॉकअप सॉफ्टवेयर के साथ बनाया गया माई क्रिप्टो कॉइन ऐप का मॉकअप

स्टॉक डिज़ाइन — सामग्री

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

माई क्रिप्टो कॉइन्स ऐप के लिए हम मटीरियल डिज़ाइन का उपयोग करेंगे। ऐप विस्तृत ऑनलाइन दिशानिर्देशों में परिभाषित सर्वोत्तम प्रथाओं का पालन करता है।

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

लेआउट

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

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

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

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

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

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

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

मुख्य स्क्रीन लेआउट निर्माण

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

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

शैलियाँ, रंग, आयाम, स्ट्रिंग, आइकॉन

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

तो यहां शुरुआत से ही नए उपयोगकर्ताओं का प्यार अर्जित करने का एक सही मौका है। ये मेरे सुझाव हैं:

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

RecyclerView

माई क्रिप्टो कॉइन्स ऐप की मुख्य स्क्रीन में उन क्रिप्टोकरेंसी की सूची होगी जो उपयोगकर्ता के पास हैं। इस उद्देश्य के लिए 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 को कॉन्फ़िगर करते हैं। हम फ्लोटिंगएक्शनबटन के साथ अंतिम सूची आइटम को कवर करने से बचने के लिए ऐसा करते हैं। साथ ही हम लंबवत स्क्रॉलबार चालू करते हैं ताकि यह उपलब्ध हो।

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 का उपयोग करेंगे जहां आप क्रिप्टो सिक्के जोड़ सकते हैं जो आपके पास पहले से है। हाल के वर्षों में इसकी कमियों के कारण इसका अब शायद ही उपयोग किया जाता है।

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

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

आइए ListView को लागू करने के लिए आवश्यक समान चरणों का पालन करें:

1. एक सूची दृश्य घटक जोड़ें।

सबसे पहले आपको 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 . बनाकर ऑब्जेक्ट मैं व्यूहोल्डर पैटर्न का उपयोग करता हूं। यह सूची पंक्ति दृश्य संदर्भ संग्रहीत करता है। 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

    }
    ...
}

लिस्ट व्यू सेटअप तैयार है!

क्रिप्टो कॉइन(-s) स्क्रीन जोड़ें

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 फ़ोल्डर में स्थित खोज योग्य कॉन्फ़िगरेशन फ़ाइल से जुड़ा होता है।

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

<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 को गतिविधि में जोड़ दिया गया है। अभी भी खोज कार्यक्षमता काम नहीं कर रही है। लेकिन हमने इसे वैसे ही लागू कर दिया है जैसा हम इस हिस्से के लिए चाहते थे।

क्रिप्टो कॉइन(-s) स्क्रीन जोड़ें — खोज कार्यक्षमता

सेटिंग

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

गैलरी टेम्प्लेट से नई सेटिंग गतिविधि

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

वरीयता हेडर के साथ डिफ़ॉल्ट सेटिंग टेम्प्लेट

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

1. वरीयताएँ स्क्रीन एक्सएमएल फ़ाइल बनाएँ।

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

<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 संसाधन से प्राथमिकताएं बनाएगा। भविष्य में इस खंड में एक्सएमएल सेटिंग्स को बढ़ाने के लिए सभी आवश्यक विधियां शामिल होंगी। यह सेटिंग बदलने पर कॉलबैक भी प्रदान करेगा।

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 {
        // Inflate the menu; this adds items to the action bar if it is present.
        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 स्टाइल फ्लिप सर्कल बटन-व्यू

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

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

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

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

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

जीमेल ऐप फ्लिप सर्कल व्यू एनिमेशन

लेकिन हम इसे कैसे बनाते हैं? वास्तव में, वृत्त छवि दृश्य एक डिफ़ॉल्ट घटक भी नहीं है जिसे आप Android Studio घटकों के पैलेट में पा सकते हैं।

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

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

1. निर्भरता जोड़ें।

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

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

2. इसका इस्तेमाल करें।

FlipView को Android की सामान्य और कस्टम ऐप विशेषताओं के साथ कॉन्फ़िगर करें। क्या यह आसान नहीं है?

<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 समर्थन के साथ स्थानीयकरण

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

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

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

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

सेटिंग स्क्रीन — लिथुआनियाई भाषा

अपने ऐप का अलग-अलग भाषाओं में अनुवाद करने से निश्चित रूप से आपके दर्शकों की संख्या बढ़ेगी। क्यों न कुछ विशेष भाषाओं के लिए समर्थन जोड़कर आगे बढ़ें जो दाएं से बाएं (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 भाषाओं में से किसी एक को चुनें।

आरटीएल के लिए कुछ सुझाव:

आपके सभी लेआउट में आपको सभी 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>

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

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

अनुवाद सेवा का आदेश दें

अंतिम विचार

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

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

रिपॉजिटरी

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

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

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

अपने Android ऐप का निर्माण कैसे शुरू करें:मॉकअप, UI और XML लेआउट बनाना

क्रिप्टोफोलियो ऐप सीरीज़ - पार्ट 2

श्रृंखला सामग्री

मॉकअप

स्टॉक डिज़ाइन — सामग्री

लेआउट

शैलियाँ, रंग, आयाम, स्ट्रिंग, आइकॉन

RecyclerView

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

2. RecyclerView पंक्ति लेआउट बनाएं।

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

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

ListView

1. एक सूची दृश्य घटक जोड़ें।

2. ListView पंक्ति लेआउट बनाएं।

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

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

SearchView

1. XML में खोजने योग्य कॉन्फ़िगरेशन घोषित करें।

2. नई गतिविधि बनाएं जो हमारी खोज योग्य गतिविधि बन जाएगी।

3. खोजने योग्य होने के लिए Android मेनिफेस्ट फ़ाइल में नई बनाई गई गतिविधि निर्दिष्ट करें।

4. खोज मेनू बनाएं।

5. गतिविधि में खोज मेनू जोड़ें।

सेटिंग

1. वरीयताएँ स्क्रीन एक्सएमएल फ़ाइल बनाएँ।

2. प्राथमिकताएं खंड बनाएं।

3. प्राथमिकताएं गतिविधि बनाएं।

4. सेटिंग गतिविधि बनाएं.

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

6. अतिप्रवाह मेनू से सेटिंग चुने जाने पर नई बनाई गई सेटिंग गतिविधि लॉन्च करें।

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

तीसरे पक्ष की लाइब्रेरी का उपयोग करना — Gmail स्टाइल फ्लिप सर्कल बटन-व्यू

1. निर्भरता जोड़ें।

2. इसका इस्तेमाल करें।

RTL समर्थन के साथ स्थानीयकरण

अंतिम विचार

रिपॉजिटरी

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