ActionBarCompat 【Swipe to change tab】

23 October 2013
上一篇ActionBarCompat 【Add Tab】講到了，你們可能會覺得很奇怪，
為什麼不管點tab1還是tab2，
怎麼內容都一樣？
因為我們的確沒有透過FragmentTransaction把Fragment加進來！
最後的結論是說，要透過ViewPager去把Fragment加進來！

所以這篇就是要教大家怎麼使用ViewPager，
使用ViewPager好處就是，使用者可以用swipe去換tab，


1. 首先請將你的class implement OnPageChangeListener 這個interface

public class MainActivity extends ActionBarActivity implements TabListener,OnPageChangeListener {
    ....
}


2. 增加對應的method

因為在第一步的時候，你就已經implement一個interface進來，
所以在第二步驟我們必須增加下面的method

@Override
public void onPageScrollStateChanged(int arg0) {}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {}

@Override
public void onPageSelected(int iPosition) {
    getSupportActionBar().setSelectedNavigationItem(iPosition);
}


我們在上面的onPageSeleced中實作了一段code，
它的目的就是當你swipe到該page，就顯示該page應顯示的Fragment！


3. 加入2個Fragment

這步驟是新增兩個Fragment，
目的是為了要塞在tab裡面！
由於很簡單，就不貼example了！
反正就是兩個Fragment（先命名為FragmentTab1, FragmentTab2）



4. 加入FragmentPagerAdapter

FragmentPagerAdapter目的就是待會要餵給viewPager使用的，
這樣viewPager才知道捲動到哪頁的時候，要顯示哪個Fragment．
我們可以在getItem看到，
當iPosition為1的時候，意思就是卷到第一個tab了！
所以我們就在這new上面新增的FragmentTab1出來！

public class HomeViewPagerAdapter extends FragmentPagerAdapter{

    public HomeViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int iPosition) {
        switch (iPosition) {
            case 0:
                return new FragmentTab1();
            case 1:
                return new FragmentTab2();
        }
        return null;
    }

    @Override
    public int getCount() {
        return 2;
    }
}





5. 在layout中加入viewpager

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />


</LinearLayout>



6. 取得layout中的viewpager

在這步驟就是取得剛剛上步驟新增的viewpager，
然後對它作設定，
首先要先設定adapter，這裡就是餵給他我們上面的HomeViewPagerAdapter，
接著就是設定listener，這裡我們指定this，指定this的話就會去抓第二步驟implement的method！
當然你也可以自己new！
至於第三步與第四步是optional的！當然你也可以不要設定！
這兩步驟只是為了讓畫面好看一點，在tab1和tab2之間swipe的時候，中間會有一個style在！
但理論上，你們第三步與第四步都會錯，因為沒有圖也沒有設定dimension！
private ViewPager viewPager;
 
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  
    viewPager = (ViewPager) findViewById(R.id.pager);
  
    if (viewPager!=null){
        viewPager.setAdapter(new HomeViewPagerAdapter(getSupportFragmentManager()));
        viewPager.setOnPageChangeListener(this);
        viewPager.setPageMarginDrawable(R.drawable.grey_border_inset_lr);  // optional
        viewPager.setPageMargin(getResources().getDimensionPixelSize(R.dimen.page_margin_width)); // optional  
    }
}




7. hook onTabSelected

理論上完成上面的步驟，
你應該就可以完成用swipe換tab了！
可是你可能會發現，當你直接點tab時，
tab並不會更換！
所以最後一步驟就是要實作這一塊！
還記得上一篇嗎？
我們有implement onTabSelected這個method！
在裡面加入下面的code吧！

@Override
public void onTabSelected(Tab tab, FragmentTransaction arg1) {
    viewPager.setCurrentItem(tab.getPosition());
}



大功告成！
恩，下一篇會教大家怎麼去style自己的actionbar(if i have time..)












blog comments powered by Disqus