使用FragmentTabHost+Fragment+viewpager 实现滑动分页

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

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

<FrameLayout
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />

<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/maintab_toolbar_bg" >

<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" />
</android.support.v4.app.FragmentTabHost>

</LinearLayout>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >

<ImageView
android:id="@+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:padding="3dp"
android:src="@drawable/tab_home_btn">
</ImageView>

<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首页"
android:textSize="10sp"
android:textColor="#ffffff">
</TextView>

</LinearLayout>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

package com.yangyu.mycustomtab02;

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

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentTabHost;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TabWidget;
import android.widget.TabHost.OnTabChangeListener;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;

/**
* @author yangyu 功能描述：自定义TabHost ——使用FragmentTabHost+Fragment+viewpager 实现滑动分页
*/
public class MainTabActivity extends FragmentActivity {
// 定义FragmentTabHost对象
private FragmentTabHost mTabHost;
// 定义一个布局
private LayoutInflater layoutInflater;
// 定义数组来存放Fragment界面
private Class fragmentArray[] = { FragmentPage1.class, FragmentPage2.class,
FragmentPage3.class, FragmentPage4.class, FragmentPage5.class };
// 定义数组来存放按钮图片
private int mImageViewArray[] = { R.drawable.tab_home_btn,
R.drawable.tab_message_btn, R.drawable.tab_selfinfo_btn,
R.drawable.tab_square_btn, R.drawable.tab_more_btn };
// Tab选项卡的文字
private String mTextviewArray[] = { "首页", "消息", "好友", "广场", "更多" };
private ViewPager vp;
private List<Fragment> list = new ArrayList<Fragment>();
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_tab_layout);
initView();
initPager();
}
/**
* 初始化组件
*/
private void initView() {
vp = (ViewPager) findViewById(R.id.pager);
vp.setOnPageChangeListener(new ViewPagerListener());
// MyAdapter adapter = new MyAdapter();
// vp.setAdapter(adapter);
// 实例化布局对象
layoutInflater = LayoutInflater.from(this);
// 实例化TabHost对象，得到TabHost
mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
// 得到对象后，初始化
mTabHost.setup(this, getSupportFragmentManager(), R.id.pager);
mTabHost.setOnTabChangedListener(new TabHostListener());
// 得到fragment的个数
int count = fragmentArray.length;

for (int i = 0; i < count; i++) {
// 为每一个Tab按钮设置图标、文字和内容
TabSpec tabSpec = mTabHost.newTabSpec(mTextviewArray[i])
.setIndicator(getTabItemView(i));
// 将Tab按钮添加进Tab选项卡中
mTabHost.addTab(tabSpec, fragmentArray[i], null);
mTabHost.setTag(i);
// 设置Tab按钮的背景
mTabHost.getTabWidget().getChildAt(i)
.setBackgroundResource(R.drawable.selector_tab_background);
}
}
private void initPager() {
FragmentPage1 p1 = new FragmentPage1();
FragmentPage2 p2 = new FragmentPage2();
FragmentPage3 p3 = new FragmentPage3();
FragmentPage4 p4 = new FragmentPage4();
FragmentPage5 p5 = new FragmentPage5();
list.add(p1);
list.add(p2);
list.add(p3);
list.add(p4);
list.add(p5);
vp.setAdapter(new MyAdapter(getSupportFragmentManager()));
}
/**
* 给Tab按钮设置图标和文字
*/
private View getTabItemView(int index) {
View view = layoutInflater.inflate(R.layout.tab_item_view, null);
ImageView imageView = (ImageView) view.findViewById(R.id.imageview);
imageView.setImageResource(mImageViewArray[index]);
TextView textView = (TextView) view.findViewById(R.id.textview);
textView.setText(mTextviewArray[index]);
return view;
}

private class TabHostListener implements OnTabChangeListener {
@Override
public void onTabChanged(String tabId) {
int position = mTabHost.getCurrentTab();
vp.setCurrentItem(position);
}
}
class MyAdapter extends FragmentPagerAdapter {

public MyAdapter(FragmentManager fm) {
super(fm);
// TODO Auto-generated constructor stub
}

@Override
public Fragment getItem(int arg0) {
return list.get(arg0);
}

@Override
public int getCount() {
return list.size();
}

}

class ViewPagerListener implements OnPageChangeListener {
@Override
public void onPageScrollStateChanged(int arg0) {

}

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

}

@Override
public void onPageSelected(int index) {
TabWidget widget = mTabHost.getTabWidget();
int oldFocusability = widget.getDescendantFocusability();
widget.setDescendantFocusability(ViewGroup.FOCUS_BLOCK_DESCENDANTS);
mTabHost.setCurrentTab(index);
widget.setDescendantFocusability(oldFocusability);
}
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package com.yangyu.mycustomtab02;

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

public class FragmentPage1 extends Fragment{

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment_1, null);
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

<ImageView
android:id="@+id/imageview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitCenter"
android:src="@drawable/xianjian01" >
</ImageView>

</LinearLayout>