يناير 20

تعلم معنا برمجة الأندرويد: 6- أنواع الـ ViewGroups

غير مصنف أضف تعليق

viewgroups

الدرس السادس : أنواع الـ ViewGroups

أهلا وسهلا بكم في الدرس السادس من سلسلة تعلم معنا برمجة الأندرويد .. أسأل الله أن ينفعنا وإياكم بما علمنا.

في الدرس الماضي تكلمنا عن أنواع الـ Views المختلفة وخصائصها وتعلمنا كيفية إستخدامها لتصميم واجهات المستخدم في تطبيقاتنا ، في هذا الدرس سنتكلم عن الـ ViewGroups التي يمكن إستخدامها لتنظيم طريقة عرض الـ Views علي الشاشة ، ويمكن استخدام أكثر من ViewGroups معا لتكوين شكل معين وعمل layout مركب.

لا أدري ماذا عنكم ولكني شخصيا أستمتع كثيرا بتعلم الأساليب المستخدمه في تصميم واجهات المستخدم .. فأتمني أن يكون الدرس ممتع لكم أيضا.

النقاط الرئيسية :

  •  أنواع الـ ViewGroups المختلفة

1- ترتيب خطي LinearLayout

2- ترتيب جدولي TableLayout

3- ترتيب مترابط RelativeLayout

أنواع الـ ViewGroups وأهميتها :

الأكتفيتي ممكن أن يحتوي علي أكثر من Views  و ViewGroups ، وأحيانا يطلق علي الفيو widget مثل Button و EditText ، ويتم تركيب الـ widgets معا بداخل ViewGroup الذي يمكن وضعه داخل ViewGroup آخر يحتوي أيضا علي widgets آخري لتكوين الـ layout أو الشكل النهائي لواجهة المستخدم ، فعمليا من الشائع تركيب أنواع مختلفة من الـ layouts لعمل واجهة المستخدم التي نريدها كما يظهر في الصوره ، وفي هذا الدرس سنتعرف علي أهم أنواع الـ layout مثل الترتيب الخطي والجدولي والمترابط.

أولا : الترتيب الخطي LinearLayout :

يقوم بترتيب الـ Views في صف واحد أو عمود واحد علي حسب الاتجاه أفقي أو رأسي ، وأحد الأمثلة علي الـ LinearLayout التطبيق الذي قمنا بإنشائه في الدرس الماضي ويمكن عمل عدة أشكال به مثل ما بالصوره

وهذا هو الكود الخاص بهذه الواجهة

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
 
  <LinearLayout
      android:orientation="horizontal"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:layout_weight="1">
      <TextView
          android:text="red"
          android:gravity="center_horizontal"
          android:background="#aa0000"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"/>
      <TextView
          android:text="green"
          android:gravity="center_horizontal"
          android:background="#00aa00"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"/>
      <TextView
          android:text="blue"
          android:gravity="center_horizontal"
          android:background="#0000aa"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"/>
      <TextView
          android:text="yellow"
          android:gravity="center_horizontal"
          android:background="#aaaa00"
          android:layout_width="wrap_content"
          android:layout_height="fill_parent"
          android:layout_weight="1"/>
  </LinearLayout>
 
  <LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1">
    <TextView
        android:text="row one"
        android:textSize="15pt"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
    <TextView
        android:text="row two"
        android:textSize="15pt"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
    <TextView
        android:text="row three"
        android:textSize="15pt"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
    <TextView
        android:text="row four"
        android:textSize="15pt"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>
  </LinearLayout>
 
</LinearLayout>

ثانيا : الترتيب الجدولي TableLayout :

بيجمع الـ Views في صفوف وأعمدة ، ونستخدم عنصر <TableRow> لعمل صف جديد في الجدول ، كل صف ممكن أن يحتوي علي فيو واحد أو أكثر ، كل فيو بيوضع في الصف بيعتبر خلية وعرض هذه الخلية بيمثل العمود ، عرض أو اتساع كل عمود بيتحدد علي أساس أكبر اتساع خلية في هذا العمود.

ولنري شكل TableLayout أو كيف يعمل سنعتبر أن ملف الـ main.xml  بيحتوي علي هذه العناصر

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

<?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="180px"/>
        <EditText 
            android:id="@+id/txtUserName"
            android:width="280px"/>
    </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/btnSignIn"
            android:text="Log In"/>
    </TableRow>
 
</TableLayout>

فسيكون هذا هو الشكل النهائي

ثالثا : ترتيب مترابط RelativeLayout :

بيمكننا من تحديد مكان وضع الـ View بالنسبة لكل الـ Views الأخري ولنري الأشكال التي يمكن تنفيذها فلنعتبر أن هذه العناصر موجوده في ملف الـ main.xml

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
 
    <TextView 
        android:id="@+id/lblComments"
        android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:text="Comments"
    	android:layout_alignParentTop="true"
    	android:layout_alignParentLeft="true"/>
    <EditText 
        android:id="@+id/txtComments"
        android:layout_width="fill_parent"
        android:layout_height="250px"
        android:textSize="18sp"
        android:layout_below="@id/lblComments"
        android:layout_alignLeft="@id/lblComments"
        android:layout_centerHorizontal="true"
        android:background="#ffffff"
        android:textColor="#000000"/>
    <Button 
        android:id="@+id/btnSave"
        android:layout_width="150px"
        android:layout_height="wrap_content"
        android:text="Save"
        android:layout_below="@id/txtComments"
        android:layout_alignRight="@id/txtComments"/>
    <Button 
        android:id="@+id/btnCancel"
        android:layout_width="155px"
        android:layout_height="wrap_content"
        android:text="Cancel"
        android:layout_below="@id/txtComments"
        android:layout_alignLeft="@id/txtComments"/>
 
</RelativeLayout>

كان معكم محمد الصواف من أمام مكتبة الأسكندرية .. فشكرا علي حسن استماعكم ونلقاكم علي خير في الدرس القادم إن شاء الله تعالي.

تم إغلاق التعليقات.

أندرويد للعرب © 2024 WP Theme & Icons by N.Design Studio | تعريب قياسي
التدويناتRSS | التعليقاتRSS | تسجيل الدخول