返回列表 發帖

Rank: 8Rank: 8
1# 跳轉到 » 倒序看帖
打印
tT
tonyh發表於 2017-12-23 14:27 | 只看該作者

Fragment

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

什麼是Fragment

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



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

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



像是在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 中的內容置換為目標子頁面。






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">

  8.     <LinearLayout
  9.         android:orientation="horizontal"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="wrap_content"
  12.         android:layout_gravity="center_horizontal">

  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" />

  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>

  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">

  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">

  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;

  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;

  9. public class MainActivity extends AppCompatActivity {

  11.     Button btn1, btn2;

  13.     @Override
  14.     protected void onCreate(Bundle savedInstanceState) {
  15.         super.onCreate(savedInstanceState);
  16.         setContentView(R.layout.activity_main);

  18.         btn1 = (Button) findViewById(R.id.button1);
  19.         btn2 = (Button) findViewById(R.id.button2);

  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;

  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;

  9. /**
  10. * Created by Tony on 2017/11/14.
  11. */
  12. public class Fragment1 extends Fragment {

  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;

  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;

  9. /**
  10. * Created by Tony on 2017/11/14.
  11. */
  12. public class Fragment2 extends Fragment {

  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. }
複製代碼
附件: 您需要登錄才可以下載或查看附件。沒有帳號？註冊
收藏 分享

Rank: 1
2#
李允軒發表於 2017-12-23 17:57 | 只看該作者
本帖最後由 李允軒 於 2017-12-23 17:58 編輯
  1. package com.example.student.myapplication;

  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;

  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);

  16.         bt1= (Button) findViewById(R.id.button);
  17.         bt2= (Button) findViewById(R.id.button2);

  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;

  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;

  9. /**
  10. * Created by student on 2017/12/23.
  11. */
  12. public class fragment1 extends Fragment{

  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;

  19.     }
  20. }
複製代碼
  1. package com.example.student.myapplication;

  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;

  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. }
複製代碼
كخخخخخخخخخخخخخ

TOP

Rank: 1
3#
林宇翔發表於 2018-1-6 12:26 | 只看該作者
  1. package com.example.student.myapplication;

  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;

  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);

  16.         bt1= (Button) findViewById(R.id.button);
  17.         bt2= (Button) findViewById(R.id.button2);

  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;

  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;

  41. /**
  42. * Created by student on 2018/01/06.
  43. */
  44. public class fragment1 extends Fragment{

  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;

  51.     }
  52. }
  53. package com.example.student.myapplication;

  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;

  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. }
複製代碼
羽毛神在此

TOP

返回列表