GagorAcadmey

تعلم برمجة تطبيقات الاندرويد من الصفر حتي الاحتراف

آخر المواضيع

الثلاثاء، 25 سبتمبر 2018

Table Layout

في هذه التدوينة سنتحدث عن ViewGroup أخر وهو من الانواع المهمة جدا لتصميم واجهات في اشكال مربعة او مستطيلة ويوفر تحكم أدق من المجموعات الاخري من هذه الناحية.
المخطط الجدولي TableLayout :-
في الاندرويد يستخدم الجدول في ترتيب العناصر التابعة views في شكل أعمدة columns و صفوف rows ,ولا يعرض حدود border فاصلة تلقائيا بين هذه الاعمدة والصفوف ,حيث أن الصف هو الذي يحتوي علي الخلايا (العناصر التابعةviews) .


بعض النقاط حول المخطط الجدولي :
1. لإنشاء صف جديد نستخدم عنصر  وهو عبارة عن كائن object فرعي من المخطط الجدولي
2. يحتوي كل صف في الجدول علي صفر او اكثر من الخلايا ,ويمكن لكل خلية أن تحتفظ علي كائن عرض واحد فقط
3. يتم تعريف العرض الكلي للجدول من خلال الحاوية الرئيسية نفسها ViewGroup.
وهنا الشكل الاساسي لكود الجدول في ملف activity_main.xml



خصائص المخطط الجدولي :
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
انسخ هذا الكود

الخرج :

ليست هناك تعليقات:

إرسال تعليق

ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.

صفحتنا علي الفيسبوك

التسميات

المتواجدين حاليا