في هذه التدوينة سنتحدث عن ViewGroup أخر وهو من الانواع المهمة جدا لتصميم واجهات في اشكال مربعة او مستطيلة ويوفر تحكم أدق من المجموعات الاخري من هذه الناحية.
المخطط الجدولي TableLayout :-
في الاندرويد يستخدم الجدول في ترتيب العناصر التابعة views في شكل أعمدة columns و صفوف rows ,ولا يعرض حدود border فاصلة تلقائيا بين هذه الاعمدة والصفوف ,حيث أن الصف هو الذي يحتوي علي الخلايا (العناصر التابعةviews) .
بعض النقاط حول المخطط الجدولي :
1. لإنشاء صف جديد نستخدم عنصر
2. يحتوي كل صف في الجدول علي صفر او اكثر من الخلايا ,ويمكن لكل خلية أن تحتفظ علي كائن عرض واحد فقط
3. يتم تعريف العرض الكلي للجدول من خلال الحاوية الرئيسية نفسها ViewGroup.
خصائص المخطط الجدولي :
1. id
يتم إستخدام هذه الخاصية لتعريف المخطط الجدولي بشكل فريد
2. stretchColumns
هذه الخاصية تسمح بتمدد الاعمدة حسب المساحة المتوفرة في الصف المعين وهي تأخذ قيم صحيحة وكسرية واليك بعض التوضيح
1.إذا كانت القيمة 0 سوف يأخذ العمود الاول كل المساحة المتوفرةفي الصف
2.إذا كانت القيمة 1 سوف يأخذ العمود الثاني كل المساحة المتوفرة في الصف
3.إذا كانت القيمة 2 سوف يأخذ العمود الثالث كل المساحة المتوفرة في الصف
لتوزيع مساحة الصف علي الاعمدة بالتساوي فإن القيمة ستكون *
إذا أردنا تساوي مساحة عمودين او اكثر فأنه يتم الفصل بين الارقام بفاصلة عشرية ليدل الرقم الاول علي العمود صاحب الرقم والرقم بعد الفاصلة علي العمود صاحي الرقم وهكذا
3. shrinkColumns
هي خاصية تقليل او تقليص عرض الاعمدة ,يمكن تحديد عمود واحد او قائمة مفصولة بي فواصل لارقام الاعمدة بهذه الخاصية .
4. collapseColumns
تعرف هذه الخاصية بخاصية إنهيار الاعمدة وهي تعمل علي إخفاء العمود من الظهور علي الشاشة ,وتكون هذه الاعمدة جزء من الجدول ولكنها لا تظهر فيه .
ويتم تحديد العمود الذي يراد إخفاءه بواسطة رقم ترتيبه في الصف
مثلا إذا أردنا اخفاء العمود الاول فإن الرقم سيكون 0 , والعمود الثاني سيكون الرقم 1 وهكذا
أكتب هذا الكود في ملف التصميم وشاهد نتيجة الخرج في المحاكي مع مراعاة تغير الرقم من 0 الي رقم اخر لتوسعة الفهم وإضافة عناصر أخري ايضا .
مثال عملي علي المخطط الجدولي وهو عبارة عن تصميم الة حاسبة بسيطة.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="@color/color_Back"> <TextView android:layout_width="fill_parent" android:layout_height="0dp" android:textAppearance="?android:attr/textAppearanceLarge" android:text="0" android:id="@+id/text_View" android:background="#d1c9c9" android:gravity="bottom|right" android:textSize="50sp" android:paddingRight="30dp" android:paddingBottom="40dp" android:layout_marginBottom="0dp" android:layout_weight="0.15" /> <TableLayout android:layout_width="fill_parent" android:layout_height="wrap_content"> <TableRow android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_marginBottom="1pt"> <Button android:onClick="onClickClear" android:id="@+id/clear" android:layout_width="30pt" android:layout_height="30pt" android:layout_marginRight="1pt" android:layout_weight="1" android:textColor="@color/color" android:background="@color/color_gray" android:text="AC" android:textSize="30sp" /> <Button android:textColor="@color/color" android:layout_width="30pt" android:layout_height="30pt" android:layout_marginRight="1pt" android:layout_weight="1" android:background="@color/color_gray" android:text="+/-" android:textSize="30sp" /> <Button android:onClick="onClickOpereator" android:textColor="@color/color" android:id="@+id/persent" android:layout_width="30pt" android:layout_height="30pt" android:layout_marginRight="1pt" android:layout_weight="1" android:background="@color/color_gray" android:text="%" android:textSize="30sp" /> <Button android:onClick="onClickOpereator" android:id="@+id/supplay" android:layout_width="20pt" android:layout_height="30pt" android:layout_weight="1" android:background="@color/color_x" android:text="/" android:textSize="30sp" /> </TableRow> <TableRow android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="1pt"> <Button android:onClick="clickNumber" android:textColor="@color/color" android:id="@+id/seven" android:layout_width="30pt" android:layout_height="30pt" android:layout_marginRight="1pt" android:layout_weight="1" android:background="@color/color_gray" android:text="7" android:textSize="30sp" /> <Button android:onClick="clickNumber" android:textColor="@color/color" android:id="@+id/eight" android:layout_width="30pt" android:layout_height="30pt" android:layout_marginRight="1pt" android:layout_weight="1" android:background="@color/color_gray" android:text="8" android:textSize="30sp" /> &<Button android:onClick="clickNumber" android:textColor="@color/color" android:id="@+id/nine" android:layout_width="30pt" android:layout_height="30pt" android:layout_marginRight="1pt" android:layout_weight="1" android:background="@color/color_gray" android:text="9" android:textSize="30sp" /> <Button android:onClick="onClickOpereator" android:id="@+id/multiple" android:layout_width="20pt" android:layout_height="30pt" android:layout_weight="1" android:background="@color/color_x" android:text="*" android:textSize="30sp" /> </TableRow> <TableRow android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="1pt"> <Button android:onClick="clickNumber" android:textColor="@color/color" android:id="@+id/four" android:layout_width="30pt" android:layout_height="30pt" android:layout_marginRight="1pt" android:layout_weight="1" android:background="@color/color_gray" android:text="4" android:textSize="30sp" /> <Button android:onClick="clickNumber" android:textColor="@color/color" android:id="@+id/five" android:layout_width="30pt" android:layout_height="30pt" android:layout_marginRight="1pt" android:layout_weight="1" android:background="@color/color_gray" android:text="5" android:textSize="30sp" /> <Button android:onClick="clickNumber" android:textColor="@color/color" android:id="@+id/sexth" android:layout_width="30pt" android:layout_height="30pt" android:layout_marginRight="1pt" android:layout_weight="1" android:background="@color/color_gray" android:text="6" android:textSize="30sp" /> <Button android:onClick="onClickOpereator" android:id="@+id/minimaiz" android:layout_width="20pt" android:layout_height="30pt" android:layout_weight="1" android:background="@color/color_x" android:text="-" android:textSize="30sp" /> </TableRow> <TableRow android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="1pt"> <Button android:onClick="clickNumber" android:textColor="@color/color" android:id="@+id/one" android:layout_width="30pt" android:layout_height="30pt" android:layout_marginRight="1pt" android:layout_weight="1" android:background="@color/color_gray" android:text="1" android:textSize="30sp" /> <Button android:onClick="clickNumber" android:textColor="@color/color" android:id="@+id/tow" android:layout_width="30pt" android:layout_height="30pt" android:layout_marginRight="1pt" android:layout_weight="1" android:background="@color/color_gray" android:text="2" android:textSize="30sp" /> <Button android:onClick="clickNumber" android:textColor="@color/color" android:id="@+id/three" android:layout_width="30pt" android:layout_height="30pt" android:layout_marginRight="1pt" android:layout_weight="1" android:background="@color/color_gray" android:text="3" android:textSize="30sp" /> <Button android:onClick="onClickOpereator" android:id="@+id/add" android:layout_width="20pt" android:layout_height="30pt" android:layout_weight="1" android:background="@color/color_x" android:text="+" android:textSize="30sp" /> </TableRow> <TableRow android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="1pt" android:layout_weight="1"> <Button android:onClick="clickNumber" android:textColor="@color/color" android:id="@+id/zero" android:layout_width="30pt" android:layout_height="30pt" android:layout_marginRight="1pt" android:layout_weight="1" android:background="@color/color_gray" android:text="0" android:textSize="30sp" /> <Button android:onClick="onClickOpereator" android:textColor="@color/color" android:id="@+id/squar" android:layout_width="30pt" android:layout_height="30pt" android:layout_marginRight="1pt" android:layout_weight="1" android:background="@color/color_gray" android:text="^" android:textSize="30sp" /> <Button android:onClick="clickNumber" android:textColor="@color/color" android:id="@+id/point" android:layout_width="30pt" android:layout_height="30pt" android:layout_marginRight="1pt" android:layout_weight="1" android:background="@color/color_gray" android:text="." android:textSize="30sp" /> <Button android:onClick="onClickEquals" android:id="@+id/equal" android:layout_width="20pt" android:layout_height="30pt" android:layout_weight="1" android:background="@color/color_x" android:text="=" android:textSize="30sp" /> </TableRow> </TableLayout> </LinearLayout>
في ملف res>values>color
انسخ هذا الكود
الخرج :
ليست هناك تعليقات:
إرسال تعليق
ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.