Android Fragment實現按鈕間的切換

原文地址：http://blog.csdn.net/a123demi/article/details/32693037

 

Fragment要點

 

    Fragment是activity的介面中的一部分或一種行為。你可以把多個Fragment們組合到一個activity中來建立一個多面介面並且你可以在多個activity中重用一個Fragment。你可以把Fragment認為模組化的一段activity，它具有自己的生命週期，接收它自己的事件，並可以在activity執行時被新增或刪除。  

    Fragment不能獨立存在，它必須嵌入到activity中，而且Fragment的生命週期直接受所在的activity的影響。例如：當activity暫停時，它擁有的所有的Fragment們都暫停了，當activity銷燬時，它擁有的所有Fragment們都被銷燬。然而，當activity執行時（在onResume()之後，onPause()之前），你可以單獨地操作每個Fragment，比如新增或刪除或替代(add(),remove(),replace())它們。當你在執行上述針對Fragment的事務時，你可以將事務新增到一個棧中，這個棧被activity管理，棧中的每一條都是一個Fragment的一次事務。有了這個棧，就可以反向執行Fragment的事務，這樣就可以在Fragment級支援“返回”鍵（向後導航）。

而本文簡單介紹主要通過點選不同按鈕實現切換對應的fragment的效果，類似用Tab的切換：

 

主要程式碼如下：

1.工程原始碼顯示：

 

2.編譯後效果圖

3.切換按鈕佈局：activity_bottom_bts.xml切換的按鈕顯示在底部

 

[html] view plain copy  print?

1. <span style="font-family:SimSun;"><span style="font-size:18px;"><?xmlversionxmlversion="1.0" encoding="utf-8"?>  
2. <LinearLayoutxmlns:androidLinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"  
3.    android:layout_width="match_parent"  
4.    android:layout_height="match_parent"  
5.     android:orientation="horizontal">  
6.    
7.     <Button  
8.         android:id="@+id/movie_btn"  
9.        android:layout_width="wrap_content"  
10.        android:layout_height="wrap_content"  
11.         android:layout_weight="1"  
12.         android:gravity="center"  
13.         android:text="@string/movie"/>  
14.    
15.     <Button  
16.         android:id="@+id/tv_btn"  
17.        android:layout_width="wrap_content"  
18.        android:layout_height="wrap_content"  
19.         android:layout_weight="1"  
20.         android:gravity="center"  
21.         android:text="@string/tv"/>  
22.    
23.     <Button  
24.         android:id="@+id/anime_btn"  
25.        android:layout_width="wrap_content"  
26.        android:layout_height="wrap_content"  
27.         android:layout_weight="1"  
28.         android:gravity="center"  
29.         android:text="@string/anime"/>  
30.    
31.     <Button  
32.         android:id="@+id/variety_btn"  
33.        android:layout_width="wrap_content"  
34.        android:layout_height="wrap_content"  
35.         android:layout_weight="1"  
36.         android:gravity="center"  
37.        android:text="@string/variety" />  
38.    
39. </LinearLayout></span></span>  

 

 

 

4.主介面activity_main.xml

 

[html] view plain copy  print?

1. <span style="font-family:SimSun;"><span style="font-size:18px;"><RelativeLayoutxmlns:androidRelativeLayoutxmlns: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:paddingBottom="@dimen/activity_vertical_margin"  
6.    android:paddingLeft="@dimen/activity_horizontal_margin"  
7.    android:paddingRight="@dimen/activity_horizontal_margin"  
8.    android:paddingTop="@dimen/activity_vertical_margin"  
9.     tools:context="com.example.switchfragmentdemo.MainActivity$PlaceholderFragment">  
10.    
11.     <LinearLayout  
12.        android:id="@+id/button_view_include"  
13.        android:layout_width="fill_parent"  
14.        android:layout_height="wrap_content"  
15.        android:layout_alignParentBottom="true"  
16.         >  
17.    
18.         <includelayoutincludelayout="@layout/activity_bottom_btns" />  
19.     </LinearLayout>  
20.    
21.     <FrameLayout  
22.        android:id="@+id/fragment_content"  
23.        android:layout_width="match_parent"  
24.        android:layout_height="fill_parent"  
25.         android:layout_alignParentTop="true"  
26.        android:layout_marginBottom="50dp"  
27.        android:layout_below="@id/button_view_include"  
28.         >  
29.     </FrameLayout>  
30.    
31. </RelativeLayout></span></span>  

 

 

 

 

 

5.strings.xml

 

[html] view plain copy  print?

1. <span style="font-family:SimSun;"><span style="font-size:18px;"><?xmlversionxmlversion="1.0" encoding="utf-8"?>  
2. <resources>  
3.     <stringnamestringname="app_name">SwitchFragmentDemo</string>  
4.     <stringnamestringname="hello_world">Hello world!</string>  
5.     <stringnamestringname="action_settings">Settings</string>  
6.      
7.     <string name="movie">電影</string>  
8.     <string name="tv">電視劇</string>  
9.     <string name="anime">動漫</string>  
10.         <string name="variety">綜藝</string>  
11.          
12.         <stringnamestringname="movie_view">這是一個電影介面</string>  
13.         <string name="tv_view">這是一個電視劇介面</string>  
14.         <stringnamestringname="anime_view">這是一個動漫介面</string>  
15.         <stringnamestringname="variety_view">這是一個綜藝介面</string>  
16. </resources></span></span>  

 

6.主介面實現程式碼：MainActivity.java

 

[java] view plain copy  print?

1. <span style="font-family:SimSun;"><span style="font-size:18px;">packagecom.example.myandroidswitchbtndemo;  
2.    
3. importjava.util.ArrayList;  
4. importjava.util.List;  
5.    
6. importandroid.annotation.SuppressLint;  
7. importandroid.app.Activity;  
8. importandroid.app.FragmentManager;  
9. importandroid.app.FragmentTransaction;  
10. importandroid.graphics.Color;  
11. importandroid.os.Bundle;  
12. importandroid.view.Menu;  
13. importandroid.view.MenuItem;  
14. importandroid.view.View;  
15. importandroid.view.View.OnClickListener;  
16. importandroid.widget.Button;  
17.    
18. @SuppressLint("NewApi")  
19. public classMainActivity extends Activity implements OnClickListener {  
20.    
21.         private Button movieBtn, tvBtn,animeBtn, varietyBtn;  
22.         private List<Button> btnList = newArrayList<Button>();  
23.         private FragmentManager fm;  
24.         private FragmentTransaction ft;  
25.    
26.         @Override  
27.         protected void onCreate(BundlesavedInstanceState) {  
28.                super.onCreate(savedInstanceState);  
29.                setContentView(R.layout.activity_main);  
30.    
31.                findById();  
32.    
33.                // 進入系統預設為movie  
34.                fm = getFragmentManager();  
35.                ft = fm.beginTransaction();  
36.    
37.                setBackgroundColorById(R.id.movie_btn);  
38.                ft.replace(R.id.fragment_content,new MovieFragment());  
39.                ft.commit();  
40.         }  
41.    
42.         private void findById() {  
43.                movieBtn = (Button)this.findViewById(R.id.movie_btn);  
44.                tvBtn = (Button)this.findViewById(R.id.tv_btn);  
45.                animeBtn = (Button) this.findViewById(R.id.anime_btn);  
46.                varietyBtn = (Button)this.findViewById(R.id.variety_btn);  
47.                movieBtn.setOnClickListener(this);  
48.                tvBtn.setOnClickListener(this);  
49.                animeBtn.setOnClickListener(this);  
50.                varietyBtn.setOnClickListener(this);  
51.    
52.                btnList.add(movieBtn);  
53.                btnList.add(tvBtn);  
54.                btnList.add(animeBtn);  
55.                btnList.add(varietyBtn);  
56.         }  
57.    
58.         private void setBackgroundColorById(intbtnId) {  
59.                for (Button btn : btnList) {  
60.                        if (btn.getId() == btnId){  
61.                                btn.setBackgroundColor(Color.GREEN);  
62.                        }else {  
63.                                btn.setBackgroundColor(Color.BLUE);  
64.                        }  
65.                }  
66.         }  
67.    
68.         @Override  
69.         public boolean onCreateOptionsMenu(Menumenu) {  
70.    
71.                // Inflate the menu; this addsitems to the action bar if it is present.  
72.                getMenuInflater().inflate(R.menu.main,menu);  
73.                return true;  
74.         }  
75.    
76.         @Override  
77.         public booleanonOptionsItemSelected(MenuItem item) {  
78.                // Handle action bar item clickshere. The action bar will  
79.                // automatically handle clicks onthe Home/Up button, so long  
80.                // as you specify a parentactivity in AndroidManifest.xml.  
81.                int id = item.getItemId();  
82.                if (id == R.id.action_settings) {  
83.                        return true;  
84.                }  
85.                returnsuper.onOptionsItemSelected(item);  
86.         }  
87.    
88.         @Override  
89.         public void onClick(View v) {  
90.                // TODO Auto-generated methodstub  
91.                fm = getFragmentManager();  
92.                ft = fm.beginTransaction();  
93.                switch (v.getId()) {  
94.    
95.                case R.id.movie_btn:  
96.                        setBackgroundColorById(R.id.movie_btn);  
97.    
98.                        ft.replace(R.id.fragment_content,new MovieFragment());  
99.                        break;  
100.    
101.                case R.id.tv_btn:  
102.                        setBackgroundColorById(R.id.tv_btn);  
103.    
104.                        ft.replace(R.id.fragment_content,new TVFragment());  
105.                        break;  
106.    
107.                case R.id.anime_btn:  
108.                        setBackgroundColorById(R.id.anime_btn);  
109.    
110.                        ft.replace(R.id.fragment_content,new AnimeFragment());  
111.                        break;  
112.    
113.                case R.id.variety_btn:  
114.                        setBackgroundColorById(R.id.variety_btn);  
115.    
116.                        ft.replace(R.id.fragment_content,new VarietyFragment());  
117.                        break;  
118.    
119.                default:  
120.                        break;  
121.                }  
122.                // 不要忘記提交  
123.                ft.commit();  
124.         }  
125.    
126. }</span></span>  

 

7.電影介面：fragment_movie.xml和MovieFragment.java

 

[html] view plain copy  print?

1. <span style="font-family:SimSun;"><span style="font-size:18px;"><?xml version="1.0"encoding="utf-8"?>  
2. <LinearLayoutxmlns:androidLinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"  
3.    android:layout_width="match_parent"  
4.    android:layout_height="match_parent"  
5.    android:background="#FF00FF"  
6.    android:orientation="vertical" >  
7.    <TextView  
8.        android:id="@+id/movie_tv"  
9.        android:layout_width="wrap_content"  
10.        android:layout_height="wrap_content"  
11.        android:text="@string/movie_view" />  
12. </LinearLayout></span></span>  

 

 

 

 

 

 

[java] view plain copy  print?

1. <span style="font-family:SimSun;"><span style="font-size:18px;">packagecom.example.myandroidswitchbtndemo;  
2.  import android.app.Fragment;  
3. importandroid.os.Bundle;  
4. importandroid.view.LayoutInflater;  
5. importandroid.view.View;  
6. importandroid.view.ViewGroup;  
7.     
8. public classMovieFragment extends Fragment {  
9. <spanstyle="white-space:pre"> </span>@Override   
10.    public View onCreateView(LayoutInflater inflater, ViewGroup container,    
11.            Bundle savedInstanceState) {    
12.        return inflater.inflate(R.layout.fragment_movie, null);    
13.     }   
14. }</span></span>  

 

 

 

 

 

8.電視劇介面：fragment_tv.xml和TVFragment.java

 

[html] view plain copy  print?

1. <span style="font-family:SimSun;"><span style="font-size:18px;"><?xmlversionxmlversion="1.0" encoding="utf-8"?>  
2. <LinearLayoutxmlns:androidLinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"  
3.    android:layout_width="match_parent"  
4.    android:layout_height="match_parent"  
5.     android:background="#00FFFF"  
6.     android:orientation="vertical">  
7.     <TextView  
8.         android:id="@+id/tv_tv"  
9.        android:layout_width="wrap_content"  
10.        android:layout_height="wrap_content"  
11.         android:text="@string/tv_view"  
12.         />  
13. </LinearLayout></span></span>  

 

 

 

 

 

 

[java] view plain copy  print?

1. <span style="font-family:SimSun;"><span style="font-size:18px;">packagecom.example.myandroidswitchbtndemo;  
2.  importandroid.os.Bundle;  
3. importandroid.app.Fragment;  
4. importandroid.view.LayoutInflater;  
5. importandroid.view.View;  
6. importandroid.view.ViewGroup;  
7.    
8. public classTVFragment extends Fragment {  
9. <spanstyle="white-space:pre"> </span>@Override   
10.    public View onCreateView(LayoutInflater inflater, ViewGroup container,    
11.            Bundle savedInstanceState) {    
12.        return inflater.inflate(R.layout.fragment_tv, null);    
13.     }   
14. }</span></span>  

 

 

 

 

 

9.動漫介面：fragment_anime和AnimeFragment.java
 

 

[html] view plain copy  print?

1. <span style="font-family:SimSun;"><span style="font-size:18px;"><?xmlversionxmlversion="1.0" encoding="utf-8"?>  
2. <LinearLayoutxmlns:androidLinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"  
3.    android:layout_width="match_parent"  
4.    android:layout_height="match_parent"  
5.     android:background="#00FF00"  
6.     android:orientation="vertical">  
7.     <TextView  
8.         android:id="@+id/anime_tv"  
9.        android:layout_width="wrap_content"  
10.        android:layout_height="wrap_content"  
11.        android:text="@string/anime_view"  
12.         />  
13.  </LinearLayout></span></span>  

 

 

 

 

 

 

[java] view plain copy  print?

1. <span style="font-family:SimSun;"><span style="font-size:18px;">packagecom.example.myandroidswitchbtndemo;  
2.  importandroid.os.Bundle;  
3. importandroid.annotation.SuppressLint;  
4. importandroid.app.Fragment;  
5. importandroid.view.LayoutInflater;  
6. importandroid.view.View;  
7. importandroid.view.ViewGroup;  
8.     
9. @SuppressLint("NewApi")  
10. public classAnimeFragment extends Fragment {  
11. <spanstyle="white-space:pre"> </span>@Override   
12.    public View onCreateView(LayoutInflater inflater, ViewGroup container,    
13.            Bundle savedInstanceState) {    
14.        return inflater.inflate(R.layout.fragment_anime, null);    
15.     }   
16. }</span></span>  

 

 

 

 

 

10.綜藝介面：fragment_variety和VarietyFragment
 

 

[html] view plain copy  print?

1. <span style="font-family:SimSun;"><span style="font-size:18px;"><?xmlversionxmlversion="1.0" encoding="utf-8"?>  
2. <LinearLayoutxmlns:androidLinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"  
3.    android:layout_width="match_parent"  
4.    android:layout_height="match_parent"  
5.     android:background="#FFFF00"  
6.     android:orientation="vertical">  
7.      <TextView  
8.         android:id="@+id/variety_tv"  
9.        android:layout_width="wrap_content"  
10.        android:layout_height="wrap_content"  
11.         android:text="@string/variety_view"/>  
12.  </LinearLayout></span></span>  

 

 

 

 

 

 

[java] view plain copy  print?

1. <span style="font-family:SimSun;"><span style="font-size:18px;">packagecom.example.myandroidswitchbtndemo;  
2.  importandroid.os.Bundle;  
3. importandroid.app.Fragment;  
4. importandroid.view.LayoutInflater;  
5. importandroid.view.View;  
6. importandroid.view.ViewGroup;  
7.    
8. public classVarietyFragment extends Fragment {  
9. <spanstyle="white-space:pre"> </span>@Override   
10.    public View onCreateView(LayoutInflater inflater, ViewGroup container,    
11.            Bundle savedInstanceState) {    
12.        return inflater.inflate(R.layout.fragment_variety, null);    
13.     }   
14. }  
15. </span></span>  

 

 

 

 

 

上面為程式碼的具體實現。

原始碼下載地址：http://download.csdn.net/detail/a123demi/7524047