بسم الله الرحمن الرحم
Layer List: عبارة عن drawable resource بحيث يتم من خلاله رسم عدة اشكال (مستطيل، دائري ...الخ) فوق بعض والشكل الاخير يطغى على كل الاشكال المرسومة.
في هذا الدرس سنعمل على مثال بحيث يتم تحويل شكل الـ Button الافتراضي الى الشكل التالي:
مع تغيير الشكل عند النقر.
حيث سنحتاج الى 3 ملفات xml:
خطوات انشاء ملف xml داخل مجلد drawable:
Right Click --> Add --> New Item -- >Data --> xml file --> Add
1- default_button.xml
PHP كود :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape
android:shape="rectangle"
android:useLevel="false">
<solid android:color="#3a7058"/>
</shape>
</item>
<item android:bottom="15dp">
<shape
android:shape="rectangle"
android:useLevel="false">
<solid android:color="#12525E"/>
</shape>
</item>
</layer-list>
الملف اعلاه يحتوي على two items حيث كل item بداخله شكل المستطيل وكل مستطيل له لون مختلف عن الاخر.
طيب السؤال هنا كيف اقوم باظهار كلا الشكلين؟ حيث اننا نعلم ان الشكل الاخير يطغى على كل الاشكال.
الجواب عن طريق اقتطاع مساحة من الشكل الثاني داخل ال item وذلك باستخدام الخواص:
bottom, top, end, start
هنا استعملنا bottom حيث قمنا باستقطاع مساحة قدرها 15dp من الشكل الثاني حتى نقوم باظهار نفس الجزء من الشكل الاول.
2- clicked_button.xml
PHP كود :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape
android:shape="rectangle"
android:useLevel="false">
<solid android:color="#12525E"/>
</shape>
</item>
<item android:bottom="15dp">
<shape
android:shape="rectangle"
android:useLevel="false">
<solid android:color="#3A7068"/>
</shape>
</item>
</layer-list>
هنا فقط قمنا بتبديل الالوان بين الـ items.
3- button_style
PHP كود :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/clicked_button"/>
<item android:state_pressed="false"
android:drawable="@drawable/default_button"/>
</selector>
في الملف اعلاه نختار الشكلين لكن مرة في حال النقر ومرة اخرة في الحالة الافتراضية لل button.
الخطوة الاخيرة هي اسناد الملف الاخير button_style الى الـ button عن طريق خاصية background:
PHP كود :
<Button
android:layout_width="200dp"
android:layout_height="70dp"
android:background="@drawable/button_style"
android:text="Hello World!"
android:padding="10dp"
android:textAllCaps="false"
android:textColor="#fff"
android:textSize="20sp"
/>
تحياتي لكم
