用Fragments建立動態UI(翻譯)

有感於看了許多文章但最後都會忘得一乾二淨,遂將所看整理一下記錄下來,但願能加深印象,也但願對讀者略有幫助。html

此處爲翻譯文章 原文連接 : http://developer.android.com/training/basics/fragments/index.htmljava


建立一個fragment 

咱們能夠將fragment看作是activity的一個模塊化部分,他有本身的生命週期,接收本身的交互事件,而且當這個activity正在運行時,你也能夠添加和刪除這個模塊,有點像是子activity,可是你卻能夠在不一樣的activities中重用它。
android

(若是你的app要求api級別>= 11,那你就能夠直接使用android 框架內置的fragment,無需在使用支持庫中的fragment)。api


建立一個fragment 類

  經過繼承fragment能夠建立fragment類,而且實現其中的一些關鍵生命週期方法來插入本身app的邏輯代碼,基本和activity相同。app

其中一處不一樣是,當建立一個fragment時,你須要回調onCreateView() 方法來定義本身的佈局框架

 

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.ViewGroup;

public class ArticleFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.article_view, container, false);
    }
}


下面說說怎麼在activity中使用Fragmentide

經過xml添加fragment到activity中

  儘管fragment是一個重複可見模塊化的UI組件,可是每個fragment必須和一個fragmentactivity類相關聯才能使用,你能夠得到這種關聯性經過在一個activity的xml佈局文件中定義fragment。模塊化

(當你只支持api 11 以上的級別時,只須要和activity關聯便可)佈局

   這裏有個例子優化

    

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <fragment android:name="com.example.android.fragments.HeadlinesFragment"
              android:id="@+id/headlines_fragment"
              android:layout_weight="1"
              android:layout_width="0dp"
              android:layout_height="match_parent" />

    <fragment android:name="com.example.android.fragments.ArticleFragment"
              android:id="@+id/article_fragment"
              android:layout_weight="2"
              android:layout_width="0dp"
              android:layout_height="match_parent" />

</LinearLayout>

  

 而後是在activity中使用這個佈局 

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

public class MainActivity extends FragmentActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.news_articles);
    }
}


注意 :  當你經過xml佈局把一個fragment加入到activity時,你沒法在運行時將fragment移除,若是你想要在運行時靈活的加入或移除fragment,你必須在activity第一次啓動時將fragment加入到activity。


建立靈活的UI

當你設計app時可能須要支持普遍的屏幕尺寸,你能夠重用fragment在不一樣的佈局配置中來優化用戶體驗,基於可用的屏幕尺寸。

例如,手機設備爲了更好地用戶體驗可能更適合一次顯示一個fragment。相反,你可能想要並行的顯示兩個fragment在一個平板上,由於平板有更寬的屏幕來向用戶展現更多的信息。

 FragmentManager提供了許多方法來操做fragment,包括添加、移除、替換等等,這些能夠保證一個良好的用戶體驗。

在activity運行時添加一個fragment

並非在activity的佈局裏定義一個fragment,而是在activity運行時添加一個fragment,這是必要的,若是你打算在activity的生命週期內改變fragments。

爲了執行一個操做,你必須使用FragmentMananger來建立一個FragmentTrasaction,它提供了添加、移除或其餘一些操做fragment的方法。

若是你的fragment容許被移除或替換,你應該在activity的onCreate ()方法中初始化一個fragment。

處理fragment尤爲是在運行時添加一個fragment的重要規則是,你必需要有一個容器來讓你存放fragment。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

在activity裏面,若是你用的是支持庫的apis調用getSupportFragmentManager()來獲取FragmentManager,而後調用beginTransaction()來建立一個FragmentTransaction,而後在調用add()方法來添加一個fragment.

你能夠經過一個FragmentTransaction來操做多個fragment,當你準備作改變的時候,你須要調用commit()方法。

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

public class MainActivity extends FragmentActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.news_articles);

        // Check that the activity is using the layout version with
        // the fragment_container FrameLayout
        if (findViewById(R.id.fragment_container) != null) {

            // However, if we're being restored from a previous state,
            // then we don't need to do anything and should return or else
            // we could end up with overlapping fragments.
            if (savedInstanceState != null) {
                return;
            }

            // Create a new Fragment to be placed in the activity layout
            HeadlinesFragment firstFragment = new HeadlinesFragment();
            
            // In case this activity was started with special instructions from an
            // Intent, pass the Intent's extras to the fragment as arguments
            firstFragment.setArguments(getIntent().getExtras());
            
            // Add the fragment to the 'fragment_container' FrameLayout
            getSupportFragmentManager().beginTransaction()
                    .add(R.id.fragment_container, firstFragment).commit();
        }
    }
}


替換fragment

   替換的過程和添加相似,使用的是replace()方法。

  當你操做fragment的時候,你應該考慮用戶的向後導航操做,好比移除和替換操做。爲了實現向後導航操做,當你commit() FragmentTransaction.以前,應該先調用addToBackStack()方法。

  當你移除或替換一個fragment的時候,同時你把它添加到了back stack中,這個被移除或替換的fragment只是被stop 而不是被destroy了,當用戶執行向後導航操做時,這個fragment將被從新啓動。若是你沒有把它添加到back stack 中,這個fragment將被destroy。

   

ArticleFragment newFragment = new ArticleFragment();
Bundle args = new Bundle();
args.putInt(ArticleFragment.ARG_POSITION, position);
newFragment.setArguments(args);

FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

// Replace whatever is in the fragment_container view with this fragment,
// and add the transaction to the back stack so the user can navigate back
transaction.replace(R.id.fragment_container, newFragment);
transaction.addToBackStack(null);

// Commit the transaction
transaction.commit();


addToBackStack()方法接收一個字符串做爲參數,它用來標識一個事務,但這個參數不是必須的。除非你想執行更高級的fragment操做,經過FragmentManager.BackStackEntry APIs.

fragments之間的通訊

    爲了重用fragment,你應該創建每個徹底自包含的模塊化組件,他們定義了本身的佈局和行爲。一旦你建立了這些fragments,你就能夠將這些fragments與activity聯繫起來,經過應用邏輯來最終實現一個組合的UI。

   也許你常常想要一個fragment同另外一個通訊,好比須要根據用戶的行爲來改變內容。全部的fragment到fragment的通訊是經過關聯的activity實現的,兩個fragment之間毫不應該直接通訊的。

   定義一個接口

      爲了實現fragment和activity之間的通訊,能夠在fragment中定義一個接口,在activity中實現這個接口。fragment捕獲這個接口的實如今它的onAttach()生命週期方法中,而後調用這個接口方法來實現和activity的通訊。

       example following: 

       

public class HeadlinesFragment extends ListFragment {
    OnHeadlineSelectedListener mCallback;

    // Container Activity must implement this interface
    public interface OnHeadlineSelectedListener {
        public void onArticleSelected(int position);
    }

    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
        
        // This makes sure that the container activity has implemented
        // the callback interface. If not, it throws an exception
        try {
            mCallback = (OnHeadlineSelectedListener) activity;
        } catch (ClassCastException e) {
            throw new ClassCastException(activity.toString()
                    + " must implement OnHeadlineSelectedListener");
        }
    }
    
    ...
}

     如今這個fragment能夠和activity之間通訊了,經過調用onArticleSelected()方法(或者接口中的其餘方法)。

     例以下面的方法將list的點擊事件傳遞給父activity。

   @Override
    public void onListItemClick(ListView l, View v, int position, long id) {
        // Send the event to the host activity
        mCallback.onArticleSelected(position);
    }

     實現接口

    爲了從fragment中接收事件回調,承接fragment的activity必須實現這個fragment中的接口,

public static class MainActivity extends Activity
        implements HeadlinesFragment.OnHeadlineSelectedListener{
    ...
    
    public void onArticleSelected(int position) {
        // The user selected the headline of an article from the HeadlinesFragment
        // Do something here to display that article
    }
}

     向fragment傳輸消息

      承接的activity能夠向fragment傳遞消息經過捕獲fragment的實例,能夠經過findFragmentById()來捕獲fragment實例,而後直接調用fragment的公共方法。

      例如,想象一下,展現在上面的activity可能包含一個fragment,而這個fragment展現的內容依賴於activity回調方法所返回的數據。在這種狀況下,這個activity能夠傳遞接收到的數據給這個fragment,以此來展現內容。

public static class MainActivity extends Activity
        implements HeadlinesFragment.OnHeadlineSelectedListener{
    ...

    public void onArticleSelected(int position) {
        // The user selected the headline of an article from the HeadlinesFragment
        // Do something here to display that article

        ArticleFragment articleFrag = (ArticleFragment)
                getSupportFragmentManager().findFragmentById(R.id.article_fragment);

        if (articleFrag != null) {
            // If article frag is available, we're in two-pane layout...

            // Call a method in the ArticleFragment to update its content
            articleFrag.updateArticleView(position);
        } else {
            // Otherwise, we're in the one-pane layout and must swap frags...

            // Create fragment and give it an argument for the selected article
            ArticleFragment newFragment = new ArticleFragment();
            Bundle args = new Bundle();
            args.putInt(ArticleFragment.ARG_POSITION, position);
            newFragment.setArguments(args);
        
            FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

            // Replace whatever is in the fragment_container view with this fragment,
            // and add the transaction to the back stack so the user can navigate back
            transaction.replace(R.id.fragment_container, newFragment);
            transaction.addToBackStack(null);

            // Commit the transaction
            transaction.commit();
        }
    }
}
相關文章
相關標籤/搜索