标签栏主界面实现（四）

ViewPager + Fragment + TabPageIndicator  实现标签栏主界面。

效果图：

1、头部的布局文件，这个很简单：

[html]  view plain  copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="wrap_content"  
5.     android:background="@color/light_blue"  
6.     android:orientation="horizontal" >  
7.   
8.   
9.     <ImageView  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="wrap_content"  
12.         android:layout_gravity="center_vertical"  
13.         android:layout_marginLeft="8dp"  
14.         android:layout_marginRight="4dp"  
15.         android:src="@drawable/biz_navigation_tab_news_pressed" />  
16.   
17.   
18.     <ImageView  
19.         android:layout_width="wrap_content"  
20.         android:layout_height="wrap_content"  
21.         android:layout_gravity="center_vertical"  
22.         android:layout_marginLeft="4dp"  
23.         android:layout_marginRight="4dp"  
24.         android:src="@drawable/base_action_bar_back_divider" />  
25.   
26.   
27.     <TextView  
28.         android:id="@+id/headTV"  
29.         android:layout_width="0dp"  
30.         android:layout_height="wrap_content"  
31.         android:layout_gravity="center_vertical"  
32.         android:layout_marginLeft="4dp"  
33.         android:layout_weight="1"  
34.         android:text="CSDN资讯"  
35.         android:textColor="@color/white"  
36.         android:textSize="21sp"  
37.         android:textStyle="bold" >  
38.     </TextView>  
39.   
40.   
41.   
42.   
43. </LinearLayout>  

显示一个图标和标题。

2、主布局文件：

[html]  view plain  copy

 

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:background="#eee"  
6.     android:orientation="vertical" >  
7.   
8.   
9.     <include layout="@layout/main_head" />  
10.   
11.   
12.     <com.viewpagerindicator.TabPageIndicator  
13.         android:id="@+id/id_indicator"  
14.         android:layout_width="fill_parent"  
15.         android:layout_height="wrap_content"  
16.         android:background="@color/transparentblue" >  
17.     </com.viewpagerindicator.TabPageIndicator>  
18.   
19.   
20.     <android.support.v4.view.ViewPager  
21.         android:id="@+id/id_pager"  
22.         android:layout_width="fill_parent"  
23.         android:layout_height="0dp"  
24.         android:layout_weight="1" />  
25.   
26.   
27. </LinearLayout>  

一个TabPageIndicator和一个ViewPager。

3、主Activity

[java]  view plain  copy

 

1. package com.zhy.csdndemo;  
2.   
3.   
4. import com.viewpagerindicator.TabPageIndicator;  
5.   
6.   
7. import android.os.Bundle;  
8. import android.support.v4.app.FragmentActivity;  
9. import android.support.v4.app.FragmentPagerAdapter;  
10. import android.support.v4.view.ViewPager;  
11.   
12.   
13. public class MainActivity extends FragmentActivity  
14. {  
15.     private TabPageIndicator mIndicator ;  
16.     private ViewPager mViewPager ;  
17.     private FragmentPagerAdapter mAdapter ;  
18.   
19.   
20.     @Override  
21.     protected void onCreate(Bundle savedInstanceState)  
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 = new TabAdapter(getSupportFragmentManager());  
29.         mViewPager.setAdapter(mAdapter);  
30.         mIndicator.setViewPager(mViewPager, 0);  
31.           
32.           
33.           
34.     }  
35.        
36. }  

TabAdapter.java

[java]  view plain  copy

 

1. package com.zhy.csdndemo;  
2.   
3.   
4. import android.support.v4.app.Fragment;  
5. import android.support.v4.app.FragmentManager;  
6. import android.support.v4.app.FragmentPagerAdapter;  
7.   
8.   
9. public class TabAdapter extends FragmentPagerAdapter  
10. {  
11.   
12.   
13.     public static final String[] TITLES = new String[] { "业界", "移动", "研发", "程序员杂志", "云计算" };  
14.   
15.   
16.     public TabAdapter(FragmentManager fm)  
17.     {  
18.         super(fm);  
19.     }  
20.   
21.   
22.     @Override  
23.     public Fragment getItem(int arg0)  
24.     {  
25.         MainFragment fragment = new MainFragment(arg0);  
26.         return fragment;  
27.     }  
28.   
29.   
30.     @Override  
31.     public CharSequence getPageTitle(int position)  
32.     {  
33.         return TITLES[position % TITLES.length];  
34.     }  
35.   
36.   
37.     @Override  
38.     public int getCount()  
39.     {  
40.         return TITLES.length;  
41.     }  
42.   
43. }  

MainFragment.java

[java]  view plain  copy

 

1. package com.zhy.csdndemo;  
2.   
3.   
4. import android.annotation.SuppressLint;  
5. import android.os.Bundle;  
6. import android.support.v4.app.Fragment;  
7. import android.view.LayoutInflater;  
8. import android.view.View;  
9. import android.view.ViewGroup;  
10. import android.widget.TextView;  
11.   
12.   
13. @SuppressLint("ValidFragment")  
14. public class MainFragment extends Fragment  
15. {  
16.   
17.   
18.     private int newsType = 0;  
19.   
20.   
21.     public MainFragment(int newsType)  
22.     {  
23.         this.newsType = newsType;  
24.     }  
25.   
26.   
27.     @Override  
28.     public void onActivityCreated(Bundle savedInstanceState)  
29.     {  
30.         super.onActivityCreated(savedInstanceState);  
31.     }  
32.   
33.   
34.     @Override  
35.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  
36.     {  
37.         View view = inflater.inflate(R.layout.tab_item_fragment_main, null);  
38.         TextView tip = (TextView) view.findViewById(R.id.id_tip);  
39.         tip.setText(TabAdapter.TITLES[newsType]);  
40.         return view;  
41.     }  
42.   
43.   
44. }  

4、在styles.xml中自定义Theme

[html]  view plain  copy

 

1. <style name="MyTheme" parent="AppBaseTheme">  
2.         <item name="vpiTabPageIndicatorStyle">@style/MyWidget.TabPageIndicator</item>  
3.         <item name="android:windowBackground">@drawable/init_pic</item>  
4.         <item name="android:windowNoTitle">true</item>    
5.         <item name="android:animationDuration">5000</item>  
6.         <item name="android:windowContentOverlay">@null</item>    
7.     </style>  
8.       
9.     <style name="MyWidget.TabPageIndicator" parent="Widget">  
10.         <item name="android:gravity">center</item>  
11.         <item name="android:background">@drawable/vpi__tab_indicator</item>  
12.         <item name="android:paddingLeft">22dip</item>  
13.         <item name="android:paddingRight">22dip</item>  
14.         <item name="android:paddingTop">8dp</item>  
15.         <item name="android:paddingBottom">8dp</item>  
16.         <item name="android:textAppearance">@style/MyTextAppearance.TabPageIndicator</item>  
17.         <item name="android:textSize">16sp</item>  
18.         <item name="android:maxLines">1</item>  
19.     </style>  
20.   
21.   
22.     <style name="MyTextAppearance.TabPageIndicator" parent="Widget">  
23.         <item name="android:textStyle">bold</item>  
24.         <item name="android:textColor">@color/black</item>  
25.     </style>  

在AndroidManifest中注册使用：

[html]  view plain  copy

 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
3.     package="com.zhy.csdndemo"  
4.     android:versionCode="1"  
5.     android:versionName="1.0" >  
6.   
7.   
8.     <uses-sdk  
9.         android:minSdkVersion="13"  
10.         android:targetSdkVersion="17" />  
11.   
12.   
13.     <application  
14.         android:allowBackup="true"  
15.         android:icon="@drawable/ic_launcher"  
16.         android:label="@string/app_name"  
17.         android:theme="@style/AppTheme" >  
18.         <activity  
19.             android:name="com.zhy.csdndemo.MainActivity"  
20.             android:label="@string/app_name"   
21.             android:theme="@style/MyTheme">  
22.             <intent-filter>  
23.                 <action android:name="android.intent.action.MAIN" />  
24.   
25.   
26.                 <category android:name="android.intent.category.LAUNCHER" />  
27.             </intent-filter>  
28.         </activity>  
29.     </application>  
30.   
31.   
32. </manifest>