GagorAcadmey

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

آخر المواضيع

الخميس، 20 سبتمبر 2018

UI layouts

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

View Object : (كائن عرض) هو ألاساس لبناء واجهات المستخدم والذي يتم إنشاءه من فئة العرض (View Class) وهي تحتل مساحة من الشاشة ومسؤولة عن رسم وعرض الواجهات المختلفة , وايضا تتعامل مع أحداث النقر المختلفة .
Views: (طريقة العرض) هي الفئة الاساسية لعناصر واجهة المستخدم والتي تستخدم لإنشاء مكونات واجهة مستخدم تفاعلية مثل الازرار وحقول النصوص والصور وغيرها.
ViewGroup : هو فئة فرعية من العرض ويوفر حاوية غير مرئية تحتوي على طرق عرض أخرى أو غيرها من مجموعات العرض وتعريف خصائص التخطيط الخاصة بها.

يمكن أن يحتوي ViewGroup علي أكثر من مجموعة عرض وداخل كل مجموعة يمكن أن تحتوي علي مجموعات اخري كذلك .

أنواع الواجهات Android Layout Types :-
Layouts تعريفها
Linear Layout عبارة عن مجموعة عرض ViewGroup وتسمح للعناصر التابعة له بالتمركز في وضعيتين فقط Vertical و horizontally
Relative Layout هو عبارة عن مجموعة عرض ViewGroup ويسمح للعناصر التابعة له بالتموضع نسبيا relative positions
TableLayout هو عبارة عن طريقة عرض view وتسمح بعرض العناصر التابعة له في شكل جدول مكون من صفوف وأعمدة Rows columns
Absolute Layout يسمح لك بتحديد الموقع الدقيق لكل عنصر تابع له.
Frame Layout يعد FrameLayout عنصرًا نائبًا على الشاشة يمكنك استخدامه لعرض طريقة عرض واحدة.
ListView هي عبارة عن مجموعة عرض تسمح بعرض قائمة عناصر بشكل مرتب ومحدد ويمكن تخصيصه اكثر كما سنعرف لاحقا.
GridView هو مجموعة عرض ViewGroup تعرض العناصر في شكل شبكي محدد.

سمات المخططات Layouts Attributes :-

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


Layouts تعريفها
android:id هذا هو المعرّف الذي يحدد طريقة العرض بشكل فريد.أي أنه لا يوجد عنصرين بنفس ID
android:layout_width هذه السمة تحدد عرض المخطط
android:layout_height هذه السمة تحدد طول المخطط
android:layout_marginTop هذه السمة تضيف مساحة علوية من المخطط او العنصر بالنسبة لباقي المساحة المتوفرة
android:layout_marginBottom هذه السمة تضيف مساحة من الاسفل للمخطط او العنصر بالنسبة لباقي المساحة المتوفرة
android:layout_marginLeft هذه السمة تضيف مساحة من الجانب الايسر للمخطط او العنصر
android:layout_marginRight هذه السمة تضيف مساحة من الجانب الايمن للمخطط او العنصر
margin هذه السمة تجمع كل السمات السابقة وتضيف نفس الكمية من كل الجهات الاربع
android:layout_gravity تحدد هذه السمة كيفية عرض العنصر وتأخذ عدة مدخلات مثل center,right,left
android:layout_weight يحدد هذا مقدار المساحة الإضافية في التخطيط التي يجب تخصيصها إلى العرض.ويسمي بوزن العرض
android:layout_x يحدد تنسيق المخطط في محور x
android:layout_y يحدد تنسيق المخطط في محور y
android:paddingLeft تضيف مساحة من الداخل من الجانب الايسر بين قيمة العرض وحواف العرض نفسه
android:paddingRight تضيف مساحة من الداخل من الجانب الايمن بين قيمة العرض وحواف العرض نفسه
android:paddingTop تضيف مساحة من الداخل من الجانب العلوي بين قيمة العرض وحواف العرض نفسه
android:paddingBottom تضيف مساحة من الداخل من الجانب الاسفل بين قيمة العرض وحواف العرض نفسه

ملاحظة

هنا نجد أن العرض والطول هما ثوابت ويمكن تحديد القيم من خلال الوحدات التالية
dp(Density-independent Pixels)
sp(Scale-independent Pixels)
pt(Points which is 1/72 of an inch)
px(Pixels)
mm(Millimeters)

ولكن يمكن تحديد قيم العرض والطول بطريقة اوتوماتيكية عن طريق القيم التالية في الجدول وهي اكثر ملائمة من حيث تعدد الشاشات المختلفة .

القيمة تعريفها
wrap_content هي من القيم المرنة والتي تأخذ حجم حسب القيمة المطلوبة من العرض ولا تزيد منه أبدا
android:layout_width = wrap_content
android:layout_height=wrap_content
match_parent نفس القيمة السابقة ولكنها تأخذ كل الحجم المتوفر
android:layout_width = match_parent
android:layout_height = match_parent
fill_parent هذه القيمة تأخذ الحجم الكلي للواجهة الجزر
android:layout_width = fill_parent
android:layout_height = fill_parent
سنتعرف الي الفرق بين الحشو padding والهامش margin

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

إرسال تعليق

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

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

التسميات

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