使用Fragment實現Tab效果

      在上一篇中，咱們將了使用ViewPager實現Tab效果。若是沒有閱讀過，能夠點擊下面的地址：

http://www.cnblogs.com/fuly550871915/p/4849893.html

 

       在這一篇中咱們講一下使用Fragment實現Tab效果，而這種實現方式也是推薦的方式。與用ViewPager實現的效果有一點不一樣。

 

1、效果展現

 

以下圖：

 

                                 

 

 

        使用Fragment不支持手指左右滑動，只支持底部按鈕的點擊來切換。它的中間再也不是一個ViewPager佈局了，而是一個用來存放Fragment的FrameLayout的佈局。其頂部佈局和底部佈局沒有什麼變化。下面咱們來看具體的代碼吧。

 

2、資源準備

      圖片資源仍然是咱們在上一篇文章中準備好的。直接複製到res下的drawable文件夾下就好。

 

 3、具體代碼

 

（1）佈局搭建

       頂部佈局和底部佈局以及幾個Tab佈局都沒有變化，咱們直接複製便可。只是把主佈局中間的換成FrameLayout而已。主佈局代碼以下：

 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     >
 7     
 8     <include layout="@layout/top"/>
 9 
10     <FrameLayout 
11         android:id="@+id/lay_frame"
12         android:layout_width="match_parent"
13         android:layout_height="0dp"
14         android:layout_weight="1"></FrameLayout>
15     
16     <include layout="@layout/bottum"/>"
17 
18 
19 
20 </LinearLayout>

 

（2）構建每個fragment類

 

       下面咱們就要把每個Tab變成一個Fragment。新建類Hfragment繼承自Fragment。以下：

 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 public class HFragment extends Fragment{
 8     
 9 
10     public View onCreateView(LayoutInflater inflater, ViewGroup container,
11             Bundle savedInstanceState) {
12     
13         return inflater.inflate(R.layout.tab01,container,false);
14     }
15 }

 

       同理咱們還要新建類Sfragment,Ufragment,Yfragment。它們都是繼承自Fragment。只不過中間渲染的佈局分別爲Tab02,Tab03,Tab04.這樣咱們的fagment就完成了。

 

 

      注意：繼承的類Fragment必定導入android.support.v4.app.Fragment;這個包，而不能是其餘包下的。

 

（3）在MainActivity裏就能夠實現Tab了。

 

       在MainActivty中，實現Tab主要的技術就是利用FragmentTransaction，開啓一個事務。在這個事務中，將咱們的fragment加入進來，並嵌套在中間的佈局FrameLayout上。而後經過事務控制隱藏和顯示每個fragment來達到切換的目的。具體代碼以下：

  1 import android.os.Bundle;
  2 import android.app.Activity;
  3 import android.support.v4.app.Fragment;
  4 import android.support.v4.app.FragmentActivity;
  5 import android.support.v4.app.FragmentManager;
  6 import android.support.v4.app.FragmentTransaction;
  7 import android.view.Menu;
  8 import android.view.View;
  9 import android.view.View.OnClickListener;
 10 import android.widget.ImageButton;
 11 import android.widget.LinearLayout;
 12 
 13 public class MainActivity extends FragmentActivity implements OnClickListener{
 14 
 15     
 16     private Fragment hfrag;
 17     private Fragment sfrag;
 18     private Fragment ufrag;
 19     private Fragment yfrag;
 20     
 21     private ImageButton himg;
 22     private ImageButton simg;
 23     private ImageButton uimg;
 24     private ImageButton yimg;
 25     
 26     private LinearLayout hlay;
 27     private LinearLayout slay;
 28     private LinearLayout ulay;
 29     private LinearLayout ylay;
 30     
 31     private FragmentTransaction ftr;//事務
 32     
 33     
 34     
 35     
 36     protected void onCreate(Bundle savedInstanceState) {
 37         super.onCreate(savedInstanceState);
 38         setContentView(R.layout.activity_main);
 39         
 40         initView();//用來初始化數據控件
 41         
 42         initEvent();//初始化事件
 43         
 44         setSelected(0);//進入界面，先讓其顯示 第一個
 45     }
 46 
 47 
 48     private void initEvent() {
 49         
 50         //設定點擊事件
 51         
 52         hlay.setOnClickListener(this);
 53         slay.setOnClickListener(this);
 54         ulay.setOnClickListener(this);
 55         ylay.setOnClickListener(this);
 56         
 57     }
 58 
 59 
 60     //用來初始化的方法
 61     private void initView() {
 62         
 63         //得到按鈕
 64         himg = (ImageButton) findViewById(R.id.ibtn_hudie);
 65         simg = (ImageButton) findViewById(R.id.ibtn_set);
 66         uimg = (ImageButton) findViewById(R.id.ibtn_user);
 67         yimg = (ImageButton) findViewById(R.id.ibtn_yang);
 68         
 69         //得到底部的線性佈局
 70         hlay = (LinearLayout) findViewById(R.id.lay_hudie);
 71         slay = (LinearLayout) findViewById(R.id.lay_set);
 72         ulay = (LinearLayout) findViewById(R.id.lay_user);
 73         ylay = (LinearLayout) findViewById(R.id.lay_yang);
 74         
 75 
 76     }
 77 
 78 
 79     //監聽點擊事件
 80     public void onClick(View v) {
 81         
 82         resetImg();//將按鈕復位
 83         
 84         switch(v.getId()){
 85         
 86         case R.id.lay_hudie:
 87             setSelected(0);
 88             break;
 89         case R.id.lay_set:
 90             setSelected(1);
 91             break;
 92         case R.id.lay_user:
 93             setSelected(2);
 94             break;
 95         case R.id.lay_yang:
 96             setSelected(3);
 97             break;
 98         
 99         }
100         
101     }
102 
103 
104 
105 
106     //自定義一個方法，設定佈局中間的FrameLayout的選擇狀態
107     private void setSelected(int i) {
108     
109         //須要將按鈕變亮，且須要切換fragment的狀體
110         //獲取事務
111         FragmentManager fm = getSupportFragmentManager();
112         ftr  = fm.beginTransaction();//開啓一個事務    
113         hideTransaction(ftr);//自定義一個方法，來隱藏全部的fragment
114         
115         switch(i){
116         case 0:
117             if(hfrag == null){
118                 //實例化每個fragment
119                 hfrag = new HFragment();
120                 //千萬別忘記將該fragment加入到ftr中
121                 ftr.add(R.id.lay_frame, hfrag);
122                 }
123             ftr.show(hfrag);
124             himg.setImageResource(R.drawable.hudie2);
125             break;
126         case 1:
127             if(sfrag == null){
128                 sfrag = new SFragment();
129                 ftr.add(R.id.lay_frame, sfrag);
130         }
131                ftr.show(sfrag);
132             simg.setImageResource(R.drawable.set2);
133             break;
134         case 2:
135             if(ufrag == null){
136                 
137                 ufrag = new UFragment();
138                 ftr.add(R.id.lay_frame, ufrag);
139             }
140             ftr.show(ufrag);
141             uimg.setImageResource(R.drawable.user2);
142             break;
143         case 3:
144             if(yfrag == null){
145                 yfrag = new YFragment();
146                 ftr.add(R.id.lay_frame, yfrag);        
147             }
148             ftr.show(yfrag);
149             yimg.setImageResource(R.drawable.yang2);
150             break;
151         }
152         ftr.commit();//最後千萬別忘記提交事務
153     }
154 
155     //隱藏fragment
156     private void hideTransaction(FragmentTransaction ftr) {
157         
158         if(hfrag != null){
159             ftr.hide(hfrag);//隱藏該fragment    
160         }
161         if(sfrag != null){
162             ftr.hide(sfrag);    
163         }
164         if(ufrag != null){
165             ftr.hide(ufrag);    
166         }
167         if(yfrag != null){
168             ftr.hide(yfrag);    
169         }
170     }
171 
172     //復位按鈕，即設置按鈕爲暗色
173     private void resetImg() {
174         
175         himg.setImageResource(R.drawable.hudie);
176         simg.setImageResource(R.drawable.set);
177         uimg.setImageResource(R.drawable.user);
178         yimg.setImageResource(R.drawable.yang);
179         
180     }
181 }

 

     注意：在這裏繼承的是FragmentActivity，導入包仍舊是android.support.v4.app.Fragment;

 

    好了，這樣咱們就實現了Tab效果，運行一下程序能夠看看。

 

 

4、總結

 

（1）爲何推薦Fragment來實現Tab效果？

由於使用Fragment能夠將每個Tab跟咱們的MainActivity分開。這樣有利於在每個Fragment中實現較爲複雜的效果，而MainnActivity只起到一個組合的做用。若是使用ViewPager方式 實現Tab，咱們在每個Tab上編寫較爲複雜的效果時會發現全部的代碼都幾乎在MainActivity上完成，這樣會導入MainActivty冗長，不利於閱讀和維護。

（2）在實現過程當中，一概使用包android.support.v4.app.Fragment;  這一點千萬別導入錯誤的包。