標簽欄主界面實現（四）

ViewPager + Fragment + TabPageIndicator 實現標簽欄主界面。

效果圖：

1、頭部的布局文件，這個很簡單：

2.  
3. android:layout_height="wrap_content"
4. android:background="@color/light_blue"
5. android:orientation="horizontal">
6.  
7.  
8. android:layout_width="wrap_content"
9. android:layout_height="wrap_content"
10. android:layout_gravity="center_vertical"
11. android:layout_marginLeft="8dp"
12. android:layout_marginRight="4dp"
13. android:src="@drawable/biz_navigation_tab_news_pressed"/>
14.  
15.  
16. android:layout_width="wrap_content"
17. android:layout_height="wrap_content"
18. android:layout_gravity="center_vertical"
19. android:layout_marginLeft="4dp"
20. android:layout_marginRight="4dp"
21. android:src="@drawable/base_action_bar_back_divider"/>
22.  
23.  
24. android:id="@+id/headTV"
25. android:layout_width="0dp"
26. android:layout_height="wrap_content"
27. android:layout_gravity="center_vertical"
28. android:layout_marginLeft="4dp"
29. android:layout_weight="1"
30. android:text="CSDN資訊"
31. android:textColor="@color/white"
32. android:textSize="21sp"
33. android:textStyle="bold">
34.  
35.  
36.  
37.  
38.  

顯示一個圖標和標題。

 

2、主布局文件：

1.  
2. android:layout_width="match_parent"
3. android:layout_height="match_parent"
4. android:background="#eee"
5. android:orientation="vertical">
6.  
7.  
8.  
9.  
10.  
11. android:id="@+id/id_indicator"
12. android:layout_width="fill_parent"
13. android:layout_height="wrap_content"
14. android:background="@color/transparentblue">
15.  
16.  
17.  
18. android:id="@+id/id_pager"
19. android:layout_width="fill_parent"
20. android:layout_height="0dp"
21. android:layout_weight="1"/>
22.  
23.  

一個TabPageIndicator和一個ViewPager。

3、主Activity

1. packagecom.zhy.csdndemo;
2.  
3.  
4. importcom.viewpagerindicator.TabPageIndicator;
5.  
6.  
7. importandroid.os.Bundle;
8. importandroid.support.v4.app.FragmentActivity;
9. importandroid.support.v4.app.FragmentPagerAdapter;
10. importandroid.support.v4.view.ViewPager;
11.  
12.  
13. publicclassMainActivityextendsFragmentActivity
14. {
15. privateTabPageIndicatormIndicator;
16. privateViewPagermViewPager;
17. privateFragmentPagerAdaptermAdapter;
18.  
19.  
20. @Override
21. protectedvoidonCreate(BundlesavedInstanceState)
22. {
23. super.onCreate(savedInstanceState);
24. setContentView(R.layout.activity_main);
25.  
26. mIndicator=(TabPageIndicator)findViewById(R.id.id_indicator);
27. mViewPager=(ViewPager)findViewById(R.id.id_pager);
28. mAdapter=newTabAdapter(getSupportFragmentManager());
29. mViewPager.setAdapter(mAdapter);
30. mIndicator.setViewPager(mViewPager,0);
31.  
32.  
33.  
34. }
35.  
36. }

TabAdapter.java

1. packagecom.zhy.csdndemo;
2.  
3.  
4. importandroid.support.v4.app.Fragment;
5. importandroid.support.v4.app.FragmentManager;
6. importandroid.support.v4.app.FragmentPagerAdapter;
7.  
8.  
9. publicclassTabAdapterextendsFragmentPagerAdapter
10. {
11.  
12.  
13. publicstaticfinalString[]TITLES=newString[]{"業界","移動","研發","程序員雜志","雲計算"};
14.  
15.  
16. publicTabAdapter(FragmentManagerfm)
17. {
18. super(fm);
19. }
20.  
21.  
22. @Override
23. publicFragmentgetItem(intarg0)
24. {
25. MainFragmentfragment=newMainFragment(arg0);
26. returnfragment;
27. }
28.  
29.  
30. @Override
31. publicCharSequencegetPageTitle(intposition)
32. {
33. returnTITLES[position%TITLES.length];
34. }
35.  
36.  
37. @Override
38. publicintgetCount()
39. {
40. returnTITLES.length;
41. }
42.  
43. }

MainFragment.java

1. packagecom.zhy.csdndemo;
2.  
3.  
4. importandroid.annotation.SuppressLint;
5. importandroid.os.Bundle;
6. importandroid.support.v4.app.Fragment;
7. importandroid.view.LayoutInflater;
8. importandroid.view.View;
9. importandroid.view.ViewGroup;
10. importandroid.widget.TextView;
11.  
12.  
13. @SuppressLint("ValidFragment")
14. publicclassMainFragmentextendsFragment
15. {
16.  
17.  
18. privateintnewsType=0;
19.  
20.  
21. publicMainFragment(intnewsType)
22. {
23. this.newsType=newsType;
24. }
25.  
26.  
27. @Override
28. publicvoidonActivityCreated(BundlesavedInstanceState)
29. {
30. super.onActivityCreated(savedInstanceState);
31. }
32.  
33.  
34. @Override
35. publicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,BundlesavedInstanceState)
36. {
37. Viewview=inflater.inflate(R.layout.tab_item_fragment_main,null);
38. TextViewtip=(TextView)view.findViewById(R.id.id_tip);
39. tip.setText(TabAdapter.TITLES[newsType]);
40. returnview;
41. }
42.  
43.  
44. }

4、在styles.xml中自定義Theme

1.  
2. @style/MyWidget.TabPageIndicator
3. @drawable/init_pic
4. true
5. 5000
6. @null
7.  
8.  
9.  
10. center
11. @drawable/vpi__tab_indicator
12. 22dip
13. 22dip
14. 8dp
15. 8dp
16. @style/MyTextAppearance.TabPageIndicator
17. 16sp
18. 1
19.  
20.  
21.  
22.  
23. bold
24. @color/black
25.  

在AndroidManifest中注冊使用：

2.  
3. android:versionCode="1"
4. android:versionName="1.0">
5.  
6.  
7. android:minSdkVersion="13"
8. android:targetSdkVersion="17"/>
9.  
10.  
11. android:allowBackup="true"
12. android:icon="@drawable/ic_launcher"
13. android:label="@string/app_name"
14. android:theme="@style/AppTheme">
15. android:name="com.zhy.csdndemo.MainActivity"
16. android:label="@string/app_name"
17. android:theme="@style/MyTheme">
19.  
20.  
21.  
22.  
23.  
24.  
25.  
26.  
27.  
28.