Android 開發 (二十七) tabhost 加上viewpager 使用

Tabhost以及ViewPager介紹

如下圖，在設計app時，常常會使用到這種分頁方式，
例如我寫了一個email app， tab a為  hotmail  ， tab b 為 gmail  ....以此類推，
tabhost就是上面的tab，而viewPager讓我們能夠利用滑動切換頁面
兩個加在一起的話，有較好的使用者經驗。

要如何使用

首先必須先創建 main.xml
在xml可以看到，layout裡面同時擁有 tabhost 以及viewpager

<TabHost android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="@+id/tabhost" xmlns:android="http://schemas.android.com/apk/res/android">


<LinearLayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical">

<TabWidget android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@android:id/tabs" android:layout_marginRight="3dp" android:layout_marginLeft="3dp"> </TabWidget>

<android.support.v4.view.ViewPager android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="@+id/viewpager"/>

<FrameLayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:id="@android:id/tabcontent" android:visibility="gone"> </FrameLayout>

</LinearLayout>

</TabHost>

接著在 tabFragment內

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.login_tab_layout, container,false);
		mPager  = (ViewPager) view.findViewById(R.id.viewpager);
		mTabHost = (TabHost)  view.findViewById(R.id.tabhost);
		mTabHost.setup();	
		mTabHost.setOnTabChangedListener(new OnTabChangeListener() {
            @Override
            public void onTabChanged(String tabId) {
            	mTabHost.setOnTabChangedListener(new OnTabChangeListener() {
                        @Override
                        public void onTabChanged(String tabId) {                           	
                        		mPager.setCurrentItem(mPager.getAdapter().getItemPosition(fragmentMap.get(tabId)));
                        }
                    });
                
            }
        });
		
        mPager.setOnPageChangeListener(new OnPageChangeListener() {
            
        	@Override
            public void onPageSelected(int position) {            	
            		mTabHost.setCurrentTab(position);
            }
            
            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {}
            
            @Override
            public void onPageScrollStateChanged(int arg0) {}
        });
		return view;
	}		

在點擊tabhost時同時切換viewpager
在切換viewpager時同時切換tabhost

接著要添加fragment在viewpager內，以及添加tab在Tabhost內

public void addFragmentTab(int titleResId, int tabViewResId, Fragment fragment , String tag){
		list.add(fragment);
		fragmentMap.put(tag, fragment);
		TextView tabView = (TextView) LayoutInflater.from(getActivity()).inflate(tabViewResId, null);
		tabView.setText(titleResId);

		TabSpec tabSpec = mTabHost.newTabSpec(tag).setIndicator(tabView);
	    tabSpec.setContent(new TabFactory(getActivity()));
	    mTabHost.addTab(tabSpec);
	   
	}

接著就完成了
搭配 Android 開發 (二十五) how to change bottom color of tabhost 
就可以完成客製化tab

附上 git 的project url