شرح Include Merge Tag في الاندرويد

البرنامج التعليمي Include و Merge Tag مع مثال في Android Studio

في الاندرويد ، لإعادة استخدام مخططات كاملة يمكننا استخدام <include/>و <merge/>العبارات التي تضمين تخطيط آخر داخل التخطيط الحالي. يقدم Android مجموعة متنوعة من الأدوات لتوفير عناصر تفاعلية صغيرة وقابلة لإعادة الاستخدام. في بعض الحالات ، قد نحتاج أيضًا إلى إعادة استخدام مكونات أكبر تتطلب تصميمًا خاصًا.

تضمين ودمج العلامة في Android

تعد إعادة استخدام المخططات أمرًا قويًا لأنها تتيح لنا إنشاء تخطيطات معقدة قابلة لإعادة الاستخدام. وهذا يعني أيضًا أنه يمكن استخراج أي عناصر من تطبيقنا مشتركة عبر تخطيطات متعددة وإدارتها بشكل منفصل ثم تضمينها في كل تخطيط. على سبيل المثال ، في كثير من الحالات نحتاج إلى شريط عنوان مخصص مع نص وصف ورمز ، ثم يمكننا إنشاء تخطيط شريط عنوان مخصص واستخدام هذه العلامة ( مثل < include /> و <merge />) لإعادة استخدام نفس التنسيق في أنشطة متعددة.

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

1 تضمين علامة Include
2 علامة دمج Merge Tag
3 الفرق بين ViewStub وتضمين العلامة:
4 سمات ما يلي:
5 قم بتضمين ودمج علامة المثال في Android Studio:

تضمين علامة Include Tag

العلامة < Include/> تساعدنا على تدرج في xml مشاركاتي في منطقتنا xml الملف. هذه طريقة رائعة لمشاركة أجزاء التخطيط بين التصميمات المختلفة. لنفترض أننا بحاجة إلى إظهار العنوان المخصص في العديد من التخطيطات ، لذلك نقوم ببساطة بإنشاء تخطيط مخصص لشريط العنوان ثم إعادة استخدام التخطيط باستخدام علامة <include />.

رمز XML للعلامة Include الأساسية في Android:

<include android:id="@+id/custom_title_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  layout="@layout/custom_title"/>

دمج العلامة Merge Tag

تساعدنا العلامة <merge /> على التخلص من مجموعات العرض الزائدة في التسلسل الهرمي لطرحنا عند تضمين تخطيط واحد داخل تخطيط آخر. على سبيل المثال ، إذا كان تخطيطنا الرئيسي هو LinearLayout مع اتجاه رأسي حيث يمكن إعادة استخدام عرضين متتاليين في تخطيطات متعددة ، فإن التخطيط القابل لإعادة الاستخدام الذي تضع فيه طريقتي العرض يتطلب عرض الجذر الخاص به. ومع ذلك ، فإن استخدام LinearLayout آخر كجذر للتخطيط القابل لإعادة الاستخدام سيؤدي إلى تخطيط خطي عمودي داخل مخطط خطي عمودي. لا يخدم LinearLayout المتداخل أي غرض حقيقي سوى إبطاء أداء واجهة المستخدم الخاصة بنا. لتجنب تضمين مجموعة العرض الزائدة عن الحاجة ، يمكننا بدلاً من ذلك استخدام عنصر <merge> كطريقة عرض جذرية للتخطيط القابل لإعادة الاستخدام.

رمز XML لعلامة الدمج merge الأساسية:

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

   
  <Button
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:text="First"/>

  <Button
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:text="Second"/>

  </merge>

الآن ، عندما نقوم بتضمين هذا التخطيط في تخطيط آخر (باستخدام علامة <include />) ، يتجاهل النظام عنصر <merge> ويضع الزرين مباشرةً في التخطيط ، بدلاً من علامة <include />.

الفرق بين ViewStub و include tag

ستتضمن علامة التضمين محتوى xml في ملف xml الخاص بنا. إنها طريقة رائعة لمشاركة أجزاء التخطيط بين التصميمات المختلفة. و ViewStub العلامة هي مختلفة قليلا لأنه لم يتم إدراجه مباشرة، وسيتم تحميلها فقط عندما كنت في الواقع في حاجة إليها، أي عند تعيين ViewStub رؤية الصورة إلى "true". يعد هذا تحسينًا رائعًا لأنه يمكن أن يكون لديك تخطيط معقد به الكثير من المشاهدات الصغيرة أو العروض المعقدة أو الرؤوس في أي مكان ، ولا يزال يتم تحميل نشاطك بسرعة كبيرة. بمجرد استخدام إحدى طرق العرض هذه ، سيتم تحميلها.

سمات وخصائص include

الآن دعونا نناقش بعض السمات الشائعة لعلامة التضمين Include التي تساعدنا على تكوينها في تخطيطنا (xml).

1. المعرف id : تُستخدم هذه السمة لتعريف علامة التضمين بشكل فريد.

أدناه قمنا بتعيين معرف "custom_title_bar" لعلامة التضمين المستخدمة لتعريفها بشكل فريد.

<include android:id="@+id/custom_title_bar"
  android:layout_width="match_parent"
  android:layout_height="match_parent"/> <!-- id of the include tag that is used to uniquely identify it-->

2. التخطيط layout : تُستخدم هذه السمة لتوفير معرف لمورد التخطيط لتضمين تخطيط مخصص في تخطيطنا الرئيسي.

أدناه نقوم بتضمين تخطيط مخصص مثل عنوان _title مخصص في تخطيطنا الرئيسي باستخدام علامة التضمين.

<include android:id="@+id/custom_title_bar"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  layout="@layout/custom_title"/> <!-- include custom_title layout in other layout -->

تضمين Include ودمج علامة Merge Tag في Android Studio

وفيما يلي مثال تشمل وعلامة دمج فيه أولا نحن إنشاء تخطيط مخصص مع ImageView و زر باستخدام العلامة دمج ثم تشمل أن التخطيط في تخطيط هدفنا الرئيسي باستخدام تتضمن العلامة. أخيرًا ، نصل إلى عرض التخطيط المخصص في نشاطنا وننفذ حدث النقر على الزر . عندما ينقر المستخدم على الزر ، يتم عرض نخب مع رسالة "تم النقر على زر التخطيط المخصص".

يمكنك أدناه تنزيل الكود ، والاطلاع على الإخراج النهائي والشرح خطوة بخطوة للمثال:

تحميل الكود ؟

تضمين ودمج علامة المثال في Android Studio

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

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

في هذه الخطوة ، نفتح ملف xml ثم ننشئ TextView ونقوم أيضًا بتضمين ملف custom_layout باستخدام علامة include.

<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:orientation="vertical"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context=".MainActivity">

  <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:text="Example Of Include And Merge Tag"
  android:textColor="#00f"
  android:layout_marginBottom="100dp"
  android:textSize="20sp" />

  <include
  android:id="@+id/custom_layout"
  layout="@layout/custom_layout"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
  </LinearLayout>

الخطوة 3: قم بإنشاء ملف xml جديد على سبيل المثال custom_layout.xml داخل التنسيق وأضف الكود أدناه:

في هذا الملف ، نقوم بإنشاء زر و ImageView باستخدام علامة دمج لعرضها في أنشطة أخرى.

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

  <Button
  android:id="@+id/customButton"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="#00f"
  android:text="Included Layout's Button"
  android:textColor="#fff"
  android:textSize="18sp"
  android:textStyle="bold" />

  <ImageView
  android:id="@+id/customImageView"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:src="@drawable/ic_launcher" />

  </merge>

الخطوة 4: افتح src -> package -> MainActivity. جافا

في هذه الخطوة أولاً نحصل على مرجع زر التخطيط المضمن و ImageView وأخيراً نجري حدث النقر على الزر. عندما ينقر المستخدم على الزر ، يتم عرض نخب مع رسالة "تم النقر على زر التخطيط المخصص".

package example.abhiandroid.includetagexample;

  import android.support.v7.app.AppCompatActivity;
  import android.os.Bundle;
  import android.view.View;
  import android.widget.ImageView;
  import android.widget.Button;
  import android.widget.Toast;

  public class MainActivity extends AppCompatActivity {

  Button customButton;
  ImageView customImageView;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  customButton = (Button) findViewById(R.id.customButton); // get the reference of custom Layout's Button
  customImageView = (ImageView) findViewById(R.id.customImageView); // get the reference of custom Layout's ImageView
  customButton.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  // display a toast on Button Click
  Toast.makeText(getApplicationContext(), "Custom Layout’s Button Clicked", Toast.LENGTH_LONG).show();
  }
  });
  }
  }

تعديل المقال

تعلم البرمجة مجانا