LogIn App LinearLayout #1

تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
LogIn App LinearLayout #1
#1
بسم الله الرحمن الرحيم
(رب اشرح لي صدري ويسر لي امري واحلل عقدة من لساني يفقهوا قولي)

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.


نلقاكم في درس آخر ان شاءالله.
 
والحمد لله رب العالمين
الرد
تم الشكر بواسطة: sendbad100 , Amir_Alzubidy , Amir_Alzubidy , ahmedabdelaliem
#2
شكراً جزيلاً
الرد
تم الشكر بواسطة:
#3
الله يرحم والديك
ويعطيك الصحة والعافية
  Heart   الرجاء البحث قبل وضع السؤال  Heart

   كل عام وانتم بالف بخير.  
الرد
تم الشكر بواسطة: Sajad


المواضيع المحتمل أن تكون متشابهة .
الموضوع : الكاتب الردود : المشاهدات : آخر رد
  LogIn App: zip align & uploding on Goolge Store #10 Sajad 5 345 16-01-18, 01:14 PM
آخر رد: حريف برمجة
  LogIn App: Archiving#9 Sajad 0 148 06-01-18, 07:40 PM
آخر رد: Sajad
  LogIn App: AppCompat #8 Sajad 7 325 04-01-18, 10:35 PM
آخر رد: حريف برمجة
  LogIn App: Tips #7 Sajad 1 174 30-12-17, 08:38 PM
آخر رد: حريف برمجة
  LogIn App: Styling Button #6 Sajad 2 240 19-12-17, 07:48 PM
آخر رد: Amir_Alzubidy
  LogIn App: Intents #5 Sajad 2 201 16-12-17, 03:23 AM
آخر رد: حريف برمجة
  LinearLayout Xamarin Sajad 4 233 13-12-17, 02:58 PM
آخر رد: Amir_Alzubidy
  LogIn App #2 Sajad 3 288 13-12-17, 02:54 PM
آخر رد: Amir_Alzubidy

التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 1 ) ضيف كريم