Android學習筆記（五）——Fragment

寫在前面的話

是的，你沒有看錯，是（五），你也不用再找了，這裡沒有一二三四，直接就是五啦，因為一二三四在這裡。。。好久沒寫安卓的部落格了，之前定好的要在2016年前寫完這個系列的目標也是失敗了，但文章總得要寫，這篇就是關於fragment的簡單使用。

什麼是fragment

fragment的意思就是碎片，是一種可以嵌入在activity中的UI片段，可以最大化的利用手機的螢幕。現在很多應用都使用了fragment，最常見的就是微信了，微信下面的tab欄切換時，上面的內容就是用fragment來顯示的。看看看，這麼牛的微信都在用fragment，我們趕緊來用他吧。

fragment生命週期

啥，又是生命週期，他又不是activity，怎麼還有生命週期呢。是的，fragment依託於activity而存在，他是有生命週期的，而且他的生命週期的理解最好還是和activity一起比較更容易理解。在說明他的生命週期之前，我們先來實現一個簡單的fragment的例子。

我們先來寫兩個簡單的fragment,然後在MainActivity點選按鍵來切換這兩個fragment。

第一個fragment

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout    
    xmlns:android="http://schemas.android.com/apk/res/android"    
    android:gravity="center"    
    android:background="@android:color/holo_blue_light"    
    android:orientation="vertical"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent">    
    
    <TextView        
        android:text="第一個Fragment"        
        android:textSize="25sp"        
        android:layout_width="wrap_content"        
        android:layout_height="wrap_content" />
</LinearLayout>

第二個fragment

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center"
    android:background="@android:color/holo_red_light"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="第二個Fragment"
        android:textSize="25sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

可以看到這兩個佈局都非常簡單，只是單純的設定了背景色以及一個TextView。
然後實現這兩個fragment，新建兩個類FirstFragment和SecondFragment都繼承Fragment，並將佈局檔案和類進行繫結。
FristFragment：
public class FirstFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.first_fragment,null);
        return view;
    }
}

SecordFragment：
public class SecondFragment extends Fragment{

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.second_fragment,null);
        return view;
    }
}

接下來是MainActivity的佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:gravity="center"
            android:id="@+id/btn_change"
            android:text="Change"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <FrameLayout
        android:id="@+id/framelayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <fragment
            android:id="@+id/fragment"
            android:name="com.example.jiang.fragmenttest.FirstFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            />

    </FrameLayout>


</LinearLayout>

這裡使用了FrameLayout，他的特性就是會從左上角層疊佈局。預設顯示的是FirstFragment

接下來看MainActivity的內容，給button新增了點選事件：

public class MainActivity extends AppCompatActivity {

    private Button btn_change;
    private SecondFragment secondFragment;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn_change = (Button) findViewById(R.id.btn_change);
        btn_change.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                secondFragment = new SecondFragment();
                FragmentManager fragmentManager = getFragmentManager();
                FragmentTransaction transaction = fragmentManager.beginTransaction();
                transaction.replace(R.id.framelayout,secondFragment);
                transaction.commit();
            }
        });

    }
}

這樣就可以實現點選切換fragment的效果，先看效果圖：

這裡我們可以看到點選按鍵後介面就進行切換了，這裡一個動態的fragment的切換主要是以下五個步驟：

1. 建立一個fragment例項，
2. 獲取FragmentManager，在activity中可以直接呼叫getFragmentManager()來獲取，
3. 開啟一個事務，通過beginTransaction()來開啟，
4. 向容器新增fragment，一般採用replace()來切換，需要傳入容器的id以及要替換的fragment例項，
5. 提交事務，使用commit()方法。

這樣就是可以動態的切換一個fragment。這裡我們發現在我們切換了fragment後再按下返回鍵，程式竟然不是返回到第一個fragment而是直接退出了。這樣很不符合我們的操作習慣。這裡我們就可以把事務加入到返回棧中。修改MainActivity中的程式碼，我這裡就不貼全了。

      transaction.replace(R.id.framelayout,secondFragment);
      transaction.addToBackStack(null);
      transaction.commit();

重新編譯一次，就發現當按下返回鍵時就返回到了第一個fragment了。這裡就不貼圖了。
這只是一個最簡單的例子，我們就來參照這個例子來看一下fragment的生命週期。fragment是依託於activity的，那麼他的生命週期就與activity息息相關，我們先來看看官網fragment講解上的一張圖片。

先不著急說明，先到程式碼中將生命週期列印出來。開啟程式：

FirstFragment首次載入，生命週期是onAttach()-->onCreate()-->onCreateView()-->onActivityCreated()-->onStart()-->onResume。
然後我們點選button去切換到SecondFragment：

我們看到FirstFragment先執行onPause()-->onStop()-->onDestoryView()。然後SecondFragment再執行。我們再按返回鍵返回到FirstFragment：

看這裡SecondFragment在執行完onDestoryView()後又執行了onDestory()-->onDetach()。FirstFragment則直接從onActivityCreated()開始執行。接著我們再按返回鍵退出程式：

這裡FirstFragment才去執行onDestoryView()等方法。我們再看官網上的另一張圖

這樣這張圖是不是更好理解了呢。這裡我沒有把activity的生命週期也加入列印，希望有條件的同學自己去敲敲程式碼，看看兩者間的關係是不是像第一張圖那樣的。

這樣最簡單的一個fragment就寫完了，但這基本上沒有什麼實際意義，下一篇文章將會寫一個簡單的底部tab欄切換，使用viewpaper+fragment。

寫在最後的話

耽擱了這麼久才寫完這篇，目標也是沒有達到。這大半年間也是經歷了許多，工作，生活都是有了大的變化，有開心，也有失落。重新撿起未寫完的部落格，每個人都在拼搏，有時候看到些負能量的段子--“比我聰明的人還在努力，我他媽的努力還有什麼用”，微微一笑，是啊，這裡確實比我還優秀的人都比我還努力，我努力還有什麼用呢。安下心來，認清自己只是個普通人，不要總活在夢中，腳踏實地的幹活，學習。羅馬不是一天建成的，騰訊帝國不是一蹴而就的，誰沒有經歷過失敗呢。一步一步的走，一步一步的犯錯，一步一步的改正，一步一步的走向成功。路飛用了兩年來升級，我給自己三年時間來升級。北京升級之路。（吐槽：這最後一段總是廢話，還不連貫，整個思想都是亂的，你這叫我怎麼看(╯‵□′)╯︵┻━┻，再不好好寫文章我就取關啦，哼！）哈哈，你們是不是這麼想，要是我猜對了就果斷給我點波關注唄，會繼續寫android以及React-Native的文章。謝謝啦！

學習路漫漫，吾將上下而求索。