نقوم في هذا المثال بإنشاء علامات التبويب (Android Tabs) باستخدام مكتبة دعم التصميم (Android Design Support Library).
نمط التنقل في علامة التبويب هو نمط تصميم شائع جدًا بين تطبيقات (Android). ولكن منذ الإصدار 5.0 من نظام التشغيل (Android)، جاء التصميم بصورة متعددة الأبعاد، وتم إجراء تعديلات على العديد من واجهات برمجة التطبيقات. مما أدى إلى إهمال شريط الإجراءات. على الرغم من أنه تم إطلاق واجهة برمجة تطبيقات جديدة لعلامات تبويب (Android) من خلال مكتبة دعم التصميم مؤخرًا، فإن الفئة الرئيسية المستخدمة لعرض علامات التبويب من خلال واجهات برمجة التطبيقات هي (Android TabLayout).
في هذا المثال على نظام (Android Tabs) ، سنقوم بإنشاء شاشة بثلاث علامات تبويب بإستخدام واجهة برمجة التطبيقات الجديدة هذه العلامات سوف تستعمل خاصية (ViewPager) في تنقلها بين الصفحات.

  • الخطوة الأولى:
    قم بتضمين هذه المكتبات في قسم التبعيات في ملف (build.gradle) الخاص بك:

    compile 'com.android.support:appcompat-v7:22.2.0'
    compile 'com.android.support:design:22.2.0'
  • الخطوة الثانية:
    الآن ، بما أننا سنستخدم أشرطة أدوات (Android) و (TabLayout) لعرض علامات التبويب، سوف نزيل شريط الإجراءات من التنسيق باستخدام الأنماط في ملف Styles.xml

    <resources>
     
        <!-- Base application theme. -->
        <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
            <!--   your app branding color for the app bar -->
            <item name="colorPrimary">#3F51B5</item>
            <!--   darker variant for the status bar and contextual app bars -->
            <item name="colorPrimaryDark">#303F9F</item>
            <!--   theme UI controls like checkboxes and text fields -->
            <item name="colorAccent">#FF4081</item>
        </style>
     
    </resources>
  • الخطوة الثالثة:
    الآن، لعرض علامات تبويب (Android) سنقوم بتحديد ثلاث أجزاء بسيطة مع تخطيطاتهم باستعمال (ViewPager). قم بإنشاء الملفات التالية.
  • علامة التبويب (1) 
    + TabFragment1.java

    package com.yourname.designsupporttabs;
     
    import android.os.Bundle;
    import android.support.v4.app.Fragment;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
     
    public class TabFragment1 extends Fragment {
     
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            return inflater.inflate(R.layout.tab_fragment_1, container, false);
        }
    }

    + tab_fragment_1.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">
     
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Tab 1"
            android:textAppearance="?android:attr/textAppearanceLarge"/>
     
    </RelativeLayout>
  • علامة التبويب (2)
    + TabFragment2.java

    package com.yourname.designsupporttabs;
     
    import android.os.Bundle;
    import android.support.v4.app.Fragment;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
     
    public class TabFragment2 extends Fragment {
     
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            return inflater.inflate(R.layout.tab_fragment_2, container, false);
        }
    }

    + tab_fragment_2.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">
     
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Tab 2"
            android:textAppearance="?android:attr/textAppearanceLarge"/>
     
    </RelativeLayout>
  • علامة التبويب (3)
    + TabFragment3.java

    package com.yourname.designsupporttabs;
     
    import android.os.Bundle;
    import android.support.v4.app.Fragment;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
     
    public class TabFragment3 extends Fragment {
     
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            return inflater.inflate(R.layout.tab_fragment_3, container, false);
        }
    }

    + tab_fragment_3.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">
     
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Tab 3"
            android:textAppearance="?android:attr/textAppearanceLarge"/>
     
    </RelativeLayout>
  • الخطوة الرابعة:
    والآن بعد أن تم تحديد جميع أجزاء العلامات التبويب، سنقوم بتحديد مظهر الصفحات التي سيتم تنسيقها مع هذه العلامات. قم بإنشاء الملف التالي (PagerAdapter.java)

    package com.yourname.designsupporttabs;
     
    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:
                    TabFragment1 tab1 = new TabFragment1();
                    return tab1;
                case 1:
                    TabFragment2 tab2 = new TabFragment2();
                    return tab2;
                case 2:
                    TabFragment3 tab3 = new TabFragment3();
                    return tab3;
                default:
                    return null;
            }
        }
     
        @Override
        public int getCount() {
            return mNumOfTabs;
        }
    }
  • الخطوة الخامسة:
    وأخيرا نضع الاكواد التالية مكان الموجودة عندنا.
    + activity_main.xml

    <RelativeLayout
        android:id="@+id/main_layout"
        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"
        tools:context=".MainActivity">
    
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:background="?attr/colorPrimary"
            android:elevation="6dp"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    
        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/toolbar"
            android:background="?attr/colorPrimary"
            android:elevation="6dp"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
    
        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:layout_below="@id/tab_layout"/>
    
    </RelativeLayout>

    + MainActivity.java

    package com.yourname.designsupporttabs;
     
    import android.os.Bundle;
    import android.support.design.widget.TabLayout;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.Toolbar;
    import android.view.Menu;
    import android.view.MenuItem;
     
     
    public class MainActivity extends AppCompatActivity {
     
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
            setSupportActionBar(toolbar);
     
            TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
            tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
            tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
            tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
            tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
     
            final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
            final PagerAdapter adapter = new PagerAdapter
                    (getSupportFragmentManager(), tabLayout.getTabCount());
            viewPager.setAdapter(adapter);
            viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
            tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
                @Override
                public void onTabSelected(TabLayout.Tab tab) {
                    viewPager.setCurrentItem(tab.getPosition());
                }
     
                @Override
                public void onTabUnselected(TabLayout.Tab tab) {
     
                }
     
                @Override
                public void onTabReselected(TabLayout.Tab tab) {
     
                }
            });
        }
     
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.menu_main, menu);
            return true;
        }
     
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            int id = item.getItemId();
            if (id == R.id.action_settings) {
                return true;
            }
     
            return super.onOptionsItemSelected(item);
        }
    }

    الآن قم بتجربة التطبيق. ستجد إنشاء الله في خانة تطبيقات مفتوحة المصدر، تطبيق كامل يدعم خاصية علامات التبويب. إلى ذلك الموعد نتركك في حفظ الله ورعايته.