بسم الله الرحمن الرحيم
(رب اشرح لي صدري ويسر لي امري واحلل عقدة من لساني يفقهوا قولي)
السلام عليكم ورحمة الله وبركاته
في الدرس السابق قمنا بانشاء تطبيق أندرويد وقمنا بتصميم واجهة تسجيل الدخول، لكننا لم نتطريق الى خطوات انشاء تطبيق أندرويد باستخدام الفيجوال ستوديو 2017 بتقنية Xamarin، لذا في هذا الدرس سنقوم بذكر هذه الخطوات وايضا سنقوم باذن الله ببعض التحسينات على واجهة تسجيل الدخول ونشرح بعض الخصائص الاضافية.
لانشاء تطبيق أندرويد باستخدام VS 2017 اتبع الخطوات الاتية:
File-->New Project-->Android-->BlankApp(Android)
حيث يتكون مشروع الأندرويد من عدة مجلدات قمنا بشرحها في هذا الدرس http://vb4arb.com/vb/showthread.php?tid=22874
بعض الملاحظات يجب ذكرها حول مشروع الأندرويد:
-عند الدخول الى Properties من خلال نافذة الـ Solution ستجد عدة اقسام منها:
Application
ِAndroid Manifest
واقسام اخرى.
-كل تطبيق أندرويد لها Package Name خاص بها وفريد.
-يجب تحديد miniSDK والــ targetSDK التي سيدعمها التطبيق.
كل هذه الامور وامور اخرى سنخصص لها درس خاص باذن الله
طيب الآن لننتقل الى تحسين واجهة تسجيل الدخول ليصبح بالشكل التالي:
من نافذة Solution Explorer قم باستبدال الكود السابق للتصميم بالدخول الى Resource-->Layout-->Main.axml
ثم افتح القسم Source واستبدل الكود الموجود بهذا الكود كي يبدو الشكل مثل الصورة أعلاه:
PHP كود :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="LogIn App"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:layout_marginBottom="20dp"
android:textSize="28sp" />
<Space
android:layout_height="80dp"
android:layout_width="match_parent" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="User Name:"
android:layout_marginStart="10dp"
android:textSize="24sp" />
<EditText
android:id="@+id/userName"
android:textSize="20sp"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:gravity="left"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Password:"
android:layout_marginStart="10dp"
android:textSize="24sp" />
<EditText
android:id="@+id/password"
android:textSize="20sp"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:gravity="left"
android:inputType="textPassword"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp" />
<LinearLayout
android:orientation="horizontal"
android:layout_marginStart="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="@+id/okButton"
android:text="Ok"
android:textSize="20sp"
android:textAllCaps="false"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<Button
android:id="@+id/cancelButton"
android:text="Cancel"
android:textSize="20sp"
android:textAllCaps="false"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</LinearLayout>
</LinearLayout>
طيب الان لنتعرف على بعض الادوات والخصائص الاضافية التي استخدمناها لتغيير واجهة تسجيل الدخول لتبدو كما في الصورة أعلاه:
layout_margin: عبارة عن مساحة بالاتجاهات الاربع عن الحاضنة أو الادوات، ولها عدة اقسام حيث كل قسم يتحكم بالبعد في اتجاه معيّن:
layout_marginTop: يتحكم ببعد الاداة من الاعلى.
layout_marginBottom: يتحكم ببعد الاداة من الاسفل.
layout_marginStart: يتحكم ببعد الاداة من البداية (اليسار اذا كانت لغة الجهاز انكليزي واليمين اذا كانت لغة الجهاز عربي).
layout_marginEnd: يتحكم ببعد الاداة من النهاية (اليمين اذا كانت لغة الجهاز انكليزي واليسار اذا كانت لغة الجهاز عربي).
padding: يتحكم ببعد النص داخل الاداة من الاتجاهات الربع، ولها عدة اقسام حيث كل قسم يتحكم بالبعد في اتجاه معيّن نذكر منها فقط اثنتان:
paddingStart: يتحكم ببعد النص من البداية (اليسار اذا كانت لغة الجهاز انكليزي واليمين اذا كانت لغة الجهاز عربي).
paddingEnd: يتحكم ببعد النص من النهاية (اليمين اذا كانت لغة الجهاز انكليزي واليسار اذا كانت لغة الجهاز عربي).
gravity: يتحكم بموقع محتوى الاداة (النص كمثال) ويشمل على عدة قيم: center, start, end, left, right....
inputType: نحدد من خلالها نوع المدخلات في أداة الـ EditText.
الأداة Space: عبارة عن أداة تستخدم لترك مساحات فارغة حسب الحجم المعطى لها.
الى هنا انتهينا من هذا الدرس والذي قمنا فيه بالتعديل على واجهة التطبيق وسنستكمل بقية الاضافات في دروس اخرى باذن الله.
والحمد لله رب العالمين
