用Fragments创建动态UI（翻译）

有感于看了许多文章但最后都会忘得一干二净，遂将所看整理一下记录下来，希望能加深印象，也希望对读者略有帮助。

此处为翻译文章 原文链接 ： http://developer.android.com/training/basics/fragments/index.html

创建一个fragment 

我们可以将fragment看做是activity的一个模块化部分，他有自己的生命周期，接收自己的交互事件，并且当这个activity正在运行时，你也可以添加和删除这个模块，有点像是子activity，但是你却可以在不同的activities中重用它。

（如果你的app要求api级别>= 11，那你就可以直接使用android 框架内置的fragment，无需在使用支持库中的fragment）。

创建一个fragment 类

  通过继承fragment可以创建fragment类，并且实现其中的一些关键生命周期方法来插入自己app的逻辑代码，基本和activity相同。

其中一处不同是，当创建一个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中使用Fragment

通过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();
        }
    }
}