[Android--UI]用Fragments创建动态UI

简述

通过Fragment，相当于在一个activity中嵌入一个子activity以及其layout。其实和许多其他系统的UI设计一样，Fragment总觉得像是一个自定义UI组件的功能，即在Android中，可以通过Fragment来实现自定义的控件，而通过重用这些自定义控件来构建和定制适合自己应用的UI。
Fragment可以根据UI屏幕大小适配显示，如平板可能可以将多个Fragments一起显示了。可以将Fragment看做是一个activity的一个子模块。

创建Fragment类

和Activity类似，Fragment也需要创建一个.java文件，与activity不同的是，必须用onCreateView() 回调来定义该Fragment的layout。

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

用xml添加一个Fragment到activity

如果要将某个Fragment作为一个UI模组来重用。如下在一个activity的layout中添加了两个Fragment布局。

<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中就可以应用这个layout了：

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

不过这种在activity布局中放置Fragment模块的，在activity运行期间并不能将Fragment模块移除的。

灵活Fragment UI构建

与前面在activity布局中直接放置Fragment不同，用FragmentManager类可以在activity运行时对Fragment进行添加，移除，替换的操作：
- FragmentManager得创建FragmentTransaction来对Fragment进行添加，移除，替换的操作；
- 在activity的onCreate()方法中得添加初始的fragment(s)；
- 在activity布局中必须得有一个容器视图–container View，用来插入fragment(s)；

Fragment container

这里就是一个Fragment container：

<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活动过程中，可以动态的实现Fragment实例来替换这个Fragment container当中的内容，如下的处理是在Fragment container中add一个Fragment内容：

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有个addToBackStack()方法，顾名思义，即是在我们替换，或者从Fragment container移除某个Fragment时，如果待会还要再用到它，那么可以将它先addToBackStack()，这样这个Fragment就并不会被destroy掉，而只是stop掉了。
如下是替换掉Fragment container中的内容的code：

// Create fragment and give it an argument specifying the article it should show 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();

Fragments之间的通信

两个Fragment之间不能直接通信，它们的通信是通过activity来完成的。因此过程就变为Fragment和activity之间的通信了。
实现就是在Fragment内定义一个interface，然后在activity当中去实现这个interface。而后Fragment在它的onAttach()时获取activity实现的接口，然后Fragment通过调用该接口与Activity通信。这里觉得实现有点类似callback。
示例如何在Fragment内定义这么一个interface：

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上的list item被点击时，Fragment调用在activity中实现的接口，来送某些信息给activity，至于activity接下来如何处理这些信息，就由activity自行决定了：

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

如下是在activity中如何实现那个interface，并处理来自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
    }
}

前面是回调的方式，使得activity可以获取Fragment的消息，而activity要将消息发给Fragment时，只需要用findFragmentById()来获取Fragment实例，然后调用这个Fragment的方法即可。
如下是activity在收到前面的headlinesFragment的position消息后，需要将其送给另一个Fragment显示，而另一个Fragment可以已经显示在屏幕，或者因为屏幕尺寸太小而需要先将原Fragment替换为这个，再显示position信息：

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