الجمعة، 17 مارس، 2017

شرح ماهو Relative Layout في تصميم واجهات تطبيقات الاندرويد بالتفصيل - الجزء الثاني

شرح ماهو Relative Layout في تصميم واجهات تطبيقات الاندرويد بالتفصيل - الجزء الثاني


السلام عليكم ورحمة الله ورحمة الله
درسنا في السابق ماهو Relative layout  وذكرنا انه يقوم بترتيب العناصر التي بداخله بشكل علائقي
وسنشرح الان كيفية ترتيب العناصر بشكل علائقي مع العناصر التي بجانبه  بداخل Relative layout
ويتم ذلك بالخصائص التالية:

حيث يتم في الخصائص ترتيب العناصر فيما بينها باستخدام  الـ id  لكل عنصر بداخل الـ relative Layout.
قد يبدو الأمر معقد لك.. لكن سنقوم بشرحه بالتفصيل ويتم ذلك بالخصائص التالية:-


1
2
3
4
android:layout_below="id of View"
android:layout_above="id of View"
android:layout_toRightOf="id of View"
android:layout_toLeftOf="id of View"

الخاص بالعنصر  id  حيث يتم إسناد الـ
وسنقوم الان بشرح تلك الخصائص  بالتفصيل.

لنفترض ان لدينا Relative layout  ويوجد بداخله button وtextview   كما في الكود ادناه :-

 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
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffbb00"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#11aa33"
        android:text="Button"
        android:layout_centerInParent="true"
        android:textSize="22sp" />
    
    <TextView
       
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="22sp"
        android:background="#ffccaa"
        android:layout_toRightOf="@id/button1"
        android:layout_centerVertical="true"
        android:id="@+id/txt"
        android:text="@string/hello_world" />

    

</RelativeLayout>

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

1- android:layout_below="@id/button1"

وفي هذه الخاصية تقوم بوضع العنصر تحت العنصر الاخر
كما في الصورة ادناه :-


نلاحظ انه تم وضع textview تحت الزر وذلك باستخدام الخاصية كما في الكود ادناه:-

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#11aa33"
        android:text="Button"
        android:layout_centerInParent="true"
        android:textSize="22sp" />
    
    <TextView
       
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="22sp"
        android:background="#ffccaa"
        android:layout_below="@id/button1"
        android:layout_centerVertical="true"
        android:id="@+id/txt"
        android:text="@string/hello_world" />
    

 2-android:layout_above="@id/button1"

وفي هذه الخاصية تقوم بوضع العنصر فوق العنصر الاخر
كما في الصورة ادناه :-


نلاحظ انه تم وضع textview فوق الزر وذلك باستخدام الخاصية كما في الكود ادناه:-

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#11aa33"
        android:text="Button"
        android:layout_centerInParent="true"
        android:textSize="22sp" />
    
    <TextView
       
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="22sp"
        android:background="#ffccaa"
        android:layout_above="@id/button1"
        android:layout_centerVertical="true"
        android:id="@+id/txt"
        android:text="@string/hello_world" />
    


3- android:layout_toRightOf="@id/button1"

وفي هذه الخاصية تقوم بوضع العنصر في الجهة اليمنى للعنصر الاخر
كما في الصورة ادناه :-

نلاحظ انه تم وضع textview بجانب  الزر من جهة اليمين وذلك باستخدام الخاصية كما في الكود ادناه:-

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#11aa33"
        android:text="Button"
        android:layout_centerInParent="true"
        android:textSize="22sp" />
    
    <TextView
       
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="22sp"
        android:background="#ffccaa"
        android:layout_toRightOf="@id/button1"
        android:layout_centerVertical="true"
        android:id="@+id/txt"
        android:text="@string/hello_world" />
    

4- android:layout_toLeftOf="@id/button1"
وفي هذه الخاصية تقوم بوضع العنصر في الجهة اليسرى للعنصر الاخر
كما في الصورة ادناه :-

نلاحظ انه تم وضع textview بجانب  الزر من جهة اليسار وذلك باستخدام الخاصية كما في الكود ادناه:-

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#11aa33"
        android:text="Button"
        android:layout_centerInParent="true"
        android:textSize="22sp" />
    
    <TextView
       
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="22sp"
        android:background="#ffccaa"
        android:layout_above="@id/button1"
        android:layout_centerVertical="true"
        android:id="@+id/txt"
        android:text="@string/hello_world" />
    


وهكذا نكون وصلنا إلى نهاية الدرس رأيكم يهمني بالتعليقات. 
إقرأ المزيد...

الثلاثاء، 14 مارس، 2017

الدرس 21-شرح ماهو Relative Layout في تصميم واجهات تطبيقات الاندرويد بالتفصيل - الجزء الأول.

شرح ماهو Relative Layout بالتفصيل.


السلام عليكم ورحمة الله وبركاته
ذكرنا في الدرس السابق  حول شرح linear layout  وسنشرح في هذا الدرس مايلي:-


1- ماهو Relative Layout؟
2-كيفية استخدام Relative Layout.

1-ماهو relative layout؟

Relative layout هو عبارة عن view group  يسمح لك بترتيب العناصر بداخله بشكل علائقي  اي بمعني يسمح لك بترتيب العناصر اعتماد على العناصر التي بجانبه.
 
  :-ويتم ترتيب العناصر بطريقتين
1-  ترتيب العناصر بشكل علائقي مع Relative layout نفسه.
2- ترتيب العناصر بشكل علائقي فيما بينها وسيتم شرحا بدرس منفصل.

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

1.1-  ترتيب العناصر بشكل علائقي مع Relative layout نفسه.
وفي هذه الطريقة يتم ترتيب العناصر اعتماد على Relative layout  الذي يحتويها وهو مايسمى ب parent كمثال:-

 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffbb00"
    tools:context=".MainActivity" >

    <Button
        android:id="@id/button1" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#11aa33"
        android:text="Button"
        android:textSize="22sp" />
    
  
</RelativeLayout>
من الكود اعلاه تم وضعButton بداخل Relative layout
اي يعتبر relative layout هو ال parent  بالنسبه لل Button وسنقوم الان بشرح اهم  الخصائص في هذه الطريقة:-
سنقوم الان بشرح أهم الخصائص وسيتم تطبيق هذه الخصائص على الزر.

1- وضع ال view  في وسط Relative layout  ويتم ذلك بثلاثة  خصائص مع بعض

1
2
3
        android:layout_centerInParent="true"
        android:layout_centerHorizontal="true"
        android:layout_centerInParent="true"

حيث سيتم وضع ال Button في وسط الRelative layout كما في الصورة ادناه

2-محاذاة الview بمحاذاة ال parent الخاص به.
وفي هذه الخاصية محاذاة العنصر بداخل Relative layout
ويتم ذلك بعدة خصائص وهي كمايلي:-

1
      android:layout_alignParentLeft="true"
'
بهذه الخاصية نجعل الجانب الايسر من ال Button  بمحاذاة الجانب الأيسر من Relative layout. كما في الصورة ادناه:-



1
      android:layout_alignParentTop="true"

ويتم في هذه خاصية محاذاة الجانب الأعلى من Button  بالجانب الأعلى من Relative layout.
كما في الصورة ادناه:

1
      android:layout_alignParentRight="true"

محاذاة الجانب الأيمن ل Button   مع الجانب الأيمن من ال parent  وهو Relative layout  كما في الصورة ادناه:-


1
      android:layout_alignParentBottom="true"

محاذاة الجانب الاسفل للزر Button  مع الجانب الأسفل من ال parent  وهو Relative layout  كما في الصورة ادناه:-

بعد ان قمنا بشرح الخصائص اعلاه سنقوم الان لو قمنا بوضع اكثر من خاصية مع بعض :
سنقوم الان بشرح فيما إذا تم دمج أكثر من خاصيتين مع بعض وسنشرح ذلك بالامثلة ادناه:-
مثــــــــــــــــــــال 1

1
2
android:layout_alignParentTop="true"  
android:layout_alignParentBottom="true"

عند تطبيق هذه الخاصيتين على الزر فانه سيتم محاذاة الجانب الأعلى للزرButton مع الجانب الأعلى من Relative layout  
وسيتم أيضا محاذاة الجانب الاسفل للزر Buttonمع الجانب الاسفل للrelative Layout
كما في الصورة ادناه:-

مثــــــــــــــــــــــــــــــال2-


1
2
android:layout_alignParentRight="true"  
android:layout_alignParentLeft="true"

عند تطبيق هذه الخاصيتين على الزر فانه سيتم محاذاة الجانب الايمن للزرButton مع الجانب الايمن من Relative layout  
وسيتم أيضا محاذاة الجانب الايسر للزرButton مع الجانب الايسر للrelative Layout
كما في الصورة ادناه:-

مثــــــــــــــــــــال3-

1
2
3
android:layout_alignParentRight="true"  
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"

عند تطبيق هذه الثلاث الخواص على الزرButton فانه سيتم محاذاة الجانب الايمن للزر مع الجانب الايمن من Relative layout  
هووسيتم أيضا محاذاة الجانب الايسر للزرButton مع الجانب الايسر للrelative Layout
وسيتم محاذاة الجانب السفلي للزر Button مع الجانب السفلي لل Relative layout 
كما في الصورة ادناه:-


مثــــــــــــــــــــــــال4-
ماذا لوتم وضع جميع الخصائص الاربع للزرButton

1
2
3
4
android:layout_alignParentTop="true" 
android:layout_alignParentRight="true"  
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
سيتم محاذاة جميع الجوانب للزر مع جميع الجوانب لل Relative layout كما في الصورة ادناه:-

وهكذا نلاحظ أنه تمت محاذاة جميع جوانب الزر مع Relative Layout  الذي يحتويه.


وهنا نكون وصلنا إلى نهاية الدرس رأيكم يهمني بالتعليقات.
إقرأ المزيد...

الخميس، 2 مارس، 2017

الدرس20-ماهو Linear Layout وكيفية استخدامه في تصميم واجهات تطبيقات الاندرويد

ذكرنا في الدروس السابقة عن layout manger   ويتم استخدامها  لترتيب العناصر views  على الشاشة ويوجد منها أنواع كثيرة  وهي :-

1- Linerlayout
2- Relative layout
3- Grid layout
4- Tabel layout


وسنشرح في هذا الدرس Linear Layout  بالتفصيل. وسنتعلم في هذا الدرس مايلي:

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


1-ماهو LinerLayout؟

LinerLayout عو عبارة عن viewgroup  يستخدم لترتيب العناصر views  على شكل خط واحد.
ويأتي LinearLayout  بترتيب العناصر بطريقتين :-

1-خط افقي أي يقوم برتيب العناصر كل واحد بجانب الاخر في خط افقي.
2-خط عمودي أي يقوم برتيب العناصر كل واحد تحت الاخر في خط عمودي.


2-كيفية استخدام LinerLayout ؟


للقيام باستخدام LinearLayout  في تصميم التطبيث اخاص نقوم بالاتي:-

1.2:-نذهب على ملف التصميم ونجعل LinearLayout  الوسم الجذر في الملف كمافي الكود ادناه:-


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

  <!-- here we put views -->   
</LinearLayout>

2.2-نقوم بتحديد الطول والعرض لـ LinearLayout  :-
نقوم بتحديد طول وعرض الـ Lineralyout وذلك باستخدام الخصائص التالية:-
"android:layout_height="match_parent-
لتحديد طول واسناده القيمة match_parent أي جعله يأخذ كل المساحة الطولية الممكنة.

"android:layout_width="match_parent

لتحديد العرض  واسناده القيمة match_parent أي جعله يأخذ كل المساحة الافقية الممكنة.
ليصبح الكود كما في الشكل ادناه:-

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <!-- here we put views -->   
</LinearLayout>

 3.2-الان أصبح ال LinearLayout  جاهزا ونقوم الان بإضافة العناصر Views بداخله ويقوم بعرضها بطريقة خطية كمافي الكود ادناه:-


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
 
   >

     <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="HelloWorld"
        
        />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="HelloWorld"
        
        />
</LinearLayout>

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

linear Layout Horizontal
 نلاحظ من الصورة إنه تم ترتيب العناصر في خط واحد افقي .اي أن الزر بجانب عارض النص .
ذكرنا سابقا في الدرس ان    يقوم بترتيب العناصر Views  بشكل خطي افقي أو عمودي .. والان عندما نريد نرتيب العناصر بشكل عمودي نقوم باستخدام الخاصية :-
 "android:oriention="virtical
 ويتم وضع هذا الخاصية في التخطيط الخطي وذلك جعل يقوم برتيب العنلصر التي بداخله بشكل عمودي .

والان نقوم بتحديد هذه الخاصية للـ LinerLayout  كمافي الكود ادناه:-


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:oriention="virtical">

     <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="HelloWorld"
        
        />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="HelloWorld"
        
        />
</LinearLayout>


 ليظهر التصميم كمافي الصورة ادناه:
وهكذا نكون وصلنا إلى نهاية الدرس .. رأيكم يهمني بالتعليقات.
إقرأ المزيد...

الجمعة، 2 سبتمبر، 2016

كيفية استسناخ وتكرار أي تطبيق اندرويد بدون روت

 سنقدم لكم االيوم تطبيق اندرويد رائع يسمح لك  بتكرار واستنساخ  أي تطبيق اندرويد على هاتفك .. بمعنى ان تكون هناك نسختين من نفس التطبيق على نفس الجهاز وهذا سيساعدك في الدخول بحسابين مختلفين  في نفس الجهاز ويمكنك ايضا استنساخ جميع برامج التوتصل الاجتماعي مثل سناب شات snapchat  وتويتر  وفيسبوك وانستقرام وغيرها من البرامج  .





إقرأ المزيد...
9/02/2016 09:30:00 م |

الخميس، 1 سبتمبر، 2016

الدرس 19- ماهي عناصر التحكم UI Control في الاندرويد

السلام عليكم  سنتعلم في الدرس ماهي UI Controls  حيث يوفر لنا الاندرويد مكتبية كبيرة من الـ Ui Controls التي نقوم باضافتها في واجهات تطبيقات الاندرويد Ui android وذلك للسماح للمستخدم بالتعامل مع تطبيقك وادخال البيانات والقيام بالوضائف المختلفة . شرح مفصل لعمل بعض من تلك العناصر UI Controls.


إقرأ المزيد...
9/01/2016 09:23:00 م |

الثلاثاء، 30 أغسطس، 2016

الدرس 18-أساسيات تصميم الواجهات User Interface في الاندرويد الجزء الثاني

السلام عليكم درسنا في الدرس السابق  كيفية وضع الـ views  على الشاشة والتحكم في مواقعها على الشاشة , اما في هذا الدرس سنتعلم كيفية التحكم في احجامها بالاعتماد على حجم شاشة الجهاز الذي يشتغل عليه التطبيق كما سنتعلم في هذا الدرس كيفية تصميم واحهة UI  لتطبيق اندرويد تتلائم مع جميع احجام الشاشات المحتلفة.




إقرأ المزيد...
8/30/2016 07:46:00 م |

الأحد، 21 أغسطس، 2016

أفضل تطبيقات والعاب مجانية للاندرويد لهذا الأسبوع

السلام عليكم .. سنقدم لكم اليوم أفضل 4 تطبيقات والعاب اندرويد مجانية لهذا الأسبوع وهي تطبيقات والعاب  جميلة يفترض إنك ستقوم بتحميلها وهي :-

  1. Microsoft Flow
  2. Googl Duo
  3. Its A Space Thing
  4. Mars Mars

أفضل ,,تطبيقات ,والعاب مجانية للاندرويد لهذا الأسبوع


إقرأ المزيد...
8/21/2016 05:51:00 م |

الخميس، 18 أغسطس، 2016

شرح طريقة استخدام مكتبة Retrofit HTTP Library في الاندرويد

السلام عليكم ..بعدما شرحنا في الدرس السابق شرح استخدام مكتبة Volley  سنشرح في هذا الدرس شرح طريقة استخدام مكتبة Retrofit HTTP Library  في الاندرويد وسنشرح ماهي مكتبة Retrofit HTTP Library؟  بالاضافةإلى  مثال بسيط على كيفية استخدام Retrofit HTTP Library وتقوم بنفس هذه المكتبة بنفس وضائف مكتبة Volley ولكن مع بعض الاختلافات.كثيرا مانقوم بإنشاء تطبيقات اندرويد تقوم بالاتصال بالإنترنت حيث إن أغلب التطبيقات التي نستخدمها في يومنا هذا تعتمد أعتمادا كاملا على الاتصال بالإنترنت لذلك سنقوم بشرح كيفية استخدام مكتبة Retrofit HTTP Library  في الاندرويد .


شرح ,طريقة ,استخدام مكتبة, Retrofit HTTP Library , في الاندرويد


كثيرا ماتواجهه المبرمجين بعض الصعوبات في كتابة الكود الخاص بالاتصال بالإنترنت وجلب البيانات منه .. لكن سنتعلم في درس اليوم كيفية تسهيل عملية الاتصال بالانترنت وذلك فب خطوات بسيطة وسهلة باستخدام مكتبة Retrofit HTTP Library.

وسنتعلم في هذا الدرس مايلي:

1-ماهي مكتبة Retrofit HTTP Library ومميزاتها؟
2-مثال بسيط على استخدام المكتبة.

إقرأ المزيد...
8/18/2016 11:56:00 م |

الثلاثاء، 16 أغسطس، 2016

ماهي مكتبة volley library android وكيفية إستخدامها في برمجة تطبيقات الاندرويد

السلام عليكم .. سنتعلم اليوم درس جديد في سلسلة دروس برمجة تطبيقات الاندرويد وسيكون الدرس حول التعامل مع مكتبة فولي للاندرويد  volley library android  وعن كيفية اضافتها واستخدامها في أي مشروع وتمنح لنا مكتبة فولي للاندرويد volley library android أتصال سريع بالانترنت وذلك عندما تقوم ببرمجة تطبيق يقوم بتبادل بيانات  سيرفر والكلاينت فإنك بحاجة إلى استخدام هذه المكتبة volley library android . 




كثير مانقوم بانشاء تطبيقات تعتمد على الاتصال بالانترنت وقراءة بيانات من الانترنت  فلذلك قامت قوقل بتوفير مكتبة برمجية لمطوري ومبرمجين الاندرويد تسهل الاتصال بالانترنت وباقل اسطر من الاكواد وهي مكتبة فولي volley library android.

1-الطلب والاستجابة والفرق بينهما Request vs Response



أي عملية اتصال  انترنت في اي تطبيق سواء كان تطبيق هاتف محمول أو تطبيق كمبيوتر  فغنها لابد ان تمر بمرحلتي الطلب والاستجابة لكن ماهو الطلب Requset  وماهي الاستجابة Response  ستعرف الان  وسنقوم بتوضيحهما كمايلي:


1-الطلب Request : وهي عبارة عن عملية التي يقوم بها المستخدم عندما يريد الحصول على بيانات من الانترنت كمثال:
 عندما تذهب الى المتصفح وتكت www.google.com  فإن ذلك يسمى طلبا.

2- Response الاستجابة: وهي عندما نحصل على البيانات كمثال عندما كتبنا في المتصفح  www,google.com  فإن ذلك طلبا  وعندمما تظهر صفحة قوقل على متصفحك يسمى ذلك استجابة .

دعنى اوضحة لك الفكرة: كلنا نقوم نستخدم تطبيق تويتر   فعندما تفتح برنامج تويتر  وتقوم بالسحب للتحديث فإن تلك العملية تسمى طلبا Request  وعندما تظهر اخر التغريدات في شاشة تطبيق تويتر فإن تلك العملية تسمى استجابة Response.

إقرأ المزيد...
8/16/2016 10:46:00 م |

جميع الحقوق محفوضة لدى مدونة مطيع الجابري |

تصميم : مدونة علوم و تقنيات