إضافة زر عند النقر عليه يمكن للمستخدم إضافة صورة داخل تطبيق Skechware بدون انترنت

إضافة زر عند النقر عليه يمكن للمستخدم إضافة صورة داخل تطبيق Skechware بدون انترنت

إضافة صورة داخل تطبيق Skechware في هذا الدرس الجديد سوف نتعلم  كيفية إضافة زر عند النقر عليه يمكن للمستخدم إضافة صورة داخل تطبيق Skechware.

اضافة زر لاضافة صورة من الهاتف الى داخل التطبيق

خطوات اضافة الزر عند النقر عليه

أسعد الله أوقاتكم بكل خير متابعي مدونة FREE20ANDROIDY، في هذا الدرس لهذا اليوم من سلسلة تعلم إنشاء تطبيقات الأندرويد بإستخدام الهاتف وتحديدا بإستخدام تطبيق سكتشوير Skechware، سوف نشرح لكم كيفية إضافة زر عند النقر عليه يمكن للمستخدم إضافة صورة داخل التطبيق Skechware بدون انترنت.

واجهه المستخدم

نقوم بالتوجه الى تطبيق Skechware ونقوم بفتحة ومن ثم سوف تظهر لنا الواجهة الرئيسية التي نقوم من خلالها با ادراج المكونات والعناصر التي يمكن للمستخدم رؤيتها والتي غالبا ما تسمى واجهه المستخدم.

خطوات التنفيذ:

Liner v بعرض كامل

أولا: نقوم بسحب لينير من نوع (Liner v) الى واجهة المستخدم أو واجهه العمل يمكنك تسميتها كما يحلو لك عزيزي وعزيزتي المتابع، ومن ثم نقوم بوضع العرض لها (width <---> ) ماتش بيرنت (match_parent)، ووضع ال gravity لها (center_horizontal) و (center_vertical)، من أجل ان تاخذ المساحة كامله عند اختيار الصورة اذا كنت تريد ان تقوم بصنع تطبيق يقوم با اختيار صورة من المعرض الخاص بك ووضعها كخلفية له.

ثانيا: بعد سحب لينير من نوع (Liner v)، نقوم بسحب زر (button) والذي من خلاله يتم الضغط عليه وأختيار الصورة المراد عرضها بداخل تطبيقنا من الهاتف الخاص بنا وبدون أن يكون المستخدم متصلا بالانترنت، بعض تطبيقات اضافة الخلقيات بداخل التطبيق تستخدم هذه الخاصية.

ثالثا: بعد إضافة الزر والذي بدورة يقوم بالدخول الى معرض الصور او مجلد الصور الذي بداخل الهاتف المحمول الخاص بنا نقوم بالتوجهه الى خيار المكونات والذي يسمى (component)،

component

بعد أن تقوم بالذهاب الى الخيار component، تقوم بالضغط على علامه +، تقوم با اختيار المكون (FilePicker)، ونقوم بكتابة أسم هذا المكون في المربع الأول، نقوم بتسميته (file)، أو أي أسم تريده أنت، وفي المربع الثاني نقوم با الضغط على علامة السهم بجانب المربع ونختار (Image files)، وضغط select.

نختار (Image files)

رابعا: نقوم با التوجه الى قائمة (EVENT)، ومن ثم نقوم بالتوجهه الى قائمة (MoreBlock)، ونقوم بالضغط عليها.

قائمة (MoreBlock)

كما هو موضع في الصور أعلى المشار اليها بوصف قائمة (MoreBlock)، نقوم بالضغط على رقم(3).

خامسا: نقوم بالضغط على علامة + وهنا سوف نقوم با اضافة البلوك الذي يقوم بعمل اضافة الصورة عند الضغط على الزر المخصص لها.

أضافة موربلوك مخصص

في الجزء الخامس من هذا الدرس بعد الضغط على علامة ال + والتي بدورها تقوم بنقلنا الى واجهة موربلوك هنا نقوم با اضافة البلوك المخصص كالتالي:

1. في المربع الأول والذي يحتوي على أسم Block Name،  نقوم بكتابة اسم البلوك وليكن set image، لاتقم بعمل مسافة بينهما.
2. في المربع الذي يحتوي على اسم Add variable، نقوم با الضغط عليه وأختيار  variable من نوع view، ومن ثم نقوم بالضغط على add.
3. في المربع الرابع نقوم بكتابة from Path، ومن ثم نقوم بالضغط على add.
4. في الخطوة الرابعة نقوم با الضغط على  Add variable، ومن ثم نختار variable نوعه String، ونقوم با اضافة في المربع الثاني كلمة path، ونضغط على Add اسفل الصفحة بجانب زر ال cancel.

بعد إضافة البلوك والذي أسميناه set image نقوم بالضغط عليه ومن ثم سوف يظهر لنا بالشكل التالي.

زر اضافة البلوكات

في هذه الواجهة نقوم بالتوجهه الى زر اضافة البلوكات ومن ثم نقوم باختيار operator وسحب البلوك add source directly الى اعلا واضافة الكود سورس بداخله:

كود سورس المور بلوك

رابط الكود  في وصف الفيديو اسفل

بعد إضافة الكود بداخل بلوك add source directly نقوم بالتوجهه الى مكون ال COMPONENTS

وسنلاحظ وجود المكون FilePicker الذي أضفناه سابقا، انظر الصورة أسفل:

FilePicker

نقوم بالضغط على المكون FilePicker، ومن ثم سوف يظهر لنا خياران onfilespicker و onfillespickercancel، نضغط على الخيار onfilespicker، وسوف تظهر لنا واجهة onfilespicker، والتي سوف نقوم بربطها مع البلوك الذي قمنا با اضافته في المور بلوك وهو با اسم  setimage الذي قمنا با اضافته في الجزء الخامس رقم 1.

ربط filePicker مع setimage

في هذه الصورة سنلاحظ انه قمنا ربط filePicker مع setimage، وسنشرح لكم كيف قمنا بذلك:

ربط filePicker مع setimage

 سحب بلوك setimage وربطة مع filePicker

نقوم بالضغط على بلوك more block، وستنبثق لنا قائمة البلوكات التي قمنا با أنشاءها في خيار المور بلوك عندما قمنا با انشاء البلوك setimage، ومن ثم نقوم بسحب البلوك setimage كما هو موضح في الصورة أعلاه.

في البلوك setimage، نقوم بوضع ال view، ونحدد في أي عنصر نريده أن يظهر، في شرحنا هنا نريده أن يظهر في اللينير ونحدد رقمها وهي لينير رقم 1.

بعد ذلك سنلاحظ وجود بلوك بعد كلمه frompath ويسمى get at، سنقوم با اضافته من خلال الضغط على بلوك list.

إضافة البلوك get at

إضافة البلوك get at

نقوم با اضافة البلوك get at من قائمة list، ونعطيه القيمة 0، بعد ذلك نقوم بسحب البلوك المشار اليه رقم 1 (List String: filespath)، ونقوم بسحبه بعد البلوك get at، الى هنا عزيزي وعزيزتي المتابع نكون قد انتهينا من إضافة وربط  بلوك setimage مع filePicker، يتبقى لدينا خطوة أخيره الاء وهي كيفية إضافة الزر الذي بواسطته يقوم المستخدم بالنقر عليه و إضافة الصورة من داخل التطبيق بدون أن يكون المستخدم متصلا بالأنترنت.

خطوات أضافة زر button وإضافة الصور

إضافة الزر button

نقوم بالرجوع الى الشاشة لتطبيق سكتشوير، ومن ثم نقوم بسحب وإفلات زر Button، الى الواجهة الرئيسية ومن ثم نذهب الى خيار Event، وسوف يظهر لنا الواجهة في الصورة اهلا، صورة إضافة الزر button، نقوم بالضغط بلوك Component، ومن ثم نقوم بالنزول الى نهاية البلوكات ونختار البلوك، في السهم المشار إليه اسفل الصورة نقوم با اختيار اسمFilePicker والذي اسميناه File.

أختيار File من قائمة FilePicker

بعد ذلك نقوم بعمل RUN وبناء للتطبيق.

والى هنا نكون قد وصلنا الى نهاية شرحنا لهذا الموضوع وهو كيفية إضافة زر عند النقر عليه يمكن للمستخدم إضافة صورة داخل تطبيق Skechware بدون انترنت، نمتنا أن يكون هذا الدرس مفهوما ومفيدا للجميع وشكرا لكم، نرجو منكم الدعم بمشاركة هذا الدرس لجميع أصدقائكم وايضا الأشتراك في قناتنا على  اليوتيوب فلا تبخلو علينا، وجزاكم الله خيرا، والسلام عليكم ورحمة الله وبركاته.

رابط المشروع :

فيديو الشرح