بسم الله الرحمن الرحيم
(رب اشرح لي صدري ويسر لي امري واحلل عقدة من لساني يفقهوا قولي)
LogIn App Xamarin.Android #1
سبق وتكلمنا في درس سابق عن LinearLayout وكيفية استخدامها في انشاء تطبيقات الأندرويد، لذا في هذا الدرس سنتعلم بشكل أكثر عن LinearLayout وذلك بانشاء مثال سنستخدم فيه عدة أدوات وسنتطرق على عدد من خصائص الادوات و استخداماتها.
المثال كما هو واضح من العنوان عبارة عن واجهة تسجيل الدخول وتكون بهذا الشكل:
لتصميم هذا الشكل نحتاج الى LinearLayout عدد 2، واحدة تكون بشكل عمودي واخرى ستكون بشكل افقي.
والكود المستخدم لتصميم هذا الشكل حيث كما ذكرنا تكون على شكل ملف AXML باسم Main.axml :
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:textSize="28sp" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="User Name:"
android:textSize="24sp" />
<EditText
android:id="@+id/userName"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Password:"
android:textSize="24sp" />
<EditText
android:id="@+id/password"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<Button
android:id="@+id/okButton"
android:text="Ok"
android:textAllCaps="false"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<Button
android:id="@+id/cancelButton"
android:text="Cancel"
android:textAllCaps="false"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</LinearLayout>
</LinearLayout>
الادوات التي بداخل LinearLayout العمودي هي:
TextView: وعنوانه LogIn App، أداة لعرض النصوص.
TextView: وعنوانه User Name.
ُEditText: أداة تستقبل المدخلات.
TextView: وعنوانه Password.
EditText: أداة تستقبل المدخلات.
أما الادوات التي بداخل LinearLayout الافقي هي:
Button: بعنوان Ok، أداة أمر.
Button: بعنوان Cancel.
والان لنتعرف على بعض الـ Attributes التي استخدمناها في بعض الادوات:
id: الاسم البرمجي للأداة، حيث من خلالها يمكن التحكم في الاداة بشكل برمجي.
text: النص الظاهر على الأداة.
textSize: تحديد حجم النص.
layout_height: حجم الاداة الطولي وتشمل على خيارين افتراضيين (match_parent, wrap_content).
layout_width: يتم من خلاله تحديد عرض الأداة وتشمل على خيارين افتراضيين (match_parent, wrap_content).
match_parent: هذا الخيار يجعل عرض أو ارتفاع الاداة بحجم عرض أو ارتفاع الحاضنة.
wrap_content: هذا الخيار يجعل عرض أو ارتفاع الاداة بحجم العنصر الذي بداخله.
ويمكن ايضا تحديد الحجم بشكل يدوي وذلك بكتابة رقم بدل الخيارات الافتراضية حيث تكتب بهذا الشكل (50dp كمثال).
layout_gravity: يتم من خلاله تحديد موقع الاداة داخل الحاضنة. وتشمل على عدة خيارات منها:
center, bottom, top, start, end ...etc.
textAllCaps: يتم من خلاله تحديد شكل النص من ناحية الـ Capital and Small.
حيث تظهر النص على أداة الـ Button بشكل Capital بشكل افتراضي، لذا نستخدم هذه الخاصية لكي يظهر النص بالشكل الذي يكتبه المطوّر وذلك بجعل الخاصية false.
نلقاكم في درس آخر ان شاءالله.
والحمد لله رب العالمين