شرح المخطط Absolute Layout في الاندرويد

شرح المخطط Absolute Layout في الاندرويد مع التعرف على خصائصة و مثال شامل على المخطط Absolute Layout .

المخطط Absolute Layout 

في Android ، يعد المخطط  Absolute Layout تخطيطًا يستخدم لتصميم التخطيطات المخصصة. في هذا التخطيط ، يمكنك تحديد الموقع الدقيق لعناصره باستخدام إلاحداثيات x و y .

ملاحظة مهمة 1:

 يصعب الحفاظ على التخطيط Absolute Layout لأحجام مختلفة لشاشات الأجهزة المحمولة عن الأنواع الأخرى من التخطيطات لأننا قمنا بتعيين الموقع الدقيق لطريقة العرض الفرعية أو يسمى المكون. 

يعتمد تحديد الموضع على إحداثيات x (أعلى) و y (يسار) وهذا الوضع ليس مفيدًا في عالم مختلف درجات دقة الشاشة (الأحجام) ونسب العرض إلى الارتفاع.

ملاحظة مهمة 2: يتم

 إهمال التصميم Absolute Layout في Android لنفس السبب  .

بنية المخطط  Absolute Layout

  
  <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <!-- add child view’s here -->

    </AbsoluteLayout>
  

---

خصائص التخطيط  Absolute Layout :

1. id : 

 هي خاصية  تُستخدم لتعريف التخطيط Absolute Layout  بشكل فريد .

فيما يلي مثال على كود خاصية المعرف id مع الشرح المضمّن.

  
  <AbsoluteLayout
    android:id="@+id/absoluteLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>
  

2. layout_x : 

في التخطيط Absolute Layout ، تُستخدم الخاصية  layout_x في تحديد إحداثي x للعرض ( TextView أو أي طريقة عرض أخرى) . القيمة المحتملة لهذا في dp أو px.

 مثال يوضح  الخاصية  layout_x مع شرح مضمن قمنا فيه بتعيين قيمة 200 بكسل للإحداثي x.

  
  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="layout_x"
    android:textSize="25sp"
    android:layout_x="200px"/> <!--x-موقع العنصر من جهة المحور السيني اي قمنا بتحديد موقعة  بالنسلة لااب  -->
  

3. layout_y : 

 في AbsoluteLayout  يتم استخدام الخاصية layout_y لتحديد إحداثيات y للعرض ( TextView أو أي طريقة عرض أخرى). القيمة المحتملة لهذا في dp أو px.

 مثال يوضح  الخاصية  layout_y مع شرح مضمن قمنا فيه بتعيين قيمة 200px للإحداثي y.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="layout_y"
    android:textSize="25sp"
    android:layout_y="200px"
    /><!--y- هنا قمنا بتحديد موقع العنصر بالنسبه للمحور الصادي    -->
  

مثال تطبيق الخاصيتان على نفس العنصرين السابقين

    
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="layout_x"
    android:textSize="25sp"
    android:layout_x="200px"/>
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="layout_y"
    android:textSize="25sp"
    android:layout_x="200px"/>
    
    

مثال تطبيق الخاصيتان على نفس العنصر textview

    
    ><TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="layout_x+y"
    android:textSize="25sp"
    android:layout_x="200px"
    android:layout_y="200px"
    /><!--y- هنا قمنا بتحديد موقع العنصر من جهة المحور السبني والصادي   -->
    

مثال على التخطيط Absolute Layout في Android 

مثال يوضح طريقة تصميم المخطط Absolute Layout الذي نصمم فيه شاشة تسجيل دخول بحقلين لاسم مستخدم وكلمة مرور وزر واحد لتسجيل الدخول. قمنا بتعيين جميع طرق العرض باستخدام إحداثيات x و y للشاشة وقمنا بتعيين القيم في بكسل (بكسل). 

.الخطوة 1: قم بإنشاء مشروع جديد وقم بتسميته AbsoluteLayoutExample .

الخطوة 2 : 

افتح res -> layout -> activity_main. xml (أو) main. xml وأضف الكود التالي .

 نحن هنا صممنا نموذج تسجيل دخول داخل المخطط Absolute Layout .

activity_main.xml

  <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <TextView
    android:layout_x="110px"
    android:layout_y="110px"
    android:text="User Name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
    <EditText
    android:layout_x="250px"
    android:layout_y="80px"
    android:width="100px"
    android:layout_width="200dp"
    android:layout_height="wrap_content" />
    <TextView
    android:layout_x="110px"
    android:layout_y="200px"
    android:text="Password"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
    <EditText
    android:layout_x="250px"
    android:layout_y="150px"
    android:width="100px"
    android:layout_width="200dp"
    android:layout_height="wrap_content" />
    <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Log In"
    android:layout_x="300px"
    android:layout_y="300px"/>
    </AbsoluteLayout>

الخطوه  3 : 

 في  ملف الجافا الرئيسي للمشروع  MainActivity.java  ضع الكود التالي     .

MainActivity.java

  
  //package com.alawiri.AbsoluteLayoutExample;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    
    
    }

    

  نتيجة التنفيذ  

الآن قم بتشغيل التطبيق في Emulator أو AVD. سترى نموذج تسجيل الدخول مصممًا في Absoulte Layout بعد إصلاح إحداثيات x و y.

ملاحظة مهمة: حاول فتح نفس التخطيط بأحجام مختلفة Emulator وسترى أنه لا يتناسب مع الأجهزة ذات الأحجام المختلفة. هذا هو السبب في أن Android قد قلل من استخدام Absolute Layout

تعديل المقال