تصميم الأندرويد

إحترف الـ Custom Drawables واصنع تصاميم رائعة

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

[alert heading=”تنبيه !” color=”#c67b38″ close=”true” style=”” id=”” class=””]فى هذا الشرح قمنا بتطبيق الـ Drawable على الـ Button كـأحد أنواع الـ view لكن يمكنك استخدام ما ستتعلمه فى هذا الشرح مع الـ Edittext وكذلك الـ TextView وأى مكون أخر . [/alert]

 

الـ Custom Drawables

نقصد بالـ custom drawables انها تعنى تصميم مخصص قابل للرسم  draw able  يمكن تطبيقه على الـ View وهو عبارة عن ملف xml يتم فيه وصف خصائص التصميم بالتحديد ثم يتم تطبيقه على الـ View بجعل خلفية الـ View هى هذا الملف الذى قمنا بأنشاءه .

إنشاء ملف drawable جديد

تستطيع إنشاء ملف drawable جديد بضغط زر الماوس الايمن على مجلد drawable واختيار New ثم Drawable resource file

create new drawable file

 

سأقوم بإنشاء ملف باسم hendiware

عند إنشاء ملف جديد  ستجد أن محتواه كالتالى :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

</selector>

حيث نجد هنا الـ Root Element أو الجذر الرئيسى  للملف هو selector اى محدد وهو عنصر عام سيحتوى على داخله عدة عناصر  من النوع item كل عنصر قد يكون drawable و له خواص محددة لكن الان كبداية نحن لا نريد عدة عناصر  بل سنبدأ باستخدم الـ tag shape  لذلك سنقوم بتعديله ليصبح هكذا

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

</shape>

 

التاج shape

بهذا التاج نقصد انشاء شكل عادى بمواصفات الشكل العادى فالشكل العادى له لون وقد يكون له خط خارجى boarder وقد يكون مشطوف الحواف اى دوائر ركنية أو عادية

داخل الـ tag shape هناك عدة tags ينكن استخدامها .

التاج solid 

نقوم باضافة solid tag  وله خاصية تسمى الـ color سوف نقوم باعطائه اللون هكذا وستلاحظ ظهور الـشكل فى نافذة preview فى أندرويد ستوديو

drawable in android studio

 

حسنا الان قمت بإنشاء أول شكل لى اريد جعله خلفية للزر قم بإنشاء زر جديد ثم قم بجعل الخلفية عباره عن مسار الملف الذى صنعناه هذا كالتالى :

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="131dp"
        android:background="@drawable/hendiware"
        android:paddingBottom="6dp"
        android:text="Hello "
        android:textColor="#fff" />

 

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

android rectangle button

لكن ستلاحظ ان الخلفية ثابته سواء ضغط على الزر ام لم تضغط لا يجرى عليها اى تغيير  لكن  لا تقلق سوف نقوم ببعض الاكشن  😉

هناك بعض الخواص الاخرى للـ shap مثل الـ corners هيا بنا نستخدم tag الـ  corners

 

التاج corners

التاج corners مسؤول عن أحرف الشكل أو اركانه الاربعة قم بإضافة التاج corners لنفس الملف السابق

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#156365" />
    <corners android:radius="25dp" />
</shape>

والتاج corners يحتوى على  خاصية الـ android:radius وهى عباره عن دوران الأركان جميعها  كالتالى :

Android Hendiware corner button

 أو يمكنك استخدام الخاصية المنفرده لكل ركن  كالتالى  :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#156365" />
    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="25dp"
        android:topLeftRadius="25dp"
        android:topRightRadius="0dp" />
</shape>

Android drawable 2 corners roundd

قم بالعبث بالارقام وتعديل الـ corners وجرب الاشكال المختلفة واستمتع .

android button

 

التاج gradient 

التاج gradient مسؤول عن عمل التدرجات اللونية  .

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#156365" />
    <corners
        android:bottomLeftRadius="25dp"
        android:bottomRightRadius="25dp"
        android:topLeftRadius="25dp"
        android:topRightRadius="25dp" />
    <gradient
        android:angle="270"
        android:endColor="#d53f4d"
        android:startColor="#54d5ff"
        android:type="linear" />
</shape>

والنتائج التالية باستخدام التاج مع خواص مختلفة

gradient
واليك نبذه عن كل خاصية من خواص التاج gradient

خاصية android:angle=”270″ تستخدم لتحديد زاوية التدريج هل تريد التدريج من أعلى لأسفل أم  من اليمين لليسار أم بدرجة مائلة وهكذا .

خاصية android:startColor=”#54d5ff”تستخدم لتحديد بداية بداية التدريج .

خاصية android:endColor=”#54d5ff” يتستخدم لتحديد لون نهاية  التدريج .

خاصية android:type=”linear” تستخدم لتحديد نوع التدريج هل هو linear تدريج خطى  أم radial قطرى من الداخل للخارج يمكنك التجربة بنفسك ورؤية التأثير .

خاصية android:gradientRadius=”30dp”تستخدم مع نوع التدريج الـ radial لتحديد القطر جربها وعدل الرقم وشاهد النتيجة.

خاصية android:centerX | android:centerXتستخدم لتحديد مركز التدريج اعطها نسبة مئوية وغير فيها وشاهد النتيجة .

خاصية android:centerColor=”#f45″ تستخدم لتحديد لون وسطى بين لون البداية والنهاية استخدمها ان اردت تدريج ٣ ألوان .

 

التاج stroke

مسؤول عن الـ border او الخط الخارجى المحيط .

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#156365" />
    <corners
        android:bottomLeftRadius="25dp"
        android:bottomRightRadius="25dp"
        android:topLeftRadius="25dp"
        android:topRightRadius="25dp" />
    <gradient
        android:angle="270"
        android:endColor="#d53f4d"
        android:gradientRadius="300dp"
        android:startColor="#54d5ff"
        android:type="radial" />

    <stroke
        android:width="2dp"
        android:color="#2b6a8e"
         />
</shape>

والنتيجة تكون كالتالى :

strok button android

هناك تاج اخر تابع لـ shape اسمه size للتحكم فى الحجم وتاج اخر اسمه padding وجميعا نعرف الـ padding بالطبع لذلك لن اقوم بشرحه هنا .

 

 

قائمة الطبقات layerlist 

هذه المرة لا نريد صناعة شكلا بل لدينا شكل جاهز التصميم لكن مكون من عدة طبقات مثل طبقات الفوتوشوب ونريد تنفيذه هنا  ابسط مثال يمكن أن تستخدمه فى الـ layer list هو الزر الـ 3D فالزر الـ 3d هو عبارة عن طبقتين لكن الطبقة السفلى بنفس اللون درجة أغمق لذلك تعطى ايحاء بأن الزر عبارة عن 3D كما فى الصورة التالية :

3d button trick

الان عرفنا خدعة الزر الـ 3d لنقم باستخدام الـ layer list فى تطبيقه أولا تستخرج الشكلين من الفوتوشوب أو من البرنامج الذى تستخدمه للتصميم  الى صور عادية

Android Custom drawable tutorials

ثم نقوم بنسخهم إلى الاندرويد ستوديو كصور عادية سواء فى مجلد ال drawable او mipmap

وداخل الاندرويد ستوديو نقوم بإنشاء ملف drawable جديد داخل مجلد drawable كما فعلنا سابقا سأسمى الملف هذه المرة three_d_button

ونقوم بتغيير الـ selector الافتراضى  ليصبح layer-list كالتالى:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

</layer-list>

بالنسبة للـ layer-list فإنها لديها تاج واحد وهو تاج item ويتكرر هذا التاج بعدد الطبقات مثل طبقات الفوتوشوب كل طبقة جديدة يمكن أن نضعها هنا كـ item

الان نقوم بوضع الصورتين السابقتين كل واحدة على هيئة item

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/test2" />
    <item android:drawable="@drawable/test1" />
</layer-list>

بعد تنفيذ هذا الكود يكون لدينا layerlist لكن الـ layer الثانية تغطى الأولى تماما ونحن نريد رفع الطبقة الأولى للأعلى قليلا وبالتالى نعطى item التى تحمل الصورة test1 خاصية buttom ليتم عمل ما يشابه الmargin وبالتالى يظهر جزء من الطبقة الخلفية مكونا شكل الـزر الـ 3D كما هو موضح بالصورة التالية

3dbutton

 

الان اجعل هذا الملف هو خلفية الـ button   android:background=”@drawable/three_d_button” وقم بتشغيل التطبيق وستجد النتيجة
android 3d button

 

لكن لا زلنا نمتلك أزرار ثابته لا تستجيب عند الضغط عليها ولا يتغير شكلها  ولهذا سنقوم بالحديث عن الـ selector  وهو التاج الافتراضى عند انشاء ملف drawable جديد .

 

الـ drawable متعدد الـ drawables 

انه مثل شكل متعدد الاشكال فنحن هنا نريد صناعة شكل للزر لكن يحتوى على أكثر من شكل ، شكل معين عند الضغط ، شكل معين عندما يكون معطلا وهكذا .

وبالتالى نقوم بإنشاء ملف drawable جديد وهذه المرة سنسميه finalbtnstyle وسنترك الـ selector كـ جذر الملف وكما قلن اننا الان ننشىء شكل يحتوى على عدة اشكال بداخله وبالتالى نستطيع اسناده كخلفية للزر وفى الحالة العادية يعرض الشكل العادى وفى حالة الضغط يعرض شكل معين وقت الضغطة وهكذا ..

لكى نقوم بإنشاء شكل سوف نضيف item وهى تمثل الشكل  عند البدء باضافة الـ item ستجد عدة اقتراحات
item suggest

ا الـ selector يسمح لك بتحديد الحالة التى تريدها فأنت تريد انشاء تصميم معين للزر مثلا وتريد عند الضغط على الزر من قبل المستخدم أن يتم تغيير اللون مثلا أو ان يتم زيادة حجم الخط الخارجى او تغيير الشكل تماما  المهم تريد صنع تأثير مختلف عند الضغط على الزر عن حالة الثبات العادية والان ببساطه لن تختار شىء وسنقوم باغلاق الـ item وبذلك نقصد الحالة العادية الnormal

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        
    </item>

</selector>

فى داخل تاج الـ item سوف نننسخ الكود السابق الخاص بملف three_d_button اختصارا للوقت بدلا من عمل استايل جديد ليكون الكود كالاتى :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item android:drawable="@drawable/test2" />
            <item android:bottom="10px" android:drawable="@drawable/test1" />
        </layer-list>
    </item>
</selector>

الان لو قمت بالذهاب لـلـ button وقمت بتغيير الخلفية الى android:background=”@drawable/finalbtnstyle”

 

ستجد ان كل شىء تمام وعند تشغيل التطبيق سيعمل الان نريد عمل تأثير أثناء الضغط مثلا نريد الزر الـ 3d كأنه تم ضغطه وهذه الخدعة تكمن فى تقليل المسافة بينه وبين الـ layer الخلفية  وبالتالى سنقوم بإنشاء item جديدة لكن سنحدد أنها خاصة بحالة الضغط على الزر فقط  كالاتى :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <layer-list>
            <item android:drawable="@drawable/test2" />
            <item android:bottom="5px" android:drawable="@drawable/test1" />
        </layer-list>
    </item>

    <item>
        <layer-list>
            <item android:drawable="@drawable/test2" />
            <item android:bottom="10px" android:drawable="@drawable/test1" />
        </layer-list>
    </item>


</selector>

لاحظ أننا حددنا حالة الـ item لـ state pressed اى ان الكود الموجود داخل تاج الـ item سينفذ عند الضغط فقط ولاحظ اننا قللنا buttom لنجعل الزر كأنه تم ضغطه بالاضافة أننا وضعنا الـ item الجديدة فى حالة الضغط بالاعلى والـ item العادية بالاسفل وهذا الترتيب مهم واذا قمت بعكس الترتيب لن يعمل .

نقوم الان بتشغيل التطبيق وتكون النتيجة كالتالى :

buttonclick

كود اخر على الـ selector مع النتيجة لتتضح الفكرة

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape>
            <solid  android:color="#156365" />
            <corners
                android:bottomLeftRadius="25dp"
                android:bottomRightRadius="25dp"
                android:topLeftRadius="25dp"
                android:topRightRadius="25dp" />
            <gradient
                android:angle="270"
                android:endColor="#d53f4d"
                android:gradientRadius="550dp"
                android:startColor="#54d5ff"
                android:type="radial" />

            <stroke
                android:width="2dp"
                android:color="#2b6a8e" />

        </shape>
    </item>

    <item>
        <shape>
            <solid  android:color="#156365" />
            <corners
                android:bottomLeftRadius="25dp"
                android:bottomRightRadius="25dp"
                android:topLeftRadius="25dp"
                android:topRightRadius="25dp" />
            <gradient
                android:angle="270"
                android:endColor="#d53f4d"
                android:gradientRadius="250dp"
                android:startColor="#54d5ff"
                android:type="radial" />

            <stroke
                android:width="1dp"
                android:color="#2b6a8e" />

        </shape>
    </item>


</selector>

 

النتيجة :

buttonclicked2

طبعا يمكنك انشاء item فى حالة الـ focus و item فى حالة disable وهكذا حسب الـ view وحسب ما تقضيه الحاجة .

 

ملحوظة

عند اعطاء اللون لأى مما سبق  يمكنك تحديد الشفافية عن طريق زيادة hex من 00 وحتى ff للتحكم فى الشفافية ايسر اللون  مثال اللون التالى هو عباره عن ابيض شفاف  #33ffffff حيث تشير الـ ffffff الى اللون الابيض وتشير الـ 33  إلى درجة الشفافية والتى يمكن تغييرها حتى تصل الى ff وهى درجة الوضوح التام أو تقليلها حتى تصل الى 00 وهى درجة الاختفاء التام

 

الى هنا تنتهى التدوينة نتمنى لكم تصاميم رائعة  .

السابق
المؤثرات الحركية فى تطبيقات الأندرويد
التالي
دليل المبتدئين لـ تعلم برمجة الأندرويد

18 تعليق

أضف تعليقا

  1. مقال رائع جدا
    ومن فضلك اريد ان اطرح سؤال

    اريد ان اقوم بعمل border من bottom
    ان يكون من جهة واحده فقط

    هل ممكن

    وشكراا

    1. Hendiware قال:

      بالتأكيد يمكن وبأكثر من طريقة وفى هذا المقال طريقة الـ layer list يمكنك تنفيذ الموضوع بها مثلما فعلنا مع الـ button الـ 3d ولو لاحظت انه يشبه زر مع border من الاسفل لا اكثر وسيبدوا border bottom واضحا اكثر اذا كان الشكل مستطيل .

  2. شكرا ونتمنى وضع شروحات للمتقدمين بالبرمجة لان اكثر المواقع تنشر الاساسيات وشكرا لان استخدمت العربية الفصحا 🙂

    1. Hendiware قال:

      إن شاء الله ياغازى وإن كان هناك موضوع معين متقدم ومهم وتريد منا الكتابة عنه راسلنا .

  3. Hadeel قال:

    مشكور الموضوع مفيد كتير
    اتمنى التفوق والتقدم لهاي المدونه

    1. Hendiware قال:

      شكرا هديل .

  4. المدونة ديه فوق الممتاز.

  5. ميسرة قال:

    الله يسعدك ع هالشرح
    استمر استمر الك مستقبل

  6. عبدالرزاق الفيتوري قال:

    محتوي غني ورائع …..مشكورين

  7. أحمد ناصر قال:

    رائع جدا
    بارك الله فيك

  8. عبدالله النجار قال:

    ما شاء الله شرح محترم ومفيد

  9. Abdallah J.Murad قال:

    شكرا على المحتوى الممتاز

  10. حسين سعد قال:

    شكرا على الشرح الرائع
    ممكن شرح موضوع الـ Custom Animations

  11. براءة الناصر قال:

    يعطيكم العااافية 🙂 في ميزان حسناتكم ان شاء الله^^

  12. اسلام الشناوي قال:

    شكرا اتمني الاستمرار ومزيد من التطوير

  13. Ahmed قال:

    جزاكم الله خيرا , شرح وافي و اكثر من ممتاز , قمت بالتعليق لاوجه لكم الشكر , و الله اسأل ان يكتب لكم التوفيق

  14. zakaria قال:

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

  15. منال قال:

    جزاك الله خيرا مقال مفيد ومبسط

اترك تعليقاً

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.