Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

एंड्रॉइड एसडीके (SDK): एक ड्राइंग ऐप बनाएं - टच इंटरेक्शन 

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Create a Drawing App on Android.
Android SDK: Create a Drawing App - Interface Creation
Android SDK: Create a Drawing App - Essential Functionality

Hindi (हिंदी) translation by Satyam Sh. (you can also view the original English article)

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


श्रृंखला प्रारूप (सिरीज़ फॉर्मैट) 

एक ड्राइंग ऐप बनाने पर यह श्रृंखला तीन भागों में होगी: 


अंतिम पूर्वावलोकन (फाइनल प्रीव्यू)

Drawing App

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


1. ड्राइंग के लिए तैयार करें

चरण 1 

पिछली बार हमने "DrawingView" नामक एक वर्ग (क्लैस) बनाया था, जो कि ड्राइंग फ़ंक्शंस के लिए एक कस्टम व्यू है। हमने क्लास घोषणा की रूपरेखा और "setupDrawing" नामक एक विधि तैयार किया था - हम इसे अब लागू करेंगे। अपने DrawingView वर्ग (क्लैस) में, निम्नलिखित आयात (इम्पोर्ट) स्टेटमेंट जोड़ें:

अगला, क्लास के शीर्ष पर कुछ उदाहरण चर (वेरीअबल) जोड़ें:

जब उपयोगकर्ता स्क्रीन को छूता है और अपनी उंगली को ड्राइंग करने के लिए ले जाता है, तो हम कैनवास पर उनकी ड्राइंग एक्शन को ट्रेस करने के लिए पैथ (Path) का उपयोग करेंगे। दोनों, कैनवास और इसके ऊपर के चित्र, पेंट ऑब्जेक्ट्स (Paint objects) द्वारा प्रस्तुत किए जाते हैं। प्रारंभिक पेंट रंग हमारी पिछली बार बनाई गई पैलेट में पहले रंग से मेल खाती है, जो ऐप लॉन्च होने पर शुरू में चयनित होगा। अंत में हम कैनवास और बिटमैप के लिए वैरिएबल (चर) घोषित करते हैं - drawPaint से बनाए गए उपयोगकर्ता पैथ कैनवास पर ड्रा किये जाएंगे, जो कि canvasPaint से ड्रा किया गया है।

चरण 2 

SetupDrawing विधि में, चलिए अब इनमें से कुछ वैरिएबल को इन्स्टैन्शिएट करते हैं, ड्राइंग के लिए क्लैस को सेट करने के लिए। पहले ड्राइंग पैथ और पेंट ऑब्जेक्ट्स को इन्स्टैन्शिएट करें: 

अगला, प्रारंभिक रंग सेट करें:

अब प्रारंभिक पैथ गुण (path properties) सेट करें:

हम अगले ट्यूटोरियल में इस कोड का एक हिस्सा बदल देंगे जब हम ब्रश आकार चुनने की क्षमता को लागू करेंगे, अभी हम एक मनमाना ब्रश आकार सेट करते हैं। एंटी-अलाइज (anti-alias), स्ट्रोक जॉइन (stroke join) और कैप शैलियाँ (cap styles) सेट करने से उपयोगकर्ता के चित्र समतल (स्मूद) दिखाई देगा।

कैनवास पेंट ऑब्जेक्ट (Paint object) को चालू करके (इन्स्टैन्शिएट करके) setupDrawing विधि को पूरा करें: 

इस बार हम कन्स्ट्रक्टर को एक पैरामीटर पास करके थरथराहट (dithering) को सेट करते हैं। 

चरण 3 

ड्राइंग व्यू (drawing View) के रूप में कस्टम व्यू (custom View) फ़ंक्शन को बनाने के लिए हमें कुछ तरीकों को ओवरराइड करना होगा। सबसे पहले, अभी भी DrawingView क्लैस के अंदर, onSizeChanged विधि को ओवरराइड करें, जिसे जब कस्टम व्यू (custom View) को एक आकार निर्दिष्ट किया जाता है: 

इस विधि के अंदर, पहले सुपरक्लास विधि (superclass method) को कॉल करें:

अब चौड़ाई और ऊंचाई मानों का उपयोग करके ड्रॉइंग कैनवास और बिटमैप को इन्स्टैन्शिएट करें:

चरण 4

क्लास को कस्टम ड्राइंग व्यू के रूप में कार्य करने की अनुमति देने के लिए, हमें onDraw विधि को ओवरराइड करना भी आवश्यक है, इसलिए इसे अब क्लास में जोड़ें: 

विधि के अंदर, कैनवास और ड्राइंग पैथ को ड्रा करें:

हमने अभी तक उपयोगकर्ता को drawing Path (ड्राइंग पैथ) का उपयोग करके पैथ (Path) को ड्रा करने की क्षमता को लागू नहीं किया है, लेकिन एक बार जब हम ऐसा करते हैं, तो इसे व्यू (View) में पेश करेंगे।  हर बार जब उपयोगकर्ता स्पर्श आदान-प्रदान (टच इंटरेक्शन ) का उपयोग करता है, तो हम व्यू को रद्द कर देंगे, जिसके कारण onDraw विधि निष्पादित (एक्सक्यूट) हो जाएगा। 


2. ड्राइंग की सुविधा 

चरण 1 

जब ड्राइंग व्यू (View) एप स्क्रीन पर है, तो हम चाहते हैं कि उपयोगकर्ता ड्राइंग ऑपरेशन के रूप में पंजीकरण करने के लिए उस को छू (टच कर) ले।  ऐसा करने के लिए हमें स्पर्श (टच) इवेंट्स को सुनने की ज़रूरत है।  अपने drawingView वर्ग (क्लैस) में, निम्नलिखित विधि को जोड़ें: 

विधि के अंदर, उपयोगकर्ता की टच की X और Y की स्थिति को पुनर्प्राप्त करें:

चरण 2

OnTouchEvent विधि के लिए MotionEvent पैरामीटर हमें विशेष रूप से टच इवेंटों का जवाब देने में मदद मिलेगी।  जिस क्रिया में हम ड्राइंग को लागू करने की रुचि रखते हैं, वह down, move और up है।  इनमें से प्रत्येक का जवाब देने के लिए विधि में एक स्विच स्टेटमेंट को जोड़ें: 

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

चरण 3

स्विच स्टेटमेंट के बाद, व्यू (View) को अमान्य करके और सही मान लौटाकर विधि को पूरा करें:

invalidate कॉलिंग की वजह से onDraw विधि निष्पादित होगा।


3. रंग चुनना 

चरण 1 

अब पैलेट से रंग चुनने की क्षमता को, उपयोगकर्ता के लिए लागू करें। ऐप के मुख्य गतिविधि (main Activity) में, निम्न आयात (इम्पोर्ट) जोड़ें:

क्लास में निम्न उदाहरण चर (वेरीअबल) जोड़ें:

यह कस्टम व्यू (custom View) का उदाहरण है, जिसे हमने लेआउट में जोड़ा था। मौजूदा कोड के बाद  onCreate  के अंदर, इस चर (वेरीअबल) को लेआउट से संदर्भ (reference) पुनः प्राप्त करके इन्स्टैन्शिएट करें:

हमारे पास अब ऐसा व्यू (View) है जो गतिविधि (Activity) में प्रदर्शित होता है जिस पर हम DrawingView क्लैस में तरीकों (methods) को कॉल कर सकते हैं।  

चरण 2

हमने ड्रॉइंग व्यू क्लास (drawing View class) में प्रारंभिक पेंट रंग सेट किया है, अब उपयोगकर्ता को उसे प्रबंधित और प्रतिबिंबित (reflect and manage) करने के लिए इंटरफ़ेस सेट करते हैं।  मुख्य गतिविधि क्लैस (main Activity class) में, पैलेट में पेंट रंग बटन का प्रतिनिधित्व करने के लिए एक और आवृत्ति वेरीअबल (instance variable) जोड़ें:

onCreate के अंदर, हम अब पैलेट क्षेत्र में पहले रंग का रंग बटन पुनः प्राप्त करना चाहते हैं, जिसे शुरू में चुना जा रहा है। पहले उस रैखिक लेआउट (Linear Layout) को पुनः प्राप्त करें जिसमें यह समाहित है:

पहला बटन प्राप्त करें और उसे इंस्टेंस वेरीअबल के रूप में संग्रहीत करें:

हम यह दिखाने के लिए बटन पर एक अलग ड्रॉ योग्य छवि (draw-able image) का उपयोग करेंगे जो वर्तमान में चयनित है: 

इस फाइल को अपने ऐप के ड्रॉएबल (drawables) में जोड़ें, अब इसे "paint_pressed.xml" नाम दें  और निम्नलिखित आकार को दर्ज करते हूए: 

यह "paint.xml" ड्रॉएबल जैसा है  जो हमने पिछली बार बनाया था, लेकिन पेन्ट के चारों ओर एक गहरे रंग के साथ।

चरण 3

अब हम उपयोगकर्ता को रंग चुनने दे सकते हैं।  जब हमने पिछली बार लेआउट बनाया था, हमने कलर पैलेट बटनों के लिए एक onClick विशेषता को सूचीबद्ध किया - अब अपने मुख्य गतिविधि क्लैस (main Activity class) में विधि को जोड़ें:

इस पद्धति के अंदर, पहले जांचें कि उपयोगकर्ता ने एक पेंट रंग क्लिक किया है जो वर्तमान में चयनित नहीं है:

if  ब्लॉक के अंदर, हमारे रंग के प्रत्येक बटन के लिए सेट किए गए टैग को पुनः प्राप्त करें, चुना हूआ रंग का प्रतिनिधित्व करते हुए:

हमें रंग सेट करने के लिए कस्टम व्यू क्लास (custom View class) का उपयोग करना होगा। अब DrawingView क्लास पर जाएं और निम्नलिखित विधि जोड़ें: 

विधि के अंदर, व्यू (View) को अमान्य करके शुरू करें:

फिर, पार्स करें और ड्राइंग के लिए रंग सेट करें: 

अपने मुख्य गतिविधि (main Activity) में, रंग टैग को पुनः प्राप्त करने के बाद paintClicked विधि में, कस्टम ड्राइंग व्यू वस्तु (custom drawing View object) पर नई विधि को कॉल करें: 

अब नए चुने हुए पेंट को प्रतिबिंबित करने के लिए UI को अप्डेट (update) करें और पिछले वाले को वापस सामान्य पर सेट करें:


निष्कर्ष

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.