1.示例
2.代码
2.1 TabViewPagerMain.java
1 import android.graphics.drawable.Drawable;
2 import android.os.Bundle;
3 import android.support.v4.app.Fragment;
4 import android.support.v4.view.ViewPager;
5 import android.view.LayoutInflater;
6 import android.view.View;
7 import android.view.ViewGroup;
8 import android.widget.LinearLayout;
9 import android.widget.TextView;
10
11 import com.txw.e.viewpager.R;
12
13 public class TabViewPagerMain extends Fragment {
14
15 //1，在layout.xml中添加 ViewPagerFragment,它可以是顶级布局，如下：
16 /*
17 <?xml version="1.0" encoding="utf-8"?>
18 <android.support.v4.view.ViewPagerFragment
19 android:id="@+id/state_view_pager"
20 xmlns:android="http://schemas.android.com/apk/res/android"
21 android:layout_width="match_parent"
22 android:layout_height="match_parent"/>
23 */
24
25 //2，准备变量,ViewPager和 PagerAdapter
26 ViewPager pager;
27 TabViewPagerAdapter pagerAdapter;
28
29 //3，初始化pager
30 void initPager(View v){
31 //从layout.xml中初始化pager
32 pager = (ViewPager) v.findViewById(R.id.tab_view_pager);
33
34 //初始化page adapter
35 pagerAdapter = new TabViewPagerAdapter(getFragmentManager());
36
37 //设置adapter
38 pager.setAdapter(pagerAdapter);
39
40 //设置page切换监听者
41 pager.addOnPageChangeListener(pageChangeListener);
42
43 //设置pager切换动画
44 // pager.setPageTransformer(true, new DepthPageTransformer());
45 }
46
47 //4，处理 pager 切换事件
48
49 /**
50 * This method will be invoked when the current page is scrolled, either as
51 * part of a programmatically initiated smooth scroll or a user initiated
52 * touch scroll.
53 *
54 * @param position
55 * Position index of the first page currently being displayed.
56 * Page position+1 will be visible if positionOffset is nonzero.
57 * 当positionOffset不为0时，就说明有划动，这时屏幕会同时显示两个page，各显示一部分。
58 * 这时position就是第一个page的下标。
59 * @param positionOffset
60 * Value from [0, 1) indicating the offset from the page at position.
61 * 是当前页面滑动比例，如果页面向左翻动，这个值不断变大，最后在趋近1的情况后突变为0。
62 * 如果页面向右翻动，这个值不断变小，最后变为0。
63 * 当前屏幕上显示的两个page中第一个page相对于屏幕中间偏移量，如果越小说明越近中心，说明第1个page向右移动。
64 * 越大说明第1个page正在远离中心。就是向左移动。
65 * @param positionOffsetPixels
66 * Value in pixels indicating the offset from position.
67 */
68 /*
69
70 */
71 ViewPager.OnPageChangeListener pageChangeListener = new ViewPager.OnPageChangeListener() {
72 @Override
73 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
74 System.out.print("onPageScrolled : ");
75 System.out.print("position " + position);
76 System.out.print("\tpositionOffset " + positionOffset);
77 System.out.println("\tpositionOffsetPixels " + positionOffsetPixels);
78 if (positionOffset != 0 ){
79 View lTab = tabWidget.getChildAt(position);
80 View rTab = tabWidget.getChildAt(position + 1);
81
82 lTab.setSelected(true);
83 rTab.setSelected(true);
84
85 lTab.setAlpha(1.35f - positionOffset);
86 rTab.setAlpha(positionOffset + 0.35f);
87 }else{
88 for (int i = 0 ; i < tabWidget.getChildCount() ; ++i){
89 View tab = tabWidget.getChildAt(i);
90 tab.setAlpha(1.0f);
91 if (i == position){
92 tab.setSelected(true);
93 }else{
94 tab.setSelected(false);
95 }
96 }
97 }
98 }
99 /**
100 * This method will be invoked when a new page becomes selected. Animation
101 * is not necessarily complete.
102 *
103 * @param position
104 * Position index of the new selected page.
105 */
106 // 一个新页被调用时执行,仍为原来的page时，该方法不被调用
107 @Override
108 public void onPageSelected(int position) {
109 System.out.println("onPageSelected " + position);
110
111 }
112
113
114 /**
115 * Called when the scroll state changes. Useful for discovering when the
116 * user begins dragging, when the pager is automatically settling to the
117 * current page, or when it is fully stopped/idle.
118 *
119 * @param state
120 * The new scroll state.
121 * @see ViewPager#SCROLL_STATE_IDLE
122 * @see ViewPager#SCROLL_STATE_DRAGGING
123 * @see ViewPager#SCROLL_STATE_SETTLING
124 */
125 /*
126 * SCROLL_STATE_IDLE: pager处于空闲状态
127 * SCROLL_STATE_DRAGGING： pager处于正在拖拽中
128 * SCROLL_STATE_SETTLING： pager正在自动沉降，相当于松手后，pager恢复到一个完整pager的过程
129 */
130 @Override
131 public void onPageScrollStateChanged(int state) {
132 System.out.println("onPageScrollStateChanged " + state);
133 }
134 };
135
136 //5，重写切换动画类，可以把这个类放到外面去。
137 public class DepthPageTransformer implements ViewPager.PageTransformer {
138 private static final float MIN_SCALE = 0.75f;
139
140 public void transformPage(View view, float position) {
141 int pageWidth = view.getWidth();
142
143 if (position < -1) { // [-Infinity,-1)
144 // This page is way off-screen to the left.
145 view.setAlpha(0);
146
147 } else if (position <= 0) { // [-1,0]
148 // Use the default slide transition when moving to the left page
149 view.setAlpha(1);
150 view.setTranslationX(0);
151 view.setScaleX(1);
152 view.setScaleY(1);
153
154 } else if (position <= 1) { // (0,1]
155 // Fade the page out.
156 view.setAlpha(1 - position);
157
158 // Counteract the default slide transition
159 view.setTranslationX(pageWidth * -position);
160
161 // Scale the page down (between MIN_SCALE and 1)
162 float scaleFactor = MIN_SCALE
163 + (1 - MIN_SCALE) * (1 - Math.abs(position));
164 view.setScaleX(scaleFactor);
165 view.setScaleY(scaleFactor);
166
167 } else { // (1,+Infinity]
168 // This page is way off-screen to the right.
169 view.setAlpha(0);
170 }
171 }
172 }
173
174 @Override
175 public View onCreateView(LayoutInflater inflater, ViewGroup container,
176 Bundle savedInstanceState) {
177 // Inflate the layout for this fragment
178 View v = inflater.inflate(R.layout.fragment_tab_pager_main, container, false);
179
180 initPager(v);
181
182 initTabWidget(v);
183
184 return v;
185 }
186
187 //初始化tab栏
188 void initTabWidget(View v){
189 tabWidget = (LinearLayout) v.findViewById(R.id.tab_widget);
190 tab0 = (TextView) tabWidget.findViewById(R.id.tab0);
191 tab1 = (TextView) tabWidget.findViewById(R.id.tab1);
192 tab2 = (TextView) tabWidget.findViewById(R.id.tab2);
193 tab3 = (TextView) tabWidget.findViewById(R.id.tab3);
194
195 Drawable top ;
196 top = tab0.getResources().getDrawable(R.drawable.tab_session_state);
197 top.setBounds(0, 0, 48, 41);
198 tab0.setCompoundDrawables(null,top,null,null);
199
200 top = tab0.getResources().getDrawable(R.drawable.tab_contacts_state);
201 top.setBounds(0, 0, 48, 41);
202 tab1.setCompoundDrawables(null,top,null,null);
203
204 top = tab0.getResources().getDrawable(R.drawable.tab_discovery_state);
205 top.setBounds(0,0,48,41);
206 tab2.setCompoundDrawables(null,top,null,null);
207
208 top = tab0.getResources().getDrawable(R.drawable.tab_personal_state);
209 top.setBounds(0,0,48,41);
210 tab3.setCompoundDrawables(null,top,null,null);
211
212
213 tab0.setOnClickListener(clickListener);
214 tab1.setOnClickListener(clickListener);
215 tab2.setOnClickListener(clickListener);
216 tab3.setOnClickListener(clickListener);
217 }
218
219 //下面是tab栏及它的事件
220 LinearLayout tabWidget;
221 TextView tab1,tab2,tab3,tab0;
222
223 //tab 栏事件
224 View.OnClickListener clickListener = new View.OnClickListener() {
225
226 @Override
227 public void onClick(View v) {
228 switch (v.getId()) {
229 case R.id.tab0:
230 pager.setCurrentItem(0, false);
231 break;
232 case R.id.tab1:
233 pager.setCurrentItem(1, false);
234 break;
235 case R.id.tab2:
236 pager.setCurrentItem(2, false);
237 break;
238 case R.id.tab3:
239 pager.setCurrentItem(3, false);
240 break;
241 }
242 }
243 };
244
245 }
2.2 TabViewPagerAdapter.java
1 import android.support.v4.app.Fragment;
2 import android.support.v4.app.FragmentManager;
3 import android.support.v4.app.FragmentPagerAdapter;
4
5 public class TabViewPagerAdapter extends FragmentPagerAdapter{
6
7
8 SessionTab sessionTab;
9 ContactsTab contactsTab;
10 DiscoveryTab discoveryTab;
11 PersonalTab personalTab;
12 public TabViewPagerAdapter(FragmentManager fm) {
13 super(fm);
14 }
15
16 @Override
17 public Fragment getItem(int position) {
18
19 switch (position){
20 case 0:if (sessionTab == null) sessionTab = new SessionTab(); return sessionTab;
21 case 1:if (contactsTab == null) contactsTab = new ContactsTab(); return contactsTab;
22 case 2:if (discoveryTab == null) discoveryTab = new DiscoveryTab(); return discoveryTab;
23 case 3:if (personalTab == null) personalTab = new PersonalTab(); return personalTab;
24 }
25 return null;
26 }
27
28 @Override
29 public int getCount() {
30 return 4;
31 }
32 }
2.4 SessionTab.java
1 import android.os.Bundle;
2 import android.support.v4.app.Fragment;
3 import android.view.LayoutInflater;
4 import android.view.View;
5 import android.view.ViewGroup;
6 import android.widget.ArrayAdapter;
7 import android.widget.ListView;
8
9 import com.txw.e.viewpager.R;
10
11 import java.util.ArrayList;
12
13 public class SessionTab extends Fragment {
14
15 ListView listView;
16 ArrayAdapter<String> adapter;
17 ArrayList<String> items;
18
19
20 void init(){
21 items = new ArrayList<>();
22 for (int i = 0; i < 50 ; ++i){
23 items.add("session " + i);
24 }
25 adapter = new ArrayAdapter<>(listView.getContext(),android.R.layout.simple_list_item_1,android.R.id.text1,items);
26
27 listView.setAdapter(adapter);
28 }
29
30 @Override
31 public View onCreateView(LayoutInflater inflater, ViewGroup container,
32 Bundle savedInstanceState) {
33 // Inflate the layout for this fragment
34
35 View v = inflater.inflate(R.layout.fragment_session_tab, container, false);
36 listView = (ListView) v.findViewById(R.id.session_list);
37
38 init();
39
40 return v;
41 }
42
43 }
2.5 ContactsTab.java
1 import android.os.Bundle;
2 import android.support.v4.app.Fragment;
3 import android.view.LayoutInflater;
4 import android.view.View;
5 import android.view.ViewGroup;
6 import android.widget.ArrayAdapter;
7 import android.widget.ListView;
8
9 import com.txw.e.viewpager.R;
10
11 import java.util.ArrayList;
12
13 public class ContactsTab extends Fragment {
14
15 ListView listView;
16 ArrayAdapter<String> adapter;
17 ArrayList<String> items;
18
19
20
21 void init(){
22 items = new ArrayList<>();
23 for (int i = 0; i < 50 ; ++i){
24 items.add("contact " + i);
25 }
26 adapter = new ArrayAdapter<>(listView.getContext(),android.R.layout.simple_list_item_1,android.R.id.text1,items);
27
28 listView.setAdapter(adapter);
29 }
30
31 @Override
32 public View onCreateView(LayoutInflater inflater, ViewGroup container,
33 Bundle savedInstanceState) {
34 // Inflate the layout for this fragment
35
36 View v = inflater.inflate(R.layout.fragment_contacts_tab, container, false);
37 listView = (ListView) v.findViewById(R.id.contact_list);
38
39 init();
40
41 return v;
42 }
43
44 }
2.6 DiscoveryTab.java
1 import android.os.Bundle;
2 import android.support.v4.app.Fragment;
3 import android.view.LayoutInflater;
4 import android.view.View;
5 import android.view.ViewGroup;
6
7 import com.txw.e.viewpager.R;
8
9 public class DiscoveryTab extends Fragment {
10
11
12 @Override
13 public View onCreateView(LayoutInflater inflater, ViewGroup container,
14 Bundle savedInstanceState) {
15 // Inflate the layout for this fragment
16 return inflater.inflate(R.layout.fragment_discovery_tab, container, false);
17 }
18
19 }
2.7 PersonalTab.java
1 import android.os.Bundle;
2 import android.support.v4.app.Fragment;
3 import android.view.LayoutInflater;
4 import android.view.View;
5 import android.view.ViewGroup;
6
7 import com.txw.e.viewpager.R;
8
9 public class PersonalTab extends Fragment {
10
11
12 public PersonalTab() {
13 // Required empty public constructor
14 }
15
16
17 @Override
18 public View onCreateView(LayoutInflater inflater, ViewGroup container,
19 Bundle savedInstanceState) {
20 // Inflate the layout for this fragment
21 return inflater.inflate(R.layout.fragment_personal_tab, container, false);
22 }
23
24 }
3.xml
3.1 fragment_tab_pager_main.xml
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout
3 xmlns:android="http://schemas.android.com/apk/res/android"
4 android:layout_width="match_parent"
5 android:layout_height="match_parent"
6 android:background="#FFFFFF"
7 android:orientation="vertical"
8 android:id="@+id/pager_layout"
9 >
10
11 <android.support.v4.view.ViewPager
12 android:id="@+id/tab_view_pager"
13 android:layout_width="match_parent"
14 android:layout_height="0dp"
15 android:layout_weight="1"/>
16
17 <LinearLayout
18 android:id="@+id/tab_widget"
19 android:layout_gravity="bottom"
20 android:orientation="horizontal"
21 android:background="#d1d1d1"
22 android:padding="3dp"
23 android:layout_width="match_parent"
24 android:layout_height="wrap_content">
25
26 <TextView
27 android:layout_width="wrap_content"
28 android:layout_height="match_parent"
29 android:text="微信"
30 android:layout_weight="1"
31 android:layout_gravity="center_vertical"
32 android:gravity="center_horizontal|center_vertical"
33 android:id="@+id/tab0"/>
34 <TextView
35 android:layout_width="wrap_content"
36 android:layout_height="match_parent"
37 android:layout_weight="1"
38 android:text="联系人"
39 android:layout_gravity="center_vertical"
40 android:gravity="center_horizontal|center_vertical"
41 android:id="@+id/tab1"/>
42 <TextView
43 android:layout_width="wrap_content"
44 android:layout_height="match_parent"
45 android:text="发现"
46 android:layout_weight="1"
47 android:layout_gravity="center_vertical"
48 android:gravity="center_horizontal|center_vertical"
49 android:id="@+id/tab2"/>
50 <TextView
51 android:layout_width="wrap_content"
52 android:layout_height="match_parent"
53 android:text="我"
54 android:layout_weight="1"
55 android:layout_gravity="center_vertical"
56 android:gravity="center_horizontal|center_vertical"
57 android:id="@+id/tab3"/>
58
59 </LinearLayout>
60
61 </LinearLayout>
3.2 fragment_session_tab.xml
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 xmlns:tools="http://schemas.android.com/tools"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:orientation="vertical"
6 tools:context=".TabViewPager.SessionTab"
7 android:background="#FFFFFF">
8 <TextView
9 android:layout_width="match_parent"
10 android:layout_height="wrap_content"
11 android:gravity="center_vertical|center_horizontal"
12 android:text="session"/>
13 <ListView
14 android:id="@+id/session_list"
15 android:layout_width="match_parent"
16 android:layout_height="match_parent"/>
17
18 </LinearLayout>
3.3 fragment_contacts_tab.xml
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 xmlns:tools="http://schemas.android.com/tools"
3 android:layout_width="match_parent"
4 android:orientation="vertical"
5 android:layout_height="match_parent" android:background="#FFFFFF"
6 tools:context="com.txw.e.viewpager.TabViewPager.ContactsTab">
7
8 <TextView
9 android:layout_width="match_parent"
10 android:layout_height="wrap_content"
11 android:gravity="center_vertical|center_horizontal"
12 android:text="contacts"/>
13 <ListView
14 android:id="@+id/contact_list"
15 android:layout_width="match_parent"
16 android:layout_height="match_parent"/>
17
18 </LinearLayout>
3.4 fragment_discovery_tab.xml
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 xmlns:tools="http://schemas.android.com/tools"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:orientation="vertical"
6 android:background="#FFFFFF"
7 tools:context="com.txw.e.viewpager.TabViewPager.DiscoveryTab">
8
9
10 <TextView
11 android:layout_width="match_parent"
12 android:layout_height="wrap_content"
13 android:gravity="center_horizontal|center_vertical"
14 android:text="discovery"/>
15
16 <AnalogClock
17 android:layout_width="wrap_content"
18 android:layout_height="match_parent"
19 android:id="@+id/analogClock"
20 android:layout_gravity="center_horizontal|center_vertical"/>
21
22 <Chronometer
23 android:layout_width="wrap_content"
24 android:layout_height="wrap_content"
25 android:id="@+id/chronometer"
26 android:layout_gravity="center_horizontal"/>
27
28
29 </LinearLayout>
3.5 fragment_personal_tab.xml
1 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
2 xmlns:tools="http://schemas.android.com/tools"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:background="#FFFFFF"
6 >
7
8 <LinearLayout
9
10 android:layout_width="match_parent"
11 android:layout_height="wrap_content"
12 android:orientation="vertical"
13 tools:context="com.txw.e.viewpager.TabViewPager.PersonalTab">
14
15 <!-- TODO: Update blank fragment layout -->
16
17 <TextView
18 android:layout_width="match_parent"
19 android:layout_height="wrap_content"
20 android:gravity="center_vertical|center_horizontal"
21 android:text="personal"/>
22
23 <DatePicker
24 android:layout_width="match_parent"
25 android:layout_height="match_parent"
26 android:id="@+id/datePicker"/>
27
28
29 </LinearLayout>
30 </ScrollView>
