القائمة الرئيسية

الصفحات

ماهو Table Layout وكيفية استخدامه؟

السلام عليكم متابعي مدونة مطيع الجابري سنقوم في هذا الدرس  بشرح Table Layout وكيفية استخدامه وفي تصميم واجهات تطبيقات الاندرويد وسنتعلم في هذا الدرس مايلي :-

1-ماهو table layout؟
2-كيفية استخدام table layout؟

1- مــــاهو Table Layout؟

Table layout  هو عبارة عن view group يقوم بترتيب العناصر views التي بداخله على شكل صفوف وأعمدة.
يتم استخدام الوسم Table row لتعريف صف واحد بداخل الجدول ومن ثم يتم وضع العناصر بداخل كل صف بشكل افقي بحيث كل صف ممكن يحتوي واحد او اكثر من العناصر.
2-كيفية استخدام table layout?
سنشرح الان كيفية استخدام table layout وذلك باستخدامه في تصميم واجهة بسيطة لتطبيق أندرويد كما في الكود ادناه:-


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?xml ​version="1.0"​encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
​​​​
    <TableRow>
​​​​​​
        <TextView
            android:text="User​Name:"
            android:width="120px" />
        <EditText
            android:id="@+id/txtUserName"
            android:width="200px"
    </TableRow>
​​​​
    <TableRow>
​​​​​​​
        <TextView android:text="Password:" />
        <EditText
            android:id="@+id/txtPassword"
            android:password="true" />
​​​​
    </TableRow>
    
​​​​<TableRow>
​​​​​​​
        <TextView />
​​​​​​
        <CheckBox
            android:id="@+id/chkRememberPassword"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Remember​Password" />
    </TableRow>
​​​​    <TableRow>
​​​​​​​
        <Button
            android:id="@+id/buttonSignIn"
            android:text="Log​In" />
    </TableRow>
</TableLayout>
نلاحظ من الكود اعلاه :-
تم تعريف table layout  ومن ثم تم تعريف 4 table row  اي بمعنى تم تعريف اربعة صفوف لوضع العناصر بداخلها كماياتي:-

1-في الصف الأول تم وضع textview و edittext لاسم المستخدم .
2-في الصف الثاني تم وضع textview و edittext لكلمة المرور .
3-في الصف الثالث. تم وضع check box.
4- في الصف الرابع من ثم تم وضع button الخاص بتسجيل الدخول.

ليكون تصميم الشاشة كمافي الشكل ادناه:-



تعليقات

تعليق واحد
إرسال تعليق

إرسال تعليق