آموزش ساخت Swipe Tabs توسط ActionBarSherlock

1- دانلود و import کردن ActionBarSherlock در اکلیپس

1- ابتدا فایل فشرده ActionBarSherlock را از وب سایت www.actionbarsherlock.com دانلود کنید و پوشه actionbarsherlock را با درگ کردن از حالت فشرده خارج کنید.

2-  وارد اکلیپس می شویم و به مسیر  File ⇒ New ⇒ Other ⇒ Android Project From Existing Code می رویم و Next را می زنیم.
3- در صفحه باز شده روی دکمه Browse کیلیک می کنیم و آدرس پوشه actionbarsherlock  را می دهیم. 
توجه: دقت داشته باشید که گزینه Copy project into workspace را تیک زده باشید

توجه: روی actionbarsherlock  راست کلیک کنید و گزینه Properties را بزنید. در پنجره باز شده  Android را انتخاب کنید و دقت داشته باشید که در قسمت Library تیک IsLibrary خورده باشد 

4- یک پروژه جدید بسازید(نام پروژه من TestSherlock می باشد)
File ⇒  New ⇒ Android Application Project
5- روی پروژه TestSherlock  کلیک راست کرده و سپس گزینه Properties را انتخاب کنید. در پنجره باز شده از سمت چپ گزینه Android را انتخاب کنید و از سمت راست در قسمت Library روی دکمه Add کلیک کرده و سپس در پنجره باز شده actionbarsherlock  را انتخاب کنید و بر روی دکمه OK کلیک کنید. دوباره دکمه OK را کلیک کنید.
توجه: در قسمت Project Build Target گزینه API 19 را انتخاب کنید.

توجه: با اضافه کردن کتابخانه actionbarsherlock  به پروژه، اکلیپس از ما خطا می گیرد و آن به این دلیل است که هم کتابخانه actionbarsherlock  درای فایل android-support-v4.jar است و هم پروژه ما. برای رفع این خطا از داخل پوشه libs مربوط به پروژه فایل android-support-v4.jar را حذف می کنیم.
6- روی پروژه راست کلیک کنید و گزینه Properties را انتخاب کنید. در پنجره باز شده از سمت چپ گزینه Java Build Patch را انتخاب کنید سپس در سمت راست سربرگ Projects را انتخاب کنید و دکمه Add را بزنید. در پنجره باز شده actionbarsherlock را انتخاب کنید و Ok را بزنید.

حالا به سربرگ Order and Export بروید و actionbarsherlock را انتخاب کنید و از دکمه های سمت راست، دکمه Top را کلیک کنید تا بالا تر از همه گزینه ها قرار گیرد. در آخر تیک مربوط به actionbarsherlock  را روشن کنید و OK  بزنید.

7- وارد AndroidManifest پروژه شوید و Theme کل برنامه را به Theme.Sherlock تغییر دهید.

 <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.testsherlock"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="18" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.Sherlock" > // این قسمت را اضافه می کنیم
        <activity
            android:name="com.example.testsherlock.ActivityStartup"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

تا اینجا کار
کتابخانه ActionBarSherlock را دانلود کردیم و در اکلیپس Import کردیم. همچنین کتابخانه ActionBarSherlock را به پروژه خود اضافه کریم. خروجی تا این مرحله چیزی شبی به تصویر زیر است.

2- اضافه کردن Tab به پروژه

1- ActivityStartup را از extends ,SherlockFragmentActivity کنید.

 public class StartupActivity extends SherlockFragmentActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.startup_activity);
    }

 2- کدهای کلاس ActivityStartup را به شکل زیر تغییر دهید:

 public class ActivityStartup extends SherlockFragmentActivity implements com.actionbarsherlock.app.ActionBar.TabListener{
 
    ActionBar actionBar; //خط3
     
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_startup);
         
        actionBar = getSupportActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);  // خط 11
         
        ActionBar.Tab tabFragmentA = getSupportActionBar().newTab(); // خط 13
        tabFragmentA.setText("Fragment A"); // خط 14
        tabFragmentA.setTabListener(this); // خط 15
         
        ActionBar.Tab tabFragmentB = getSupportActionBar().newTab(); // خط 17
        tabFragmentB.setText("Fragment B"); // خط 18
        tabFragmentB.setTabListener(this); // خط 19
         
        ActionBar.Tab tabFragmentC = getSupportActionBar().newTab(); // خط 21
        tabFragmentC.setText("Fragment C"); // خط 22
        tabFragmentC.setTabListener(this); // خط 23
         
        actionBar.addTab(tabFragmentA); // خط 25
        actionBar.addTab(tabFragmentB); // خط 26
        actionBar.addTab(tabFragmentC); // خط 27
    }
 
    @Override
    public void onTabSelected(com.actionbarsherlock.app.ActionBar.Tab tab, android.support.v4.app.FragmentTransaction ft) {
         
    }
 
    @Override
    public void onTabUnselected(com.actionbarsherlock.app.ActionBar.Tab tab, android.support.v4.app.FragmentTransaction ft) {
         
    }
 
    @Override
    public void onTabReselected(com.actionbarsherlock.app.ActionBar.Tab tab, android.support.v4.app.FragmentTransaction ft) {
         
    }

توضیح کد بالا
به دلیل اینکه از setTabListener در خطوط 15، 19 و 23 استفاده کردیم باید ActivityStartup را ازcom.actionbarsherlock.app.ActionBar.TabListener ایمپلمنتز(implements) کنیم که با این کار 3 متد onTabSelected, onTabUnselected, onTabReselected به کلاس اکتیویتی ما اضافه می شوند.
چونکه برای نمایش tabها باید از Actionbar استفاده کنیم، پس ابتدا باید یک Actionbar بسازیم. برای اینکار در خط 3 یک فیلد از جنس ActionBar با نام actionBar ساختیم و در خط 11 توسط متد setNavigationMode گفتیم که Actionbar ما داری tab است.
حالا در خطوط 13، 17 و 21 سه تا tab با نام های tabFragmentA, tabFragmentB و tabFragmentC ساختیم و در خطوط 14، 18 و 22 توسط متد setText برای هر tab متن قرار دادیم. در خطوط 15، 19 و 23 به هر 3 tab گفتیم که رویدادت رو از همین کلاسی که توش هستی بخون.
آخر سر در خطوط 25، 26 و 27  هر 3 تب ایجاد شده را توسط متد addTab به Actionbar  اضافه کردیم. در واقع با اینکار گفتیم که tabهای ساخته شده را در Actionbar نمایش بده.

تا اینجا کار
توانستیم برای برنامه tab ایجاد کنیم. خروجی تا این مرحله چیزی شبی به تصویر زیر است.

 3- ایجاد Fragment و تغییر صفحه با کشیدن انگشت روی صفحه نمایش

1- در لایه ی اکتیویتی ActivityStartp یک ViewPager قرار دهید (نام این لایه را startup_activity.xml قرار دادم).
ViewPager چیست؟
توسط ViewPager می توانیم این قابلیت را به برنامه اضافه کنیم که کاربر با کشیدن صفحه، محتوا را تغییر دهید. به عبارت دیگر توسط ViewPager می توانیم با کشیدن صفحه، بین Fragment ها حرکت کنیم.

 <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ActivityStartup" />

توجه: در صورتی که اکتیویتی شما در پکیجی به جز پکیج اصلی برنامه قرار دارد، در خط 6 حتما نام پکیج را قبل از نقطه قبل از نام اکتیوتی قرار دهید.

2- در این پروژه ما 3 صفحه داریم، که به ازای هر صفحه یک Fragment ایجاد می کنیم. برای ساخت Fragment ابتدا در work space اکلیپس روی پکیج راست کلیک کنید سپس:
New ⇒ Other ⇒ Androdi Object ⇒ New Blank Fragment ⇒ Finish

به همین ترتیب من 3تا Fragment با نام های FragmentA, FragmentB, FragmentC ایجاد کردم.

3- حالا به ازای هر Fragment یک لایه ایجاد می کنیم. من لایه های fragment_a, fragment_b, fragment_c را ایجاد کردم.

4- کدهای هر Fragment را به شکل زیر تغییر می دهیم:

 public class FragmentA extends SherlockFragment {
 
    public FragmentA() {
    }
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_a, container, false);
    }
 
}

5- در کلاس ActivityStartp یک فیلد از جنس ViewPager می سازیم و در متد onCreate آن را  به ViewPagerای که در لایه activity_startup.xml ساختیم cast می کنیم.

 ViewPager viewPager;
 
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_startup);
         
    //ViewPager
        viewPager = (ViewPager) findViewById(R.id.pager);
        .
        .
        .
}

5- برای حرکت بین Fragmentها، به یک Adapter نیاز داریم که برای اینکار یک کلاس جدید به نام AdapterPages در کلاس ActivityStartp می سازیم و آن را از FragmentPagerAdapter اکستنز(extends) می کنیم. سپس constructor این کلاس را اضافه می کنیم و متدهای getItem و getCount را override می کنیم.

 public class AdapterPages extends FragmentPagerAdapter{
 
        public AdapterPages(FragmentManager fm) {
            super(fm);
            // TODO Auto-generated constructor stub
        }
 
        @Override
        public Fragment getItem(int arg0) {
            // TODO Auto-generated method stub
            return null;
        }
 
        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return 0;
        }
     
    }

6- حالا در کلاس AdapterPages در متد getItem می گیم که اگر در موقعیت 0 بودیم، FragmentA و اگر در موقیت 1 بودیم FragmentB و اگر در موقعیت 2 بودیم FragmentC را نمایش بده. همچنین در متد getCount تعداد Fragmentها را می نویسیم.

 public class AdapterPages extends FragmentPagerAdapter{
 
        public AdapterPages(FragmentManager fm) {
            super(fm);
        }
 
        @Override
        public Fragment getItem(int position) {
             
            Fragment fragment = null;
            switch(position){
            case 0:
                fragment = new FragmentA();
                break;
            case 1:
                fragment = new FragmentB();
                break;
            case 2:
                fragment = new FragmentC();
                break;
            }
            return fragment;
 
         
        }
 
        @Override
        public int getCount() {
            return 3;
        }
         
    }

7- در آخر در متد onCreate کلاس ActivityStartup، بعد از cast کردن ViewPager کلاس AdapterPages را به viewPager ست(set) می کنیم

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_startup);
      
    //ViewPager
        viewPager = (ViewPager) findViewById(R.id.pager);
        viewPager.setAdapter(new AdapterPages(getSupportFragmentManager()));
     .
     .
     .
    }

تا اینجا کار
توانستیم با استفاده از Fragment و ViewPager کاری کنیم که با کشیدن صفحه بین صفحات حرکت کنیم. خروجی چیزی شبی به تصویر زیر است.

4- وصل کردن Fragmentها و Tabها به یکدیگر

توضیح: 
 در این قسمت از آموزش می خواهیم کاری کنیم که اگر Fragmentها را تغییر دادیم، Tabها هم تغییر کنند و برعکس. به عنوان مثال اگر تب FRAGMENT A را انتخاب کردیم، FragmentA نمایش داده شود و اگر صفحه را کشیدیم و در FragmentC قرار گرفتیم، تب FRAGMENT C انتخاب شود.

1- بعد از set کردن Adapter برای viewPager، رویداد OnPageChangeListener را برای viewPager فراخوانی می کنیم:

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_startup);
     .
     .
     .
        //ViewPager
        viewPager = (ViewPager) findViewById(R.id.pager);
        viewPager.setAdapter(new AdapterPages(getSupportFragmentManager()));
        viewPager.setOnPageChangeListener(new OnPageChangeListener() {
             
            @Override
            public void onPageSelected(int position) {
                 
            }
             
            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub
                 
            }
             
            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub
                 
            }
        });
    }

 2- در متد onPageSelected متعلق به رویداد  setOnPageChangeListener، میگیم که نصبت به شماره ایندکس Fragment، شماره ایندکس Tabها هم تغییر کند. یعنی اگر روی Fragmentای با شماره ایندکس 0 بودیم، در Tabها Tabای به حالت انتخاب در آید که شماره ایندکسش 0 است.
پس داخل متد onPageSelected  می نویسیم:

 actionBar.setSelectedNavigationItem(position);

3- حالا در متد onTabSelected کلاس ActivityStartup می گیم که نصبت به شماره ایندکس Tab انتخاب شده، Fragment را انتخاب کن.

 viewPager.setCurrentItem(tab.getPosition());

نتیجه پایان کار
مشاهده فیلم برنامه ساخته شده در آپارات

دانلود پروژه ساخته شده در این آموزش

پایان