تطبيق عملي ( مثال ) لتصميم زر متعدد المزايا

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته …
سنبدأ اليوم في دروس التطبيقات العملية ( الأمثلة ) لبعض الدروس التي قدمناها من قبل واليوم سنتكلم عن تصميم زر بمظهر جذاب و تصميم رائع يتميز بحواف مائلة وتغيير اللون لخلفية الزر والنص عند الضغط عليه .

الخطوات البدائية :

أولا :
درس تصميم الزر : اضغط هنا.
وإن كان بعض التغير في الكود ولكن الطريقة والصيغة نفسها .
درس الخطوط : اضغط هنا.
ثانيا :
سنقوم بإنشاء تطبيق ووضع زرين في Main Activity ( الأول مع حواف مائلة والثاني بدون ) .
ثالثا :
إنشاء عدة ملفات Drawable :

1.  العدد (2) ملفات Drawable لأجل الحواف المائلة .
2.  العدد (3) ملفات Drawable من أجل تغيير اللون عند الضغط .
الملفين الأوليين للزر الأول ( أول ملف للزر من دون الضغط والثاني للزر عند الضغط ) لن نتعامل معهما بشكل مباشر بل عبر ملفات Drawable الثلاثة القادمة .
الملفات الثلاثة الباقية ( أول ملف للزر الأول لتحويل خلفية الزر بين حالتين الضغط و عدم الضغط < سنتعامل مع ملفين الدروبول الأوليين ضمنهما > – ثاني ملف للزر الثاني لتحويل خلفية الزر بين حالتين الضغط وعدم الضغط – الثالث مشترك بين الزرين ومهمته تحويل لون نص الزر بين حالتين الضغط وعدم الضغط ) .
ملاحظة : الملفات الخاصة للزر الأول أكثر من الثاني كون له مزايا أكثر .
رابعا :
ملف الدروبول الأول والثاني الخاص بالزر الأول ( الفرق بينهما بعكس الألون فقط لا غير ) .

  • back_2

  • back

والآن الملفات الخاصة بالتحويل بين حالتي الضغط وعدم الضغط :
الأول الخاص بالزر الأول ( ضمنهما ملفان الدروبول الأوليان الخاصان بتصميم الزر والحواف ) :

  • button
الثاني الخاص بالزر الثاني :

  • button_o
الثالث المشترك بين الزرين لتغيير لون النص :

  • button_
والآن نذهب للياوت الرئيسة ونضيف الخواص الأزرار :
الزر الأول :
لاحظنا إضافة خاصية الخلفية وربطها بملف الدروبول الخاص بالزر الأول ( الأول من الثلاثة ) :
الزر الثاني :
وأيضا خاصية الخلفية الخاصة بالزر الثاني وربطها بملف الدروبول الخاص بالزر الثاني ( الثاني من الثلاثة ) :
وخاصية لون نص الزر المشتركة بين الزرين :
ملف الجافا :
ونتيجة المحاكاة :
حالة عدم الضغط ( الحالة الطبيعية للزر ) < الأول مع الحواف هو الزر السفلي > .

Screenshot_٢٠١٦-٠٦-١٤-١٩-١١-٥٣

حالة الضغط :

Screenshot_٢٠١٦-٠٦-١٤-١٩-١٣-٢٧

انتهت التدوينة , لا تنسونا من صالح دعاؤكم , دمتم في رعاية الله .
السلام عليكم ورحمة الله وبركاته …
( الرجاء الذكر في التعليقات في حال أي سؤال أو ملاحظة )

عن محمد معتز الشاغل

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

شاهد أيضاً

إضافة اعلانات Admob لسورس تطبيق الطريق إلى النجاح

بسم الله الرحمن الرحيم قبل مدة قمنا بنشر  “ سورس تطبيق الطريق إلى النجاح “, …

7 تعليقات

  1. أحمد الجوهري

    جــزاكـمـ الله خيــراً

  2. احمد عصام

    ممكن سوال بعيد عن الدرس ؟ انا مبتدا في الاندرويد وعايز اعمل ابلكيش بيعمل الاتي : ابديت و انسرت ودليت في الداتا بيز؟؟؟

    عايز بس اعرف ابدا في ازي ابدا ارسم واخطط للمشروع مثلا كام اكتفتي كام كلاس هستخدم اكود ايه؟؟
    ولو ممكن فيديو يكون في نفس فكرت الداتا بيز عشان انا مبتدي ولسه الداتا ومش ؟؟؟

    • محمد معتز الشاغل

      يا هلا أحمد .
      أولا يجب معرفةماهية برنامجك وتشوف شو بيتطلب حتى لو كنت مبتدأ وتحط كلشي على ورقة وبعدين اطرح أسئلتك

  3. يعطيك العافية وثابر للأمام
    عندي سؤال ليش استخدمت العنصر gradient بدل ما تستعمل solid مادام اللون البدائي والنهائي مارح يتغير وبالتالي مارح يصير عندك تدرج باللون

    • محمد معتز الشاغل

      الله يعافيك ، شكرا .
      كلامك صحيح . بس انا حطيت كل الاختيارات مشان إذا حدا حب يغير ومشان ما أضيع الناس بالكود .

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

67 − 62 =