شرح أستخدام TabLayout
في Android ، يعد TabLayout عنصرًا جديدًا تم إدخاله في مكتبة دعم التصميم. يوفر تخطيطًا أفقيًا لعرض علامات التبويب على الشاشة. يمكننا عرض المزيد من الشاشات في شاشة واحدة باستخدام علامات التبويب. يمكننا التمرير بسرعة بين علامات التبويب . TabLayout هو في الأساس كلاس view مطلوبة لإضافتها إلى تخطيطنا (xml) لإنشاء علامات تبويب منزلقة. نستخدم طرقًا مختلفة لـ TabLayout لإنشاء علامات التبويب Tabs وإضافتها وإدارتها.
ملاحظة هامة : يستخدم TabLayout لعرض علامات التبويب Tabs على الشاشة. يمكننا إنشاء علامات تبويب منزلقة وغير منزلقة باستخدام TabLayout. إذا احتجنا إلى علامات تبويب بسيطة دون انزلاق ، فإننا نستبدل التخطيط بالقطعة fragment الموجود في حدث المستمع المحدد بعلامة التبويب وإذا كنا بحاجة إلى علامات تبويب منزلقة ، فإننا نستخدم Viewpager .
كود XML TabLayout الأساسي :
<android.support.design.widget.TabLayout android:id="@+id/simpleTabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" app:tabGravity="fill"/>
طرق مهمة لتخطيط الجدول TabLayout
دعنا نناقش بعض الطرق المهمة في TabLayout التي قد يتم استدعاؤها من أجل إدارة TabLayout .
1. newTab (): تُستخدم هذه الطريقة لإنشاء وإرجاع علامة تبويب TabLayout جديدة .
أدناه نقوم بإنشاء علامة تبويب tab جديدة وتعيين النص والأيقونة لعلامة التبويب.
TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout
TabLayout.Tab firstTab = tabLayout.newTab(); // Create a new Tab names
firstTab.setText("First Tab"); // set the Text for the first Tab
firstTab.setIcon(R.drawable.ic_launcher); // set an icon for the first tab
2. addTab ( Tab tab) : تُستخدم هذه الطريقة لإضافة علامة تبويب في TabLayout. باستخدام هذه الطريقة ، نضيف علامة التبويب التي أنشأناها باستخدام طريقة newTab () في TabLayout. ستتم إضافة علامة التبويب في نهاية القائمة وإذا كانت علامة التبويب الأولى التي سيتم إضافتها ، فستصبح علامة التبويب المحددة.
أدناه نقوم أولاً بإنشاء علامة تبويب جديدة ثم نضيفها في TabLayout.
TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout
TabLayout.Tab firstTab = tabLayout.newTab(); // Create a new Tab names "First Tab"
firstTab.setText("First Tab"); // set the Text for the first Tab
firstTab.setIcon(R.drawable.ic_launcher); // set an icon for the first tab
tabLayout.addTab(firstTab); // add the tab to the TabLayout
3. addTab ( Tab tab, boolean setSelected ): تُستخدم هذه الطريقة لإضافة علامة تبويب في TabLayout وتعيين حالة علامة التبويب. باستخدام هذه الطريقة ، نضيف علامة التبويب التي أنشأناها باستخدام طريقة newTab () في TabLayout. في هذه الطريقة ، نقوم أيضًا بتعيين حالة علامة التبويب سواء تم تحديدها أم لا.
أدناه نقوم أولاً بإنشاء علامة تبويب جديدة ثم إضافتها في TabLayout و تحديد القيمة الحقيقية للمعامل setSelected التي تجعلها قابلة للتحديد .
TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout
TabLayout.Tab firstTab = tabLayout.newTab(); // Create a new Tab names "First Tab"
firstTab.setText("First Tab"); // set the Text for the first Tab
firstTab.setIcon(R.drawable.ic_launcher); // set an icon for the first tab
tabLayout.addTab(firstTab,true); // add the tab in the TabLayout and makes it selectable
4. addTab ( Tab tab, int position ): تُستخدم هذه الطريقة لإضافة علامة تبويب في TabLayout و تحديد حالة علامة التبويب tab . باستخدام هذه الطريقة ، نضيف علامة التبويب tab التي أنشأناها باستخدام طريقة newTab () في TabLayout. سيتم إدراج علامة التبويب tab في الموضع المحدد. إذا كانت هذه هي علامة التبويب tab الأولى المراد إضافتها ، فستصبح علامة التبويب المحددة.
أدناه نقوم أولاً بإنشاء علامة تبويب جديدة ثم نضيفها في TabLayout في موضع معين.
TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout
TabLayout.Tab firstTab = tabLayout.newTab(); // Create a new Tab names "First Tab"
firstTab.setText("First Tab"); // set the Text for the first Tab
firstTab.setIcon(R.drawable.ic_launcher); // set an icon for the first tab
tabLayout.addTab(firstTab,2); // add the tab in the TabLayout at specific position
5. addTab ( Tab tab, int position, boolean setSelected ): تُستخدم هذه الطريقة لإضافة علامة تبويب tab في موضع محدد و تحديد حالة علامة التبويب tab . باستخدام هذه الطريقة ، نضيف علامة التبويب tab التي أنشأناها باستخدام طريقة newTab () في TabLayout. سيتم إدراج علامة التبويب tab في الموضع المحدد واستخدام قيمة منطقية لتحديد حالة علامة التبويب tab . يتم استخدام القيمة الحقيقية لجعل علامة التبويب قابلة للتحديد.
أدناه ، نقوم أولاً بإنشاء علامة تبويب ثم إضافتها في TabLayout في موضع معين وقمنا أيضًا بتعيين القيمة الحقيقية لجعل علامة التبويب قابلة للتحديد.
TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout
TabLayout.Tab firstTab = tabLayout.newTab(); // Create a new Tab names "First Tab"
firstTab.setText("First Tab"); // set the Text for the first Tab
firstTab.setIcon(R.drawable.ic_launcher); // set an icon for the first tab
tabLayout.addTab(firstTab,2,true); // add the tab at specified position in the TabLayout and makes it selectable
6. getSelectedTabPosition (): تستخدم هذه الطريقة للحصول على موضع علامة التبويب tab المحددة الحالية. تقوم هذه الطريقة بإرجاع قيمة نوع int لموضع علامة التبويب المحددة. تقوم بإرجاع -1 إذا لم تكن هناك علامة تبويب محددة.
أدناه نحصل على موضع علامة التبويب المحدد الحالي.
TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout int selectedTabPosition = tabLayout.getSelectedTabPosition(); // get the position for the current selected tab
7. getTabAt (int index ): تستخدم هذه الطريقة للحصول على علامة التبويب في الفهرس المحدد. تقوم هذه الطريقة بإرجاع TabLayout.Tab.
أدناه نحصل على علامة التبويب في الفهرس الأول.
TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout TabLayout.Tab tab = tabLayout.getTabAt(1); // get the tab at 1th in index
8. getTabCount (): تُستخدم هذه الطريقة للحصول على عدد علامات التبويب المسجلة حاليًا في شريط الإجراءات. ترجع هذه الطريقة قيمة نوع int لعدد علامات التبويب الإجمالية.
أدناه نحصل على العدد الإجمالي لعلامات التبويب المسجلة حاليًا في شريط الإجراءات.
TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout int tabCount= tabLayout.getTabCount(); // get the total number of tabs currently registered with the action bar.
9. setTabGravity (int gravity): تُستخدم هذه الطريقة لضبط الجاذبية لاستخدامها عند وضع علامات التبويب.
أدناه نضع الجاذبية لعلامات التبويب.
TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER); // set the gravity to use when laying out the tabs.
10. getTabGravity (): تستخدم هذه الطريقة للحصول على الجاذبية الحالية المستخدمة في وضع علامات التبويب. تقوم هذه الطريقة بإرجاع الجاذبية التي حددناها باستخدام طريقة setTabGravity (كثافة العمليات).
أدناه نضع الجاذبية gravity أولاً ثم نحصل على الجاذبية الحالية المستخدمة لوضع علامات التبويب.
TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER); // set the gravity to use when laying out the tabs. int gravity=tabLayout.getTabGravity(); // get the current gravity used for laying out tabs
11. setTabMode (int mode ): تُستخدم هذه الطريقة لتعيين وضع السلوك لعلامات التبويب في هذا التخطيط. خيارات الإدخال الصالحة هي:
MODE_FIXED: تعرض علامات التبويب الثابتة جميع علامات التبويب بشكل متزامن ويتم استخدامها بشكل أفضل مع المحتوى الذي يستفيد من المحاور السريعة بين علامات التبويب.
MODE_SCROLLABLE: تعرض علامات التبويب tab القابلة للتمرير مجموعة فرعية من علامات التبويب في أي لحظة معينة ويمكن أن تحتوي على تسميات علامة تبويب أطول وعددًا أكبر من علامات التبويب. يتم استخدامها بشكل أفضل لاستعراض السياقات في واجهات اللمس عندما لا يحتاج المستخدمون إلى مقارنة تسميات علامات التبويب مباشرة. يشيع استخدام هذا الوضع مع ViewPager .
أدناه قمنا بتعيين وضع السلوك لعلامات التبويب.
TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); // set the behaviour mode for the tabs
12. getTabMode (): تستخدم هذه الطريقة للحصول على الوضع الحالي لـ TabLayout. ترجع هذه الطريقة قيمة نوع int التي قمنا بتعيينها باستخدام طريقة setTabMode (mode int).
أدناه نقوم أولاً بتعيين وضع علامة التبويب ثم نحصل على الوضع الحالي لـ TabLayout.
TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); // set the behaviour mode for the tabs int mode=tabLayout.getTabMode(); // get the current mode of the TabLayout
13. setTabTextColors (int normalColor، int selectedColor): تُستخدم هذه الطريقة لتعيين ألوان النص للحالات المختلفة (عادي ، محدد) من علامات التبويب Tabs .
أدناه قمنا بتعيين ألوان نص علامة التبويب لكلتا الحالتين في علامة التبويب.
TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout tabLayout.setTabTextColors(Color.RED,Color.WHITE); // set the tab text colors for the both states of the tab.
14. getTabTextColors (): تستخدم هذه الطريقة للحصول على ألوان النص للحالات المختلفة (العادية ، المحددة) من علامات التبويب Tabs . تقوم هذه الطريقة بإرجاع لون النص الذي قمنا بتعيينه باستخدام طريقة setTabTextColors (int normalColor، int selectedColor).
أدناه نقوم أولاً بتعيين ألوان النص ثم نحصل على ألوان النص لكلتا الحالتين في علامة التبويب.
TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout tabLayout.setTabTextColors(Color.RED,Color.WHITE); // set the tab text colors for the both states of the tab. ColorStateList colorStateList=tabLayout.getTabTextColors(); // get the text colors for the both states of the tab
15. removeAllTabs (): تُستخدم هذه الطريقة لإزالة كل علامات التبويب Tabs من شريط الإجراءات وإلغاء تحديد علامة التبويب الحالية.
أدناه نقوم بإزالة جميع علامات التبويب من شريط الإجراءات وإلغاء تحديد علامة التبويب الحالية.
TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout tabLayout.removeAllTabs(); // remove all the tabs from the action bar and deselect the current tab
16. setOnTabSelectedListener (OnTabSelectedListener listener ): تُستخدم هذه الطريقة لإضافة مستمع سيتم استدعاؤه عند تغيير تحديد علامة التبويب.
نعرض أدناه كيفية استخدام addOnTabSelectedListener من TabLayout.
TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
// called when tab selected
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
// called when tab unselected
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
// called when a tab is reselected
}
});
17. removeTab (Tab tab ): تُستخدم هذه الطريقة لإزالة علامة تبويب من التخطيط. في هذه الطريقة نقوم بتمرير كائن TabLayout.Tab لإزالة علامة التبويب من التخطيط. إذا تم تحديد علامة التبويب التي تمت إزالتها ، فسيتم إلغاء تحديدها تلقائيًا وسيتم تحديد علامة تبويب أخرى إذا كانت موجودة في TabLayout.
أدناه نقوم أولاً بإنشاء وإضافة علامة تبويب ثم إزالتها من TabLayout.
TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout
TabLayout.Tab firstTab = tabLayout.newTab(); // Create a new Tab names "First Tab"
firstTab.setText("First Tab"); // set the Text for the first Tab
firstTab.setIcon(R.drawable.ic_launcher); // set an icon for the first tab
tabLayout.addTab(firstTab); // add the tab at in the TabLayout
tabLayout.removeTab(firstTab); // remove the tab from the TabLayout
18. removeTabAt (int position ): تُستخدم هذه الطريقة لإزالة علامة تبويب من التخطيط. في هذه الطريقة نمرر موضع علامة التبويب التي نريد إزالتها من التخطيط. إذا تم تحديد علامة التبويب التي تمت إزالتها ، فسيتم إلغاء تحديدها تلقائيًا وسيتم تحديد علامة تبويب أخرى إذا كانت موجودة في TabLayout.
أدناه نقوم بإزالة علامة التبويب من موضع محدد من TabLayout.
TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout tabLayout.removeTabAt(1); // remove the tab from a specified position of TabLayout
19. setSelectedTabIndicatorColor (int color ): تُستخدم هذه الطريقة لتعيين لون مؤشر علامة التبويب لعلامة التبويب المحددة حاليًا.
أدناه قمنا بتعيين اللون الأحمر لمؤشر علامة التبويب المحددة.
TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout tabLayout.setSelectedTabIndicatorColor(Color.RED); // set the red color for the selected tab indicator.
20. setSelectedTabIndicatorHeight (int height ): تُستخدم هذه الطريقة لتعيين ارتفاع مؤشر علامة التبويب لعلامة التبويب المحددة حاليًا.
أدناه قمنا بتعيين ارتفاع مؤشر علامة التبويب المحددة.
TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout tabLayout.setSelectedTabIndicatorHeight(2); // set the height for the selected tab’s indicator
21. setupWithViewPager (ViewPager viewPager): تُستخدم هذه الطريقة لإعداد TabLayout مع ViewPager. يستخدم ViewPager بشكل أساسي لإنشاء علامات تبويب منزلقة.
أدناه قمنا بتعيين TabLayout مع ViewPager.
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); // get the reference of ViewPager TabLayout tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout); // get the reference of TabLayout tabLayout.setupWithViewPager(viewPager); // set the TabLayout with the ViewPager.
سمات و خصائص TabLayout
الآن دعنا نناقش بعض السمات والخصائص الشائعة لـلمخطط TabLayout التي تساعدنا على تكوينها في تخطيطنا (xml).
1. Id :يتم استخدام سمة معرف : معرف لتعريف TabLayout بشكل فريد.
2. support.design:tabBackground: تُستخدم هذه السمة والخاصية لتحديد خلفية علامات التبويب Tabs . يمكننا تعيين لون أو صوره في خلفية علامات التبويب.
أدناه قمنا بتعيين اللون الأسود لخلفية علامات التبويب.
<android.support.design.widget.TabLayout android:id="@+id/simpleTabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabBackground="@android:color/darker_gray" /><!-- set the Black color for the background of the tabs.-->
3. support.design:tabGravity: تُستخدم هذه السمة او الخاصية لضبط الجاذبية gravity لاستخدامها عند تخطيط علامات التبويب. يمكننا أيضًا ضبط وسائل الجاذبية برمجيًا في كلاس java باستخدام طريقة setTabGravity (int gravity) .
أدناه نضع الجاذبية لعلامات التبويب.
<android.support.design.widget.TabLayout android:id="@+id/simpleTabLayout " android:layout_width="match_parent" android:layout_height="wrap_content" app:tabGravity="fill" /><!-- set the gravity for the tabs.-->
4. support.design:tabIndicatorColor: تُستخدم هذه السمة او الخاصية لتعيين لون المؤشر المستخدم لإظهار علامة التبويب المحددة حاليًا. يمكننا أيضًا تعيين اللون برمجيًا في كلاس java باستخدام طريقة setSelectedTabIndicatorColor (int color).
أدناه قمنا بتعيين اللون الأحمر لمؤشر علامة التبويب المحددة
<android.support.design.widget.TabLayout android:id="@+id/simpleTabLayout " android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorColor="#f00" /><!-- set the red color for the selected tab indicator.-->
5. support.design:tabIndicatorHeight: تُستخدم هذه السمة او الخاصية لتعيين ارتفاع المؤشر المستخدم لإظهار علامة التبويب المحددة حاليًا. يمكننا أيضًا تعيين الارتفاع برمجيًا يعني في كلاس جافا باستخدام طريقة setSelectedTabIndicatorHeight (int height ).
أدناه قمنا بتعيين ارتفاع مؤشر علامة التبويب المحددة.
<android.support.design.widget.TabLayout android:id="@+id/simpleTabLayout " android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorHeight="2dp" /> <!-- set the height for the selected tab’s indicator -->
6. support.design:tabMaxWidth: تُستخدم هذه الخاصية لتعيين الحد الأقصى لعرض علامات التبويب.
أدناه قمنا بتعيين الحد الأقصى لقيمة العرض لعلامات التبويب.
<android.support.design.widget.TabLayout android:id="@+id/simpleTabLayout " android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMaxWidth="100dp" /> <!-- set the maximum width value for the tabs. -->
7. support.design:tabMinWidth: تُستخدم هذه الخاصية لتعيين الحد الأدنى لعرض علامات التبويب.
أدناه قمنا بتعيين الحد الأدنى لقيمة العرض لعلامات التبويب.
<android.support.design.widget.TabLayout android:id="@+id/simpleTabLayout " android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMinWidth="50dp" /> <!-- set the minimum width value for the tabs -->
8. support.design:tabMode: تُستخدم هذه الخاصية لتعيين وضع السلوك لعلامات التبويب في هذا التخطيط. يمكننا أيضًا ضبط الوضع الذي يعنيه برمجيًا في فئة java باستخدام طريقة setTabMode (int mode ).
أدناه قمنا بتعيين وضع السلوك لعلامات التبويب.
<android.support.design.widget.TabLayout android:id="@+id/simpleTabLayout " android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" /> <!-- set the behaviour mode for the tabs -->
9. support.design:tabPadding: تُستخدم هذه الخاصية لتعيين المساحة المتروكة على طول جميع حواف علامات التبويب Tabs .
android.support.design:tabPaddingBottom: هنا أضبط المساحة المتروكة على طول الحافة السفلية من علامات التبويب.
android.support.design:tabPaddingEnd: اضبط المساحة المتروكة على طول حافة نهاية علامات التبويب.
android.support.design:tabPaddingStart: اضبط المساحة المتروكة على طول حافة البداية لعلامات التبويب.
android.support.design:tabPaddingTop: اضبط المساحة المتروكة على طول الحافة العلوية من علامات التبويب.
أدناه قمنا بتعيين المساحة المتروكة على طول جميع حواف علامات التبويب.
<android.support.design.widget.TabLayout android:id="@+id/simpleTabLayout " android:layout_width="match_parent" android:layout_height="wrap_content" app:tabPadding="5dp" /> <!-- set the padding along all edges of the tabs -->
10. support.design:tabSelectedTextColor: تُستخدم هذه الخاصية لتعيين لون النص ليتم تطبيقه على علامة التبويب المحددة حاليًا. يمكننا أيضًا ضبط هذا برمجيًا باستخدام طريقة setTabTextColors (int normalColor ، int selectedColor).
أدناه قمنا بتعيين لون النص لعلامة التبويب المحددة.
<android.support.design.widget.TabLayout android:id="@+id/simpleTabLayout " android:layout_width="match_parent" android:layout_height="wrap_content" app:tabSelectedTextColor="#fff" /> <!-- set the text color for the selected tab. -->
11. support.design:tabTextColor: تُستخدم هذه الطريقة لتعيين لون النص الافتراضي ليتم تطبيقه على علامات التبويب. . يمكننا أيضًا ضبط هذا برمجيًا باستخدام طريقة setTabTextColors (int normalColor ، int selectedColor).
أدناه قمنا بتعيين لون النص الافتراضي لعلامات التبويب.
<android.support.design.widget.TabLayout android:id="@+id/simpleTabLayout " android:layout_width="match_parent" android:layout_height="wrap_content" app:tabTextColor="#f00" /> <!-- set red as default text color for the text of tabs -->
مثال على TabLayout في Android Studio
المثال 1 من TabLayout :
يوجد أدناه أول مثال على TabLayout حيث نعرض ثلاث علامات تبويب غير قابلة للانزلاق. في هذا المثال نحدد TabLayout و FrameLayout في ملف xml الخاص بنا. في هذا المثال ، نقوم بإنشاء وإضافة 3 علامات تبويب في TabLayout بمساعدة طرق مختلفة من TabLayout. بعد ذلك قمنا بتنفيذ الحدث setOnTabSelectedListener واستبدال FrameLayout بالجزء وفقًا لعلامة التبويب المحددة.
تحميل_الكود
الخطوة 1: قم بإنشاء مشروع جديد وقم بتسميته TabLayoutExample
الخطوة 2: افتح ملف البناء build.gradle وأضف مكتبة Design support .
apply plugin: 'com.android.application'
android {
compileSdkVersion 23
buildToolsVersion "23.0.2"
defaultConfig {
applicationId "com.abhiandroid.tablayoutexample"
minSdkVersion 15
targetSdkVersion 23
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.1.0'
compile 'com.android.support:design:23.1.0' // design support library
}
الخطوه 3: افتح res -> layout -> activity_main.xml (أو) main.xml وأضف الكود التالي:
في هذه الخطوة نضيف الكود لعرض TabLayout و ViewPager في ملف xml الخاص بنا.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <android.support.design.widget.TabLayout android:id="@+id/simpleTabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabBackground="@android:color/darker_gray" app:tabIndicatorColor="#f00" app:tabSelectedTextColor="#f00" app:tabTextColor="#000" /> <FrameLayout android:id="@+id/simpleFrameLayout" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
الخطوة 4: افتح src -> package -> MainActivity.java
في هذه الخطوة نفتح MainActivity ونضيف الكود لبدء FrameLayout و TabLayout. بعد ذلك نقوم بإنشاء وإضافة 3 علامات تبويب في TabLayout. أخيرًا قمنا بتنفيذ الحدث setOnTabSelectedListener واستبدال FrameLayout بالجزء وفقًا لعلامة التبويب المحددة.
package com.abhiandroid.tablayoutexample;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.widget.FrameLayout;
public class MainActivity extends AppCompatActivity {
FrameLayout simpleFrameLayout;
TabLayout tabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// get the reference of FrameLayout and TabLayout
simpleFrameLayout = (FrameLayout) findViewById(R.id.simpleFrameLayout);
tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout);
// Create a new Tab named "First"
TabLayout.Tab firstTab = tabLayout.newTab();
firstTab.setText("First"); // set the Text for the first Tab
firstTab.setIcon(R.drawable.ic_launcher); // set an icon for the
// first tab
tabLayout.addTab(firstTab); // add the tab at in the TabLayout
// Create a new Tab named "Second"
TabLayout.Tab secondTab = tabLayout.newTab();
secondTab.setText("Second"); // set the Text for the second Tab
secondTab.setIcon(R.drawable.ic_launcher); // set an icon for the second tab
tabLayout.addTab(secondTab); // add the tab in the TabLayout
// Create a new Tab named "Third"
TabLayout.Tab thirdTab = tabLayout.newTab();
thirdTab.setText("Third"); // set the Text for the first Tab
thirdTab.setIcon(R.drawable.ic_launcher); // set an icon for the first tab
tabLayout.addTab(thirdTab); // add the tab at in the TabLayout
// perform setOnTabSelectedListener event on TabLayout
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
// get the current selected tab's position and replace the fragment accordingly
Fragment fragment = null;
switch (tab.getPosition()) {
case 0:
fragment = new FirstFragment();
break;
case 1:
fragment = new SecondFragment();
break;
case 2:
fragment = new ThirdFragment();
break;
}
FragmentManager fm = getSupportFragmentManager();
FragmentTransaction ft = fm.beginTransaction();
ft.replace(R.id.simpleFrameLayout, fragment);
ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
ft.commit();
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
}
الخطوة 5: نحتاج الآن إلى 3 أجزاء قطع Fragments و 3 تخطيطات xml لثلاث علامات تبويب. لذا قم بإنشاء ثلاثة أجزاء Fragments بالنقر بزر الماوس الأيمن على مجلد الحزمة الخاص بك وإنشاء فئات وتسميتها باسم FirstFragment و SecondFragment و ThirdFragment وإضافة الكود التالي على التوالي.
FirstFragment.class
package com.abhiandroid.tablayoutexample;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class FirstFragment extends Fragment {
public FirstFragment() {
// Required empty public constructor
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_first, container, false);
}
}
SecondFragment.class
package com.abhiandroid.tablayoutexample;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class SecondFragment extends Fragment {
public SecondFragment() {
// Required empty public constructor
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_second, container, false);
}
}
ThirdFragment.class
package com.abhiandroid.tablayoutexample;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class ThirdFragment extends Fragment {
public ThirdFragment() {
// Required empty public constructor
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_third, container, false);
}
}
الخطوة 6: الآن قم بإنشاء 3 تخطيطات layout عن طريق النقر بزر الماوس الأيمن على res / layout -> New -> Layout Resource File وقم بتسميتها باسم fragment_first و fragment_second و fragment_third وأضف الكود التالي في الملفات المعنية.
سنقوم هنا بتصميم واجهة المستخدم البسيطة الأساسية لجميع علامات التبويب الثلاث.
fragment_first.xml
<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" tools:context="info.androidhive.materialtabs.fragments.OneFragment"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="First Fragment" android:textSize="40dp" android:textStyle="bold" /> </RelativeLayout>
fragment_second.xml
<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" tools:context="info.androidhive.materialtabs.fragments.OneFragment"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Second Fragment" android:textSize="40dp" android:textStyle="bold" /> </RelativeLayout>
fragment_third.xml
<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" tools:context="info.androidhive.materialtabs.fragments.OneFragment"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Third Fragment" android:textSize="40dp" android:textStyle="bold" /> </RelativeLayout>
المثال 2 من TabLayout باستخدام ViewPager
يوجد أدناه مثال TabLayout الذي نعرض فيه علامات التبويب المنزلقة بمساعدة ViewPager. في هذا المثال نحدد TabLayout و ViewPager في ملف xml الخاص بنا. في هذا المثال ، نقوم بإنشاء وإضافة 3 علامات تبويب في TabLayout بمساعدة طرق مختلفة من TabLayout. بعد ذلك نقوم بإنشاء PagerAdapter لإعداد TabLayout مع ViewPager.
تحميل الكود
الخطوة 1: قم بإنشاء مشروع جديد وقم بتسميته TabLayoutExample
الخطوة 2: افتح ملف البناء build.gradle وأضف مكتبة Design support .
apply plugin: 'com.android.application'
android {
compileSdkVersion 23
buildToolsVersion "23.0.2"
defaultConfig {
applicationId "com.abhiandroid.tablayoutexample"
minSdkVersion 15
targetSdkVersion 23
versionCode 1
versionName "1.0"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.1.0'
compile 'com.android.support:design:23.1.0' // design support library
}
الخطوة 3: افتح res -> layout -> activity_main.xml (أو) main.xml وأضف الكود التالي:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <android.support.design.widget.TabLayout android:id="@+id/simpleTabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabBackground="@android:color/darker_gray" app:tabIndicatorColor="#f00" app:tabSelectedTextColor="#f00" app:tabTextColor="#000" /> <android.support.v4.view.ViewPager android:id="@+id/simpleViewPager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </LinearLayout>
الخطوة الرابعة: Open src -> package -> MainActivity.java
افتح ملف الجافا الرئيسي MainActivity للمشروع اضف الكود ادناه
In this step we open MainActivity and add the code for initiate the ViewPager and TabLayout. After that we create and add 3 tabs in the TabLayout. Finally we set an Adapter named PagerAdapter to set up the TabLayout with ViewPager.
package com.abhiandroid.tablayoutexample;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
ViewPager simpleViewPager;
TabLayout tabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// get the reference of ViewPager and TabLayout
simpleViewPager = (ViewPager) findViewById(R.id.simpleViewPager);
tabLayout = (TabLayout) findViewById(R.id.simpleTabLayout);
// Create a new Tab named "First"
TabLayout.Tab firstTab = tabLayout.newTab();
firstTab.setText("First"); // set the Text for the first Tab
firstTab.setIcon(R.drawable.ic_launcher); // set an icon for the
// first tab
tabLayout.addTab(firstTab); // add the tab at in the TabLayout
// Create a new Tab named "Second"
TabLayout.Tab secondTab = tabLayout.newTab();
secondTab.setText("Second"); // set the Text for the second Tab
secondTab.setIcon(R.drawable.ic_launcher); // set an icon for the second tab
tabLayout.addTab(secondTab); // add the tab in the TabLayout
// Create a new Tab named "Third"
TabLayout.Tab thirdTab = tabLayout.newTab();
thirdTab.setText("Third"); // set the Text for the first Tab
thirdTab.setIcon(R.drawable.ic_launcher); // set an icon for the first tab
tabLayout.addTab(thirdTab); // add the tab at in the TabLayout
PagerAdapter adapter = new PagerAdapter
(getSupportFragmentManager(), tabLayout.getTabCount());
simpleViewPager.setAdapter(adapter);
// addOnPageChangeListener event change the tab on slide
simpleViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
}
}
Step 5: Create a new Class named PagerAdapter and extend FragmentStatePagerAdapter in the class. In this step we create a PagerAdapter class and extends FragmentStatePagerAdapter In the class for setting the TabLayout with the ViewPager قم بانشاء كلاس بالاسم PagerAdapter ثم اضف الكود ادناه .
package com.abhiandroid.tablayoutexample;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
public class PagerAdapter extends FragmentStatePagerAdapter {
int mNumOfTabs;
public PagerAdapter(FragmentManager fm, int NumOfTabs) {
super(fm);
this.mNumOfTabs = NumOfTabs;
}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
FirstFragment tab1 = new FirstFragment();
return tab1;
case 1:
SecondFragment tab2 = new SecondFragment();
return tab2;
case 2:
ThirdFragment tab3 = new ThirdFragment();
return tab3;
default:
return null;
}
}
@Override
public int getCount() {
return mNumOfTabs;
}
}
Step 6: Now we need 3 fragments and 3 xml layouts for three tabs. So create three fragments by right click on your package folder and create classes and name them as FirstFragment, SecondFragment and ThirdFragment and add the following code respectively قم بانشاء ثلاث قطع Fragments وثلاثة تخطيطات layout بنفس الاسماء كما في الكود ادناه اسم القطعة مع الكود .
FirstFragment.class
package com.abhiandroid.tablayoutexample;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class FirstFragment extends Fragment {
public FirstFragment() {
// Required empty public constructor
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_first, container, false);
}
}
SecondFragment.classSecondFragment.class
package com.abhiandroid.tablayoutexample;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class SecondFragment extends Fragment {
public SecondFragment() {
// Required empty public constructor
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_second, container, false);
}
}
ThirdFragment.class
package com.abhiandroid.tablayoutexample;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class ThirdFragment extends Fragment {
public ThirdFragment() {
// Required empty public constructor
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_third, container, false);
}
}
Step 7: Now create 3 xml layouts by right clicking on res/layout -> New -> Layout Resource File and name them as fragment_first, fragment_second and fragment_third and add the following code in respective files.
Here we will design the basic simple UI for all the three tabs الآن قم بانشاء ثلاث مخططات بنفس الاسم مع الكود الموضح ادناه .
fragment_first.xml
<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" tools:context="info.androidhive.materialtabs.fragments.OneFragment"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="First Fragment" android:textSize="40dp" android:textStyle="bold" /> </RelativeLayout>
fragment_second.xml
<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" tools:context="info.androidhive.materialtabs.fragments.OneFragment"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Second Fragment" android:textSize="40dp" android:textStyle="bold" /> </RelativeLayout>
fragment_third.xml
<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" tools:context="info.androidhive.materialtabs.fragments.OneFragment"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Third Fragment" android:textSize="40dp" android:textStyle="bold" /> </RelativeLayout>