android Fragments详解七:fragement示例

下例中实验了上面所讲的所有内容。此例有一个activity，其含有两个fragment。一个显示莎士比亚剧的播放曲目，另一个显示选中曲目的摘要。此例还演示了如何跟据屏幕大小配置fragment。

主activity创建layout。

[java] view plaincopyprint?

1. @Override  
2. protectedvoid onCreate(Bundle savedInstanceState) {  
3.    super.onCreate(savedInstanceState);  
4.   
5.    setContentView(R.layout.fragment_layout);  
6. }  

@Override
protectedvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.fragment_layout);
}
主activity的layoutxml文档

[java] view plaincopyprint?

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:orientation="horizontal"  
3.     android:layout_width="match_parent" android:layout_height="match_parent">  
4.   
5.     <fragment class="com.example.android.apis.app.FragmentLayout$TitlesFragment"  
6.             android:id="@+id/titles" android:layout_weight="1"  
7.             android:layout_width="0px" android:layout_height="match_parent" />  
8.   
9.     <FrameLayout android:id="@+id/details" android:layout_weight="1"  
10.             android:layout_width="0px" android:layout_height="match_parent"  
11.             android:background="?android:attr/detailsElementBackground" />  
12.   
13. </LinearLayout>  

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

    <fragment class="com.example.android.apis.app.FragmentLayout$TitlesFragment"
            android:id="@+id/titles" android:layout_weight="1"
            android:layout_width="0px" android:layout_height="match_parent" />

    <FrameLayout android:id="@+id/details" android:layout_weight="1"
            android:layout_width="0px" android:layout_height="match_parent"
            android:background="?android:attr/detailsElementBackground" />

</LinearLayout>
系统在activity加载此layout时初始化TitlesFragment（用于显示标题列表），TitlesFragment的右边是一个FrameLayout，用于存放显示摘要的fragment，但是现在它还是空的，fragment只有当用户选择了一项标题后，摘要fragment才会被放到FrameLayout中。

然而，并不是所有的屏幕都有足够的宽度来容纳标题列表和摘要。所以，上述layout只用于横屏，现把它存放于ret/layout-land/fragment_layout.xml。

之外，当用于竖屏时，系统使用下面的layout，它存放于ret/layout/fragment_layout.xml：

[java] view plaincopyprint?

1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="match_parent" android:layout_height="match_parent">  
3.     <fragment class="com.example.android.apis.app.FragmentLayout$TitlesFragment"  
4.             android:id="@+id/titles"  
5.             android:layout_width="match_parent" android:layout_height="match_parent" />  
6. </FrameLayout>  

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <fragment class="com.example.android.apis.app.FragmentLayout$TitlesFragment"
            android:id="@+id/titles"
            android:layout_width="match_parent" android:layout_height="match_parent" />
</FrameLayout>

这个layout只包含TitlesFragment。这表示当使用竖屏时，只显示标题列表。当用户选中一项时，程序会启动一个新的activity去显示摘要，而不是加载第二个fragment。

下一步，你会看到Fragment类的实现。第一个是TitlesFragment，它从ListFragment派生，大部分列表的功能由ListFragment提供。

当用户选择一个Title时，代码需要做出两种行为，一种是在同一个activity中显示创建并显示摘要fragment，另一种是启动一个新的activity。

[java] view plaincopyprint?

1. public static class TitlesFragment extends ListFragment {  
2.     boolean mDualPane;  
3.     int mCurCheckPosition = 0;  
4.   
5.     @Override  
6.     public void onActivityCreated(Bundle savedInstanceState) {  
7.         super.onActivityCreated(savedInstanceState);  
8.   
9.         // Populate list with our static array of titles.  
10.         setListAdapter(new ArrayAdapter<String>(getActivity(),  
11.                 android.R.layout.simple_list_item_activated_1, Shakespeare.TITLES));  
12.   
13.         // Check to see if we have a frame in which to embed the details  
14.         // fragment directly in the containing UI.
      
15.         View detailsFrame = getActivity().findViewById(R.id.details);  
16.         mDualPane = detailsFrame != null && detailsFrame.getVisibility() == View.VISIBLE;  
17.   
18.         if (savedInstanceState != null) {  
19.             // Restore last state for checked position.  
20.             mCurCheckPosition = savedInstanceState.getInt("curChoice", 0);  
21.         }  
22.   
23.         if (mDualPane) {  
24.             // In dual-pane mode, the list view highlights the selected item.  
25.             getListView().setChoiceMode(ListView.CHOICE_MODE_SINGLE);  
26.             // Make sure our UI is in the correct state.  
27.             showDetails(mCurCheckPosition);  
28.         }  
29.     }  
30.   
31.     @Override  
32.     public void onSaveInstanceState(Bundle outState) {  
33.         super.onSaveInstanceState(outState);  
34.         outState.putInt("curChoice", mCurCheckPosition);  
35.     }  
36.   
37.     @Override  
38.     public void onListItemClick(ListView l, View v, int position, long id) {  
39.         showDetails(position);  
40.     }  
41.   
42.     /** 
43.      * Helper function to show the details of a selected item, either by 
44.      * displaying a fragment in-place in the current UI, or starting a 
45.      * whole new activity in which it is displayed. 
46.      */  
47.     void showDetails(int index) {  
48.         mCurCheckPosition = index;  
49.   
50.         if (mDualPane) {  
51.             // We can display everything in-place with fragments, so update  
52.             // the list to highlight the selected item and show the data.  
53.             getListView().setItemChecked(index, true);  
54.   
55.             // Check what fragment is currently shown, replace if needed.  
56.             DetailsFragment details = (DetailsFragment)  
57.                     getFragmentManager().findFragmentById(R.id.details);  
58.             if (details == null || details.getShownIndex() != index) {  
59.                 // Make new fragment to show this selection.  
60.                 details = DetailsFragment.newInstance(index);  
61.   
62.                 // Execute a transaction, replacing any existing fragment  
63.                 // with this one inside the frame.  
64.                 FragmentTransaction ft = getFragmentManager().beginTransaction();  
65.                 ft.replace(R.id.details, details);  
66.                 ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);  
67.                 ft.commit();  
68.             }  
69.   
70.         } else {  
71.             // Otherwise we need to launch a new activity to display  
72.             // the dialog fragment with selected text.
      
73.             Intent intent = new Intent();  
74.             intent.setClass(getActivity(), DetailsActivity.class);  
75.             intent.putExtra("index", index);  
76.             startActivity(intent);  
77.         }  
78.     }  

public static class TitlesFragment extends ListFragment {
    boolean mDualPane;
    int mCurCheckPosition = 0;

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        // Populate list with our static array of titles.
        setListAdapter(new ArrayAdapter<String>(getActivity(),
                android.R.layout.simple_list_item_activated_1, Shakespeare.TITLES));

        // Check to see if we have a frame in which to embed the details
        // fragment directly in the containing UI.
        View detailsFrame = getActivity().findViewById(R.id.details);
        mDualPane = detailsFrame != null && detailsFrame.getVisibility() == View.VISIBLE;

        if (savedInstanceState != null) {
            // Restore last state for checked position.
            mCurCheckPosition = savedInstanceState.getInt("curChoice", 0);
        }

        if (mDualPane) {
            // In dual-pane mode, the list view highlights the selected item.
            getListView().setChoiceMode(ListView.CHOICE_MODE_SINGLE);
            // Make sure our UI is in the correct state.
            showDetails(mCurCheckPosition);
        }
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        outState.putInt("curChoice", mCurCheckPosition);
    }

    @Override
    public void onListItemClick(ListView l, View v, int position, long id) {
        showDetails(position);
    }

    /**
     * Helper function to show the details of a selected item, either by
     * displaying a fragment in-place in the current UI, or starting a
     * whole new activity in which it is displayed.
     */
    void showDetails(int index) {
        mCurCheckPosition = index;

        if (mDualPane) {
            // We can display everything in-place with fragments, so update
            // the list to highlight the selected item and show the data.
            getListView().setItemChecked(index, true);

            // Check what fragment is currently shown, replace if needed.
            DetailsFragment details = (DetailsFragment)
                    getFragmentManager().findFragmentById(R.id.details);
            if (details == null || details.getShownIndex() != index) {
                // Make new fragment to show this selection.
                details = DetailsFragment.newInstance(index);

                // Execute a transaction, replacing any existing fragment
                // with this one inside the frame.
                FragmentTransaction ft = getFragmentManager().beginTransaction();
                ft.replace(R.id.details, details);
                ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
                ft.commit();
            }

        } else {
            // Otherwise we need to launch a new activity to display
            // the dialog fragment with selected text.
            Intent intent = new Intent();
            intent.setClass(getActivity(), DetailsActivity.class);
            intent.putExtra("index", index);
            startActivity(intent);
        }
    }
第二个fragment，DetailsFragment显示被选择的Title的摘要：

[java] view plaincopyprint?

1. public static class DetailsFragment extends Fragment {  
2.     /** 
3.      * Create a new instance of DetailsFragment, initialized to 
4.      * show the text at 'index'. 
5.      */  
6.     public static DetailsFragment newInstance(int index) {  
7.         DetailsFragment f = new DetailsFragment();  
8.   
9.         // Supply index input as an argument.  
10.         Bundle args = new Bundle();  
11.         args.putInt("index", index);  
12.         f.setArguments(args);  
13.   
14.         return f;  
15.     }  
16.   
17.     public int getShownIndex() {  
18.         return getArguments().getInt("index", 0);  
19.     }  
20.   
21.     @Override  
22.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
23.             Bundle savedInstanceState) {  
24.         if (container == null) {  
25.             // We have different layouts, and in one of them this  
26.             // fragment's containing frame doesn't exist.  The fragment  
27.             // may still be created from its saved state, but there is  
28.             // no reason to try to create its view hierarchy because it  
29.             // won't be displayed.  Note this is not needed -- we could  
30.             // just run the code below, where we would create and return  
31.             // the view hierarchy; it would just never be used.  
32.             return null;  
33.         }  
34.   
35.         ScrollView scroller = new ScrollView(getActivity());  
36.         TextView text = new TextView(getActivity());  
37.         int padding = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,  
38.                 4, getActivity().getResources().getDisplayMetrics());  
39.         text.setPadding(padding, padding, padding, padding);  
40.         scroller.addView(text);  
41.         text.setText(Shakespeare.DIALOGUE[getShownIndex()]);  
42.         return scroller;  
43.     }  
44. }  

public static class DetailsFragment extends Fragment {
    /**
     * Create a new instance of DetailsFragment, initialized to
     * show the text at 'index'.
     */
    public static DetailsFragment newInstance(int index) {
        DetailsFragment f = new DetailsFragment();

        // Supply index input as an argument.
        Bundle args = new Bundle();
        args.putInt("index", index);
        f.setArguments(args);

        return f;
    }

    public int getShownIndex() {
        return getArguments().getInt("index", 0);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        if (container == null) {
            // We have different layouts, and in one of them this
            // fragment's containing frame doesn't exist.  The fragment
            // may still be created from its saved state, but there is
            // no reason to try to create its view hierarchy because it
            // won't be displayed.  Note this is not needed -- we could
            // just run the code below, where we would create and return
            // the view hierarchy; it would just never be used.
            return null;
        }

        ScrollView scroller = new ScrollView(getActivity());
        TextView text = new TextView(getActivity());
        int padding = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                4, getActivity().getResources().getDisplayMetrics());
        text.setPadding(padding, padding, padding, padding);
        scroller.addView(text);
        text.setText(Shakespeare.DIALOGUE[getShownIndex()]);
        return scroller;
    }
}
如果当前的layout没有R.id.detailsView（它被用于DetailsFragment的容器），那么程序就启动DetailsActivity来显示摘要。

下面是DetailsActivity，它只是简单地嵌入DetailsFragment来显示摘要。

[java] view plaincopyprint?

1. public static class DetailsActivity extends Activity {  
2.   
3.     @Override  
4.     protected void onCreate(Bundle savedInstanceState) {  
5.         super.onCreate(savedInstanceState);  
6.   
7.         if (getResources().getConfiguration().orientation  
8.                 == Configuration.ORIENTATION_LANDSCAPE) {  
9.             // If the screen is now in landscape mode, we can show the  
10.             // dialog in-line with the list so we don't need this activity.  
11.             finish();  
12.             return;  
13.         }  
14.   
15.         if (savedInstanceState == null) {  
16.             // During initial setup, plug in the details fragment.  
17.             DetailsFragment details = new DetailsFragment();  
18.             details.setArguments(getIntent().getExtras());  
19.             getFragmentManager().beginTransaction().add(android.R.id.content, details).commit();  
20.         }  
21.     }  
22. }  

public static class DetailsActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        if (getResources().getConfiguration().orientation
                == Configuration.ORIENTATION_LANDSCAPE) {
            // If the screen is now in landscape mode, we can show the
            // dialog in-line with the list so we don't need this activity.
            finish();
            return;
        }

        if (savedInstanceState == null) {
            // During initial setup, plug in the details fragment.
            DetailsFragment details = new DetailsFragment();
            details.setArguments(getIntent().getExtras());
            getFragmentManager().beginTransaction().add(android.R.id.content, details).commit();
        }
    }
}
注意这个activity在检测到是竖屏时会结束自己，于是主activity会接管它并显示出TitlesFragment和DetailsFragment。这可以在用户在竖屏时显示在TitleFragment，但用户旋转了屏幕，使显示变成了横屏。