利用FragmentTabHost和ViewPager来实现可滑动切换的页面

椎锋陷陈

2014-06-02

1. FragmentTabHost的基本使用方法，请参照官方教程和案例

http://developer.android.com/intl/ja/reference/android/support/v4/app/FragmentTabHost.html

2. 首先，我们定义页面的布局文件

activity_bottom.xml

<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

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

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />

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

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" />
    </LinearLayout>

</android.support.v4.app.FragmentTabHost>

把ViewPager和TabWidget放在FragmentTabHost里面

ViewPager用来显示页面内容，TabWidget用来显示按钮。如何把ViewPager和TabWidget调换位置的化，按钮将出现在页面的上方。

FragmentLayout用来识别当前选中的Tab。

3. 接下来在drawable文件夹下定义每个按钮的selector，用于切换页面或者点击按钮时，使按钮图片改变。

tab1_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/tab1_selected" android:state_enabled="false"/>
    <item android:drawable="@drawable/tab1_normal" android:state_enabled="true"/>

</selector>

tab2, tab3, tab4....都采用同样的定义。

4. 定义各页面的Fragment的布局。

fragment1.xml

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

    <TextView
        android:id="@+id/text1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </TextView>

</FrameLayout>

fragment2,3,4...采用类似定义。

5. 各Tab的表示内容

tab1.xml

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/description"
    android:scaleType="centerInside"
    android:src="@drawable/tab1_button" />

tab2,3,4...采用类似定义

6.接下来实装Activity

继承与FragmentActivity

MainActivity

package org.kaka.booker.activity;

import java.util.ArrayList;
import java.util.List;

import org.kaka.booker.R;
import org.kaka.booker.activity.fragment.Fragment1;
import org.kaka.booker.activity.fragment.Fragment2;
import org.kaka.booker.activity.fragment.Fragment3;
import org.kaka.booker.activity.fragment.Fragment4;
import org.kaka.booker.adapter.FragmentViewPagerAdapter;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTabHost;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TabHost.OnTabChangeListener;

public class MainActivity extends FragmentActivity {
	private FragmentTabHost tabHost;
	private String currentTabId;
	private View currentView;

	private ViewPager viewPager;
	private List<Fragment> fragmentList;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_bottom);

		initTabHost();
		initViewPager();
	}

	private void initTabHost() {
		fragmentList = new ArrayList<Fragment>();
		tabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
		tabHost.setup(this, getSupportFragmentManager(),
				android.R.id.tabcontent);

		LayoutInflater inflate = LayoutInflater.from(this);
		View tab1 = inflate.inflate(R.layout.tab1, null);
		View tab2 = inflate.inflate(R.layout.tab2, null);
		View tab3 = inflate.inflate(R.layout.tab2, null);
		View tab4 = inflate.inflate(R.layout.tab2, null);

		tab1.setEnabled(false);
		tab2.setEnabled(true);
		tab3.setEnabled(true);
		tab4.setEnabled(true);

		fragmentList.add(new Fragment1());
		fragmentList.add(new Fragment2());
		fragmentList.add(new Fragment3());
		fragmentList.add(new Fragment4());

		tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator(tab1),
				Fragment1.class, null);
		tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator(tab2),
				Fragment2.class, null);
		tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator(tab3),
				Fragment3.class, null);
		tabHost.addTab(tabHost.newTabSpec("tab4").setIndicator(tab4),
				Fragment4.class, null);

		currentTabId = "tab1";
		currentView = tab1;

		tabHost.setOnTabChangedListener(new OnTabChangeListener() {
			@Override
			public void onTabChanged(String tabId) {
				if (!currentTabId.equals(tabId)) {
					currentView.setEnabled(true);

					View preView = tabHost.getCurrentTabView();
					currentView = preView;
					preView.setEnabled(false);

					currentTabId = tabId;
				}
				viewPager.setCurrentItem(tabHost.getCurrentTab());
			}
		});
	}

	private void initViewPager() {
		viewPager = (ViewPager) findViewById(R.id.itemViewPager);
		viewPager.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub

			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub

			}

			@Override
			public void onPageSelected(int arg0) {
				tabHost.setCurrentTab(arg0);
			}

		});

		viewPager.setAdapter(new FragmentViewPagerAdapter(
				getSupportFragmentManager(), fragmentList));
	}
}

7. 定义ViewPager的适配器

FragmentViewPagerAdapter

package org.kaka.booker.adapter;

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class FragmentViewPagerAdapter extends FragmentPagerAdapter {
	private List<Fragment> fragmentList;

	public FragmentViewPagerAdapter(FragmentManager fm,
			List<Fragment> fragmentList) {
		super(fm);
		this.fragmentList = fragmentList;
	}

	@Override
	public Fragment getItem(int arg0) {
		// TODO Auto-generated method stub
		return fragmentList.get(arg0);
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return fragmentList.size();
	}

}

8. 最后定义每一个页面的Fragment

Fragment1

package org.kaka.booker.activity.fragment;

import org.kaka.booker.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class Fragment1 extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflator, ViewGroup container,
			Bundle bundle) {
		View view = inflator.inflate(R.layout.fragment_empty, container, false);
		TextView text = (TextView) view.findViewById(R.id.text1);
		text.setText("hello");
		return view;
	}
}

viewpager fragmenttabhost android