標題: Fragment [打印本頁]

---

作者: tonyh    時間: 2017-12-23 14:27     標題: Fragment

本帖最後由 tonyh 於 2018-1-13 14:58 編輯

什麼是Fragment

Fragment (中譯：片段、區塊) 是Android提供的一個畫面區塊，可將Fragment放在一個Activity中，可使用多個Fragment構成一個手機畫面。因此，Fragment是Activity的子畫面，如下圖：

[attach]3184[/attach]

在Activity中的每個Fragment擁有自己的生命週期，當Activity進入暫停時，Activity內的Fragment也會自動執行相對的生命週期方法，在Fragment中覆寫這些方法，可自訂區塊的功能設計。例如，何時要重新讀取資料、何時暫停處理資料等。

在2009年Android剛嶄露頭角時，手機的畫面不大，解析度也不高，一個畫面放不了太多資訊，因此使用Activity轉換到另一個Activity的方式來設計功能，如下圖：

[attach]3183[/attach]

像是在Activity1中顯示消費清單，當按下清單中的其中一個項目時，在Activity2顯示該筆消費的詳細資訊。

但從2010年時平板開始流行後，畫面變大、解析度變高，一個畫面可容納更多的元件了，2011年初Android 3.0推出時，即加入了Fragment元件，可在Activity中加入Fragment區塊，使其可在一個畫面下容納多個區塊的顯示，並自訂每個區塊的內容，或者更換其中一個區塊功能。

Fragment的生命週期

每個Fragment擁有自己的生命週期，也就是說，在特定的狀況會自動呼叫特定的方法，供使用者依功能需求覆寫這些方法，加入必要的程式碼。依照Fragment產生與出現的順序會執行的方法描述如下：

產生階段（未出現在畫面上）

onAttach()
當Fragment被加到某個Activity畫面中時，會自動呼叫此方法。

onCreate()
Fragment被建立時會自動呼叫此方法，可加入初始化元件或資料的程式碼。

onCreateView()
將在畫面中第一次顯示Fragment時會自動呼叫此方法，必須回傳Fragment畫面的View元件，設計時，請使用方法中的LayoutInflater物件，在此方法中產生畫面元件並回傳。

onActivityCreated()
當加入本Fragment的Activity被建立時，該Activity的onCreate方法執行完成後，會自動執行此方法。執行完此方法後，Fragment才出現在畫面上。

準備階段（出現在畫面上）

onStart()
當Fragment出現在畫面中時先執行此方法。

onResume()
執行完onStart方法後，再自動執行本方法。完成後即在畫面中與使用者互動。

暫停階段

當使用者按下返回鍵，或是程式中將Fragment自某個Activity中移除時，會自動執行以下方法：

onPause()
進入暫停前第一個執行的方法。

onStop()
執行完onPause方法後，自動執行本方法。

onDestroyView()
此時Fragment已不在畫面中，呼叫此方法。

onDestroy()
當Fragment要被清除之前，會執行此方法。

onDetach()
與當初被加入的Activity卸載時，會自動執行此方法。

實作Fragment

完成如下圖所示之練習，頁面上方為兩個按鈕，下方為一個 FrameLayout，點擊按鈕後將 FrameLayout 中的內容置換為目標子頁面。

[attach]3190[/attach]

[attach]3191[/attach]

[attach]3192[/attach]
layout\activity_main.xml

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
   
4.     android:layout_height="match_parent"
   
5.     tools:context=".MainActivity"
   
6.     android:orientation="vertical">
   
7. 
   
8.     <LinearLayout
   
9.         android:orientation="horizontal"
   
10.         android:layout_width="match_parent"
    
11.         android:layout_height="wrap_content"
    
12.         android:layout_gravity="center_horizontal">
    
13. 
    
14.         <Button
    
15.             android:layout_width="fill_parent"
    
16.             android:layout_height="wrap_content"
    
17.             android:text="Fragment1"
    
18.             android:id="@+id/button1"
    
19.             android:textAllCaps="false"
    
20.             android:textSize="20sp"
    
21.             android:layout_weight="1" />
    
22. 
    
23.         <Button
    
24.             android:layout_width="fill_parent"
    
25.             android:layout_height="wrap_content"
    
26.             android:text="Fragment2"
    
27.             android:id="@+id/button2"
    
28.             android:layout_gravity="center_horizontal"
    
29.             android:textAllCaps="false"
    
30.             android:textSize="20sp"
    
31.             android:layout_weight="1" />
    
32.     </LinearLayout>
    
33. 
    
34.     <FrameLayout
    
35.         android:layout_width="fill_parent"
    
36.         android:layout_height="0dp"
    
37.         android:layout_weight="1"
    
38.         android:id="@+id/frame"
    
39.         android:visibility="visible"></FrameLayout>
    
40. </LinearLayout>

複製代碼

layout\fragment1.xml

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:orientation="vertical" android:layout_width="match_parent"
   
4.     android:layout_height="match_parent"
   
5.     android:background="#c0e6ff">
   
6. 
   
7.     <TextView
   
8.         android:layout_width="match_parent"
   
9.         android:layout_height="match_parent"
   
10.         android:text="This is Fragment1"
    
11.         android:id="@+id/textView"
    
12.         android:layout_gravity="center_horizontal"
    
13.         android:gravity="center"
    
14.         android:textSize="28sp"
    
15.         android:textColor="@android:color/black"
    
16.         android:background="#c8e9ff"
    
17.         android:visibility="visible" />
    
18. </LinearLayout>

複製代碼

layout\fragment2.xml

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3.     android:orientation="vertical" android:layout_width="match_parent"
   
4.     android:layout_height="match_parent"
   
5.     android:background="#ffc7c7">
   
6. 
   
7.     <TextView
   
8.         android:layout_width="match_parent"
   
9.         android:layout_height="match_parent"
   
10.         android:text="This is Fragment2"
    
11.         android:id="@+id/textView"
    
12.         android:layout_gravity="center_horizontal"
    
13.         android:gravity="center"
    
14.         android:textSize="28sp"
    
15.         android:textColor="@android:color/black"
    
16.         android:background="#f7d1ff"
    
17.         android:visibility="visible" />
    
18. </LinearLayout>

複製代碼

MainActivity.java

1. package org.istak.ch38_fragment;
   
2. 
   
3. import android.app.FragmentTransaction;
   
4. import android.support.v7.app.AppCompatActivity;
   
5. import android.os.Bundle;
   
6. import android.view.View;
   
7. import android.widget.Button;
   
8. 
   
9. public class MainActivity extends AppCompatActivity {
   
10. 
    
11.     Button btn1, btn2;
    
12. 
    
13.     @Override
    
14.     protected void onCreate(Bundle savedInstanceState) {
    
15.         super.onCreate(savedInstanceState);
    
16.         setContentView(R.layout.activity_main);
    
17. 
    
18.         btn1 = (Button) findViewById(R.id.button1);
    
19.         btn2 = (Button) findViewById(R.id.button2);
    
20. 
    
21.         btn1.setOnClickListener(new View.OnClickListener() {
    
22.             @Override
    
23.             public void onClick(View v) {
    
24.                 //FragmentManager fm = getFragmentManager();
    
25.                 Fragment1 f1 = new Fragment1();
    
26.                 FragmentTransaction ft = getFragmentManager().beginTransaction();
    
27.                 ft.add(R.id.frame, f1);    //replace() 具同樣效果
    
28.                 //ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);  //設轉場動畫 (無意義)
    
29.                 ft.commit();
    
30.             }
    
31.         });
    
32.         btn2.setOnClickListener(new View.OnClickListener() {
    
33.             @Override
    
34.             public void onClick(View v) {
    
35.                 //Fragment2 f2 = new Fragment2();
    
36.                 //FragmentTransaction ft = getFragmentManager().beginTransaction();
    
37.                 //ft.add(R.id.frame_layout, f2);
    
38.                 //ft.commit();
    
39.                 getFragmentManager().beginTransaction().add(R.id.frame, new Fragment2()).commit();
    
40.             }
    
41.         });
    
42.     }
    
43. }

複製代碼

Fragment1.java

1. package org.istak.ch38_fragment;
   
2. 
   
3. import android.app.Fragment;
   
4. import android.os.Bundle;
   
5. import android.view.LayoutInflater;
   
6. import android.view.View;
   
7. import android.view.ViewGroup;
   
8. 
   
9. /**
   
10. * Created by Tony on 2017/11/14.
    
11. */
    
12. public class Fragment1 extends Fragment {
    
13. 
    
14.     @Override
    
15.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    
16.         View v=inflater.inflate(R.layout.fragment1,container,false);
    
17.         return v;
    
18.     }
    
19. }

複製代碼

Fragment2.java

1. package org.istak.ch38_fragment;
   
2. 
   
3. import android.app.Fragment;
   
4. import android.os.Bundle;
   
5. import android.view.LayoutInflater;
   
6. import android.view.View;
   
7. import android.view.ViewGroup;
   
8. 
   
9. /**
   
10. * Created by Tony on 2017/11/14.
    
11. */
    
12. public class Fragment2 extends Fragment {
    
13. 
    
14.     @Override
    
15.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    
16.         View v=inflater.inflate(R.layout.fragment2,container,false);
    
17.         return v;
    
18.     }
    
19. }

複製代碼

---

作者: 李允軒    時間: 2017-12-23 17:57

本帖最後由 李允軒 於 2017-12-23 17:58 編輯

1. package com.example.student.myapplication;
   
2. 
   
3. import android.app.Fragment;
   
4. import android.support.v7.app.AppCompatActivity;
   
5. import android.os.Bundle;
   
6. import android.view.View;
   
7. import android.widget.Button;
   
8. 
   
9. public class MainActivity extends AppCompatActivity {
   
10.     Button bt1,bt2;
    
11.     @Override
    
12.     protected void onCreate(Bundle savedInstanceState) {
    
13.         super.onCreate(savedInstanceState);
    
14.         setContentView(R.layout.activity_main);
    
15. 
    
16.         bt1= (Button) findViewById(R.id.button);
    
17.         bt2= (Button) findViewById(R.id.button2);
    
18. 
    
19.         bt1.setOnClickListener(new View.OnClickListener() {
    
20.             @Override
    
21.             public void onClick(View v) {
    
22.                 getFragmentManager().beginTransaction().add(R.id.frame,new fragment1()).commit();
    
23.             }
    
24.         });
    
25.         bt2.setOnClickListener(new View.OnClickListener() {
    
26.             @Override
    
27.             public void onClick(View v) {
    
28.                 getFragmentManager().beginTransaction().add(R.id.frame, new fragment2()).commit();
    
29.             }
    
30.         });
    
31.     }
    
32. }

複製代碼

1. package com.example.student.myapplication;
   
2. 
   
3. import android.app.Fragment;
   
4. import android.os.Bundle;
   
5. import android.view.LayoutInflater;
   
6. import android.view.View;
   
7. import android.view.ViewGroup;
   
8. 
   
9. /**
   
10. * Created by student on 2017/12/23.
    
11. */
    
12. public class fragment1 extends Fragment{
    
13. 
    
14.     @Override
    
15.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    
16.         View v=inflater.inflate(R.layout.fragment1,container,false);
    
17.         return v;
    
18. 
    
19.     }
    
20. }

複製代碼

1. package com.example.student.myapplication;
   
2. 
   
3. import android.app.Fragment;
   
4. import android.os.Bundle;
   
5. import android.view.LayoutInflater;
   
6. import android.view.View;
   
7. import android.view.ViewGroup;
   
8. 
   
9. /**
   
10. * Created by student on 2017/12/23.
    
11. */
    
12. public class fragment2 extends Fragment{
    
13.     @Override
    
14.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    
15.         View v=inflater.inflate(R.layout.fragment2,container,false);
    
16.         return v;
    
17.     }
    
18. }

複製代碼

---

作者: 林宇翔    時間: 2018-1-6 12:26

1. package com.example.student.myapplication;
   
2. 
   
3. import android.app.Fragment;
   
4. import android.support.v7.app.AppCompatActivity;
   
5. import android.os.Bundle;
   
6. import android.view.View;
   
7. import android.widget.Button;
   
8. 
   
9. public class MainActivity extends AppCompatActivity {
   
10.     Button bt1,bt2;
    
11.     @Override
    
12.     protected void onCreate(Bundle savedInstanceState) {
    
13.         super.onCreate(savedInstanceState);
    
14.         setContentView(R.layout.activity_main);
    
15. 
    
16.         bt1= (Button) findViewById(R.id.button);
    
17.         bt2= (Button) findViewById(R.id.button2);
    
18. 
    
19.         bt1.setOnClickListener(new View.OnClickListener() {
    
20.             @Override
    
21.             public void onClick(View v) {
    
22.                 getFragmentManager().beginTransaction().add(R.id.frame,new fragment1()).commit();
    
23.             }
    
24.         });
    
25.         bt2.setOnClickListener(new View.OnClickListener() {
    
26.             @Override
    
27.             public void onClick(View v) {
    
28.                 getFragmentManager().beginTransaction().add(R.id.frame, new fragment2()).commit();
    
29.             }
    
30.         });
    
31.     }
    
32. }
    
33. package com.example.student.myapplication;
    
34. 
    
35. import android.app.Fragment;
    
36. import android.os.Bundle;
    
37. import android.view.LayoutInflater;
    
38. import android.view.View;
    
39. import android.view.ViewGroup;
    
40. 
    
41. /**
    
42. * Created by student on 2018/01/06.
    
43. */
    
44. public class fragment1 extends Fragment{
    
45. 
    
46.     @Override
    
47.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    
48.         View v=inflater.inflate(R.layout.fragment1,container,false);
    
49.         return v;
    
50. 
    
51.     }
    
52. }
    
53. package com.example.student.myapplication;
    
54. 
    
55. import android.app.Fragment;
    
56. import android.os.Bundle;
    
57. import android.view.LayoutInflater;
    
58. import android.view.View;
    
59. import android.view.ViewGroup;
    
60. 
    
61. /**
    
62. * Created by student on 2018/01/06.
    
63. */
    
64. public class fragment2 extends Fragment{
    
65.     @Override
    
66.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    
67.         View v=inflater.inflate(R.layout.fragment2,container,false);
    
68.         return v;
    
69.     }
    
70. }

複製代碼

---

歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://istak.org.tw/seed/)

Powered by Discuz! 7.2