使用Fragments取代tabActivity开发网易新闻客户端框架

前记：手头一直有一个网易新闻客户端的框架（只是一个空架子），基本在上面进行修改，就可以作出自己的东西。里面的主框架是使用TabActivity和TabHost。

近日打开项目发现，TabActivity已然被谷歌取消了，虽然可以继续用，但是谷歌取消它自有取消它的理由。去Doc中一看，TabActivity建议用Fragment代替。于是开始研究这个Fragment使用，一看才知道，这个Fragment是个好东西。具体怎么用可以参照这个帖子：http://www.eoeandroid.com/thread-71642-1-1.html  讲的很好，所以我就不怎么重复了。这里着重讲一下使用Fragments取代tabActivity开发网易新闻客户端框架。这是截图：

原版的源代码下载：http://download.youkuaiyun.com/detail/w553000664/4491229 （注意这个是使用TabHost+TabActivity实现的，不推荐，但是可以作为一个学习的案例）

下面主要讲解如何使用Fragment来实现上述框架

1.分析一下底部使用TabHost来实现没有问题，在原来的项目中，TabHost来管理5个Activity，在这5个Activity中进行切换，来显示不同的功能。所以上面的界面是由每个Activity来提供的。现在改用Fragment后，TabHost切换的不再是Activity，而是Fragment中的内容。所以可以这样布局主Activity：

activity_main.xml：

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     style="@style/layout_full"  
4.     android:orientation="vertical" >  
5.   
6.     <TabHost  
7.         android:id="@+id/tabhost"  
8.         style="@style/layout_full" >  
9.   
10.         <LinearLayout  
11.             android:layout_width="match_parent"  
12.             android:layout_height="match_parent"  
13.             android:orientation="vertical" >  
14.   
15.             <FrameLayout  
16.                 android:id="@android:id/tabcontent"  
17.                 android:layout_width="fill_parent"  
18.                 android:layout_height="0.0dip"  
19.                 android:layout_weight="1.0" >  
20.   
21.                 <LinearLayout  
22.                     android:id="@+id/linearlayout"  
23.                     style="@style/layout_full"  
24.                     android:orientation="vertical" >  
25.   
26.                     <fragment  
27.                         android:id="@+id/content_fragment_top"  
28.                         android:name="fragment_content.TopBarFragment"  
29.                         style="@style/layout_vertical"  
30.                         android:layout_weight="1" />  
31.   
32.                     <fragment  
33.                         android:id="@+id/content_fragment"  
34.                         android:name="fragment_content.Contentfragment"  
35.                         style="@style/layout_vertical"  
36.                         android:layout_weight="8" />  
37.                 </LinearLayout>  
38.             </FrameLayout>  
39.   
40.             <TabWidget  
41.                 android:id="@android:id/tabs"  
42.                 android:layout_width="fill_parent"  
43.                 android:layout_height="wrap_content"  
44.                 android:visibility="gone" />  
45.   
46.             <FrameLayout  
47.                 android:id="@android:id/tabcontent"  
48.                 style="@style/layout_vertical"  
49.                 android:layout_height="wrap_content" >  
50.   
51.                 <RelativeLayout  
52.                     android:id="@+id/layout_bottom"  
53.                     android:layout_width="fill_parent"  
54.                     android:layout_height="wrap_content" >  
55.   
56.                     <RadioGroup  
57.                         android:id="@+id/radiogroup"  
58.                         android:layout_width="fill_parent"  
59.                         android:layout_height="wrap_content"  
60.                         android:layout_gravity="bottom"  
61.                         android:background="@drawable/bottombg"  
62.                         android:gravity="center_vertical"  
63.                         android:orientation="horizontal" >  
64.   
65.                         <RadioButton  
66.                             android:id="@+id/radio_news"  
67.                             android:layout_width="wrap_content"  
68.                             android:background="@drawable/tab_selector_news"  
69.                             android:button="@null"  
70.                             android:checked="true" />  
71.   
72.                         <RadioButton  
73.                             android:id="@+id/radio_topic"  
74.                             android:layout_width="wrap_content"  
75.                             android:background="@drawable/tab_selector_topic"  
76.                             android:button="@null" />  
77.   
78.                         <RadioButton  
79.                             android:id="@+id/radio_pic"  
80.                             android:layout_width="wrap_content"  
81.                             android:background="@drawable/tab_selector_pic"  
82.                             android:button="@null" />  
83.   
84.                         <RadioButton  
85.                             android:id="@+id/radio_follow"  
86.                             android:layout_width="wrap_content"  
87.                             android:background="@drawable/tab_selector_follow"  
88.                             android:button="@null" />  
89.   
90.                         <RadioButton  
91.                             android:id="@+id/radio_vote"  
92.                             android:layout_width="wrap_content"  
93.                             android:background="@drawable/tab_selector_vote"  
94.                             android:button="@null" />  
95.                     </RadioGroup>  
96.                 </RelativeLayout>  
97.             </FrameLayout>  
98.         </LinearLayout>  
99.     </TabHost>  
100.   
101. </LinearLayout>  

可以看到布局中使用了两个Fragment，上面一个Fragment来显示标题，下面的Fragment来显示内容：

下面是两个Fragment的布局：很简单：

fragment_content.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/layout_content"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="40dip"  
6.     android:background="#990000" >  
7.   
8.     <ImageView  
9.         android:id="@+id/img_netease_top"  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="wrap_content"  
12.         android:layout_centerVertical="true"  
13.         android:layout_marginLeft="10dip"  
14.         android:src="@drawable/netease_top" />  
15.   
16.     <TextView  
17.         android:id="@+id/fragment_context_context"  
18.         android:layout_width="wrap_content"  
19.         android:layout_height="wrap_content"  
20.         android:layout_centerVertical="true"  
21.         android:layout_toRightOf="@+id/img_netease_top"  
22.         android:text="@string/picture_top_left_text"  
23.         android:textColor="@android:color/white"  
24.         android:textSize="20sp" />  
25.   
26. </RelativeLayout>  

fragment_topbar.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/layout_top"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="40dip"  
6.     android:background="#999999" >  
7.   
8.     <ImageView  
9.         android:id="@+id/img_netease_top"  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="wrap_content"  
12.         android:layout_centerVertical="true"  
13.         android:layout_marginLeft="10dip"  
14.         android:src="@drawable/netease_top" />  
15.   
16.     <TextView  
17.         android:id="@+id/fragment_topbar_topic"  
18.         android:layout_width="wrap_content"  
19.         android:layout_height="wrap_content"  
20.         android:layout_centerVertical="true"  
21.         android:layout_toRightOf="@+id/img_netease_top"  
22.         android:text="@string/picture_top_left_text"  
23.         android:textColor="@android:color/white"  
24.         android:textSize="20sp" />  
25.   
26. </RelativeLayout>  

下面来看主Activity：

MainActivity.java

[java]  view plain copy

1. package com.gracker.tabfragment;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.view.Menu;  
6. import android.widget.ImageView;  
7. import android.widget.RadioGroup;  
8. import android.widget.RadioGroup.OnCheckedChangeListener;  
9. import android.widget.RelativeLayout;  
10. import android.widget.TabHost;  
11.   
12. import com.and.netease.utils.MoveBg;  
13.   
14. import fragment_content.Contentfragment;  
15. import fragment_content.TopBarFragment;  
16.   
17. public class MainActivity extends Activity {  
18.   
19.     RadioGroup radioGroup;  
20.     ImageView img;  
21.     TabHost tabHost;  
22.     int startLeft;  
23.     RelativeLayout bottom_layout;  
24.   
25.     @Override  
26.     public void onCreate(Bundle savedInstanceState) {  
27.         super.onCreate(savedInstanceState);  
28.         setContentView(R.layout.activity_main);  
29.   
30.         tabHost = (TabHost) findViewById(R.id.tabhost);  
31.         bottom_layout = (RelativeLayout) findViewById(R.id.layout_bottom);  
32.   
33.         radioGroup = (RadioGroup) findViewById(R.id.radiogroup);  
34.         radioGroup.setOnCheckedChangeListener(checkedChangeListener);  
35.   
36.         img = new ImageView(this);  
37.         img.setImageResource(R.drawable.tab_front_bg);  
38.         bottom_layout.addView(img);  
39.     }  
40.   
41.     @Override  
42.     public boolean onCreateOptionsMenu(Menu menu) {  
43.         getMenuInflater().inflate(R.menu.activity_main, menu);  
44.         return true;  
45.     }  
46.   
47.     // 当Tab发生变化时，改变tab的标签的显示图片  
48.     private OnCheckedChangeListener checkedChangeListener = new OnCheckedChangeListener() {  
49.   
50.         @Override  
51.         public void onCheckedChanged(RadioGroup group, int checkedId) {  
52.             Contentfragment fragment = (Contentfragment) getFragmentManager()  
53.                     .findFragmentById(R.id.content_fragment);  
54.             TopBarFragment fragmentTopic = (TopBarFragment) getFragmentManager()  
55.                     .findFragmentById(R.id.content_fragment_top);  
56.   
57.             switch (checkedId) {  
58.   
59.             case R.id.radio_news:  
60.                 fragment.changeContent(0);  
61.                 fragmentTopic.changeContent(0);  
62.   
63.                 tabHost.setCurrentTabByTag("news");  
64.                 MoveBg.moveFrontBg(img, startLeft, 0, 0, 0);  
65.                 startLeft = 0;  
66.                 break;  
67.             case R.id.radio_topic:  
68.                 fragment.changeContent(1);  
69.                 fragmentTopic.changeContent(1);  
70.                   
71.                 tabHost.setCurrentTabByTag("topic");  
72.                 MoveBg.moveFrontBg(img, startLeft, img.getWidth(), 0, 0);  
73.                 startLeft = img.getWidth();  
74.                 break;  
75.             case R.id.radio_pic:  
76.                 fragment.changeContent(2);  
77.                 fragmentTopic.changeContent(2);  
78.                   
79.                 tabHost.setCurrentTabByTag("picture");  
80.                 MoveBg.moveFrontBg(img, startLeft, img.getWidth() * 2, 0, 0);  
81.                 startLeft = img.getWidth() * 2;  
82.                 break;  
83.             case R.id.radio_follow:  
84.                 fragment.changeContent(3);  
85.                 fragmentTopic.changeContent(3);  
86.                   
87.                 tabHost.setCurrentTabByTag("follow");  
88.                 MoveBg.moveFrontBg(img, startLeft, img.getWidth() * 3, 0, 0);  
89.                 startLeft = img.getWidth() * 3;  
90.                 break;  
91.             case R.id.radio_vote:  
92.                 fragment.changeContent(4);  
93.                 fragmentTopic.changeContent(4);  
94.                   
95.                 tabHost.setCurrentTabByTag("vote");  
96.                 MoveBg.moveFrontBg(img, startLeft, img.getWidth() * 4, 0, 0);  
97.                 startLeft = img.getWidth() * 4;  
98.                 break;  
99.   
100.             default:  
101.                 break;  
102.             }  
103.         }  
104.     };  
105. }  

核心就在check监听器中，这里获取两个Fragment的实例，并修改其中的内容。

下面是两个Fragment的代码：

Contentfragment.java

[java]  view plain copy

1. package fragment_content;  
2.   
3. import android.app.Fragment;  
4. import android.os.Bundle;  
5. import android.util.Log;  
6. import android.view.LayoutInflater;  
7. import android.view.View;  
8. import android.view.ViewGroup;  
9. import android.widget.TextView;  
10.   
11. import com.gracker.tabfragment.R;  
12.   
13. public class Contentfragment extends Fragment {  
14.   
15.     TextView mTextView; // 显示的内容  
16.   
17.     @Override  
18.     public void onCreate(Bundle savedInstanceState) {  
19.         // TODO Auto-generated method stub  
20.         Log.v("Contentfragment", "Contentfragment_onCreate");  
21.         super.onCreate(savedInstanceState);  
22.     }  
23.   
24.     @Override  
25.     public void onDestroy() {  
26.         // TODO Auto-generated method stub  
27.         super.onDestroy();  
28.     }  
29.   
30.     @Override  
31.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
32.             Bundle savedInstanceState) {  
33.         Log.v("Contentfragment", "Contentfragment_onCreateView");  
34.         // super.onCreateView(inflater, container, savedInstanceState);  
35.         // Inflate the layout for this fragment  
36.         // TextView testText = (TextView)findViewById(R.id.item_detail);  
37.         return inflater.inflate(R.layout.fragment_content, container, false);  
38.     }  
39.   
40.     public void changeContent(int index) {  
41.         mTextView = (TextView) getActivity().findViewById(  
42.                 R.id.fragment_context_context);  
43.         switch (index) {  
44.         case 0:  
45.   
46.             mTextView.setText("1");  
47.             break;  
48.         case 1:  
49.   
50.             mTextView.setText("2");  
51.             break;  
52.         case 2:  
53.   
54.             mTextView.setText("3");  
55.             break;  
56.         case 3:  
57.   
58.             mTextView.setText("4");  
59.             break;  
60.         case 4:  
61.   
62.             mTextView.setText("5");  
63.             break;  
64.         default:  
65.             break;  
66.         }  
67.     }  
68.   
69. }  

TopBarFragment.java：

[java]  view plain copy

1. package fragment_content;  
2.   
3. import com.gracker.tabfragment.R;  
4.   
5. import android.os.Bundle;  
6. import android.app.Fragment;  
7. import android.util.Log;  
8. import android.view.LayoutInflater;  
9. import android.view.View;  
10. import android.view.ViewGroup;  
11. import android.widget.TextView;  
12.   
13. public class TopBarFragment extends Fragment {  
14.     TextView mTextView;  
15.   
16.     @Override  
17.     public void onCreate(Bundle savedInstanceState) {  
18.         // TODO Auto-generated method stub  
19.         Log.v("Contentfragment", "Contentfragment_onCreate");  
20.         super.onCreate(savedInstanceState);  
21.     }  
22.   
23.     @Override  
24.     public void onDestroy() {  
25.         // TODO Auto-generated method stub  
26.         super.onDestroy();  
27.     }  
28.   
29.     @Override  
30.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
31.             Bundle savedInstanceState) {  
32.         Log.v("Contentfragment", "Contentfragment_onCreateView");  
33.         //super.onCreateView(inflater, container, savedInstanceState);  
34.         // Inflate the layout for this fragment  
35. //      TextView testText = (TextView)findViewById(R.id.item_detail);  
36.         return inflater.inflate(R.layout.fragment_topbar, container, false);  
37.     }  
38.       
39.     public void changeContent(int index) {  
40.         mTextView = (TextView) getActivity().findViewById(  
41.                 R.id.fragment_topbar_topic);  
42.         switch (index) {  
43.         case 0:  
44.   
45.             mTextView.setText("1");  
46.             break;  
47.         case 1:  
48.   
49.             mTextView.setText("2");  
50.             break;  
51.         case 2:  
52.   
53.             mTextView.setText("3");  
54.             break;  
55.         case 3:  
56.   
57.             mTextView.setText("4");  
58.             break;  
59.         case 4:  
60.   
61.             mTextView.setText("5");  
62.             break;  
63.         default:  
64.             break;  
65.         }  
66.     }  
67. }  

核心代码就这么多，其实里面还有很多小细节，比如Tabhost切换是，背景的滑动，selector的使用等。

这个例子只是讲解初级的Fragment的使用，Fragment的另一个好处就是屏幕适配，可以让程序在平板和手机上显示不同的效果，仔细研究一下也是很有好处的