صورة في علبة حوار _ Sketchware
السلام عليكم ورحمة الله وبركاته
في هذه التدوينة سنشرح كيف تضيف صورة في علبة الحوار وهي عن طريق استخدام كود واحد ويمكنك من خلاله تغيير شكل علبة الحوار من حيث الزوايا واللون ...
الشرح
اولا : اولا نضيف الصور التي نريد اضافتها في علبة الحوار (Dialog) التي سنصممها .
ثانيا : نضغط على السهم المجاور لزر التجميع وهو (Run) ,وبعدها نضغط على (custom view) وبعدها نضغط على زر ( + ) ونقوم بتسميتها (custom) او اي اسم لكن مع حفظ الاسم اذا كان غير (custom) والغرض من انشاء هذه الصفحة لنقوم بتصميم علبة الحوار واضافة فيها الصور التي نريد اظهارها في علبة الحوار (Dialog) كما موضح بالصورة ادناه .
ثالثا : نضيف (Linear"V) ومن خلال الخصائص الخاصة به ونضغط على width ونختار (Match_Parent) بعدها نأتي الى الخاصية الثانية وهي Height ونختار (wrap_content) وبعدها نقوم بإضافة الصورة التي نريدها تظهر في علبة الحوار (Dialog) .
رابعا : الان نضغط على السهم المجاور لزر التجميع (Run) ونضغط على VIEW ونختار (main.xml) .
الشرح
اولا : اولا نضيف الصور التي نريد اضافتها في علبة الحوار (Dialog) التي سنصممها .
ثانيا : نضغط على السهم المجاور لزر التجميع وهو (Run) ,وبعدها نضغط على (custom view) وبعدها نضغط على زر ( + ) ونقوم بتسميتها (custom) او اي اسم لكن مع حفظ الاسم اذا كان غير (custom) والغرض من انشاء هذه الصفحة لنقوم بتصميم علبة الحوار واضافة فيها الصور التي نريد اظهارها في علبة الحوار (Dialog) كما موضح بالصورة ادناه .
ثالثا : نضيف (Linear"V) ومن خلال الخصائص الخاصة به ونضغط على width ونختار (Match_Parent) بعدها نأتي الى الخاصية الثانية وهي Height ونختار (wrap_content) وبعدها نقوم بإضافة الصورة التي نريدها تظهر في علبة الحوار (Dialog) .
رابعا : الان نضغط على السهم المجاور لزر التجميع (Run) ونضغط على VIEW ونختار (main.xml) .
خامسا : نقوم بإضافة زر (Button) لإظهار علبة الحوار (Dialog) .
سادسا : ندخل الى الحدث الخاص بالزر (Button) ونضيف الكود التالي عن طريق operator ويوجد آخر بلوك وهو (add source directly) نقوم بإضافته واضافة الكود اسفل الصورة .كما موضح بالصورة ادناه .
final AlertDialog dialog = new AlertDialog.Builder(MainActivity.this).create(); LayoutInflater inflater = getLayoutInflater(); View convertView = (View) inflater.inflate(R.layout.custom, null); android.graphics.drawable.GradientDrawable gd = new android.graphics.drawable.GradientDrawable(); gd.setColor(Color.RED); gd.setCornerRadius(30); gd.setStroke(10, Color.BLUE); convertView.setBackground(gd); dialog.setView(convertView); dialog.show();
سابعا : بعض الملاحظات عن الكود اعلاه :
أ - في حال اخترت غير اسم (custom) تقوم بأستبدالها في الكود بدل الاسم (custom) .
ب - اما خلفية علبة الحوار (Dialog) وهي (Color.RED) تستطيع تغيير (RED) الى اي لون مع مراعاة الكتابة بالاحرف الكبيرة .
ج - اما الحدود الخاصة بعلبة الحوار من حيث العرض واللون (10Color.BLUE) تستطيع تغييره الى اي لون فمثلا (20Color.BLACK) هنا الحدود سيكون عرضها 20 ولونها الاسود .
د -اما التقويس او نقول درجة التقويس كم تريدها فتستطيع تغييرها من خلال الأمرsetCornerRadius(30); فإذا اردت تغيير درجة التقويس فقم بتغيير قيمة 300 .
* نبذة مختصرة عن قسم CustomView
يستخدم هذا القسم لانشاء صفحات معينة حسب الغرض من انشاءها ويكون الوصول اليها والتحكم بما فيها من تخطيطات او حاجيات من خلال اي صفحة موجودة في القسم view ويكون التصميم ايضاً لما موجود في هذه الصفحة من حاجيات او تخطيطات في اي صفحة في القسم view .
استعمالات شائعة لهذه الصفحة
1 - تصميم علبة حوار الخروج او علبة حوار التنزيل
2 - تصميم شكل المحادثات وكمثال شائع كبرامج التواصل الاجتماعي
* نبذة مختصرة عن Linear V
يستخدم هذا التخطيط عند الحاجة في ترتيب التخطيطات او الحاجيات بشكل عمودي فما عليك بعد اضافة هذا اللاينر سوى سحب الحاجة او التخطيط الذي تريده وسيتم ترتيبه بشكل تلقائي داخل اللاينر .
* نبذة مختصرة عن الزر Button
يستخدم هذا الزر لتنفيذ اوامر معينة بعد الضغط عليه وهو يحتوي على ثلاثة احداث ونبدأ بأول حدث وهو شائع الاستخدام بشكل كبير في التطبيقات وهو حدث عند الضغط
_ حدث onClick
في هذا الحدث تضاف الاوامر التي تريد تنفيذها بمجرد الضغط على الزر .
اما الحدث الثاني وهو :
_ حدث onTouch
في هذا الحدث تضاف الاوامر التي تريد تنفيذها بمجرد لمسة خفيفة على الزر .
والحدث الاخير :
_ حدث onLongClicked
في هذا الحدث تضاف الاوامر التي تريد تنفيذها بمجرد الضغط المطول على الزر اي تستمر بالضغط على الزر الى حين تنفيذ الاوامر التي تمت اضافتها داخل هذا الحدث .
