Fragment——建立灵活动态的UI

Building a Flexible UI

When designing your application to support a wide range of screen sizes, you can reuse your fragments in different layout configurations to optimize the user experience based on the available screen space.

For example, on a handset device it might be appropriate to display just one fragment at a time for a single-pane user interface. Conversely, you may want to set fragments side-by-side on a tablet which has a wider screen size to display more information to the user.

 

Figure 1. Two fragments, displayed in different configurations for the same activity on different screen sizes. On a large screen, both fragments fit side by side, but on a handset device, only one fragment fits at a time so the fragments must replace each other as the user navigates.

The FragmentManager class provides methods that allow you to add, remove, and replace fragments to an activity at runtime in order to create a dynamic experience.

Add a Fragment to an Activity at Runtime

Rather than defining the fragments for an activity in the layout file—as shown in the previous lesson with the<fragment> element—you can add a fragment to the activity during the activity runtime. This is necessary if you plan to change fragments during the life of the activity.

To perform a transaction such as add or remove a fragment, you must use the FragmentManager to create aFragmentTransaction, which provides APIs to add, remove, replace, and perform other fragment transactions.

If your activity allows the fragments to be removed and replaced, you should add the initial fragment(s) to the activity during the activity's onCreate() method.

An important rule when dealing with fragments—especially when adding fragments at runtime—is that your activity layout must include a container View in which you can insert the fragment.

The following layout is an alternative to the layout shown in the previous lesson that shows only one fragment at a time. In order to replace one fragment with another, the activity's layout includes an empty FrameLayoutthat acts as the fragment container.

Notice that the filename is the same as the layout file in the previous lesson, but the layout directory does nothave the large qualifier, so this layout is used when the device screen is smaller than large because the screen does not fit both fragments at the same time.

res/layout/news_articles.xml:

<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" />

Inside your activity, call getSupportFragmentManager() to get a FragmentManager using the Support Library APIs. Then call beginTransaction() to create a FragmentTransaction and call add() to add a fragment.

You can perform multiple fragment transaction for the activity using the same FragmentTransaction. When you're ready to make the changes, you must call commit().

For example, here's how to add a fragment to the previous layout:

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

Because the fragment has been added to the FrameLayout container at runtime—instead of defining it in the activity's layout with a <fragment> element—the activity can remove the fragment and replace it with a different one.

Replace One Fragment with Another

The procedure to replace a fragment is similar to adding one, but requires the replace() method instead ofadd().

Keep in mind that when you perform fragment transactions, such as replace or remove one, it's often appropriate to allow the user to navigate backward and "undo" the change. To allow the user to navigate backward through the fragment transactions, you must call addToBackStack() before you commit theFragmentTransaction.

Note: When you remove or replace a fragment and add the transaction to the back stack, the fragment that is removed is stopped (not destroyed). If the user navigates back to restore the fragment, it restarts. If youdo not add the transaction to the back stack, then the fragment is destroyed when removed or replaced.

Example of replacing one fragment with another:

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

The addToBackStack() method takes an optional string parameter that specifies a unique name for the transaction. The name isn't needed unless you plan to perform advanced fragment operations using theFragmentManager.BackStackEntry APIs.

如果我们的APP设计成要支持范围广泛的屏幕尺寸时，在可利用的屏幕空间内，我们可以通过在不同的布局配置中重用fragment来优化用户体验。

比如，一个手持设备可能适合一次只有一个fragment的单面板用户交互。而在更大屏幕尺寸的平板电脑上，我们可能更想要两个fragment并排在一起，用来向用户展示更多信息.

图1：同一个activity在不同屏幕尺寸中采用不同的配置来展示两个fragment。在平板上，两个fragment被并排放置，而在手机上，一次只显示一个fragment，所以在用户使用时，两个fragment需要切换。

为实现来灵活的用户体验，FragmentManager类提供了一些方法可以在activity运行时对fragment进行添加，移除，替换等操作。

在activity运行时添加fragment

比起像上节课说的用<fragment>标签在activity的布局文件中定义fragment,我们还可以在activity运行时动态添加fragment，如果打算在activity的生命周期内替换fragment，你只能选择动态添加。

使用 FragmentManager 创建一个FragmentTransaction对象, 可以对fragment进行增加、移除、替换以及其它一些操作的APIs。

如果我们想要在activity中对fragment进行移除或者替换，应该在activity的onCreate()方法中添加初始化fragment(s).

对于那些在运行时添加的fragment有一个很重要的规则，就是在布局中必须有一个父容器View，fragment的layout将会放在这个view里面。

下面展示一个供大家参考的布局，它用来承接上节课展示的一次只显示一个fragment的布局。为了替换fragment，这个Activity的布局包含了一个空的 FrameLayout作为fragment的容器。

注意文件名与上节课的布局一样，但是文件目录没有large标识， 所以这一布局将会在比large小的屏幕上被使用，因为该屏幕无法满足同时放置两个fragments。

res/layout/news_articles.xml:

<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中，用Support Library APIs调用 getSupportFragmentManager()方法获取FragmentManager 对象，然后调用 beginTransaction() 方法创建一个FragmentTransaction对象，然后调用add()方法添加一个fragment.

可以使用同一个 FragmentTransaction进行多次fragment事务。完成这些变化操作，准备开始执行改变时，必须调用commit()方法。

下例显示了如何添加一个fragment到之前的layout中

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是以在activity运行时动态添加的方式取代了在XML布局中用<fragment>定义的方式，所以fragment可以被移除、被替换。

替换Fragment

替换fragment的过程类似于添加过程，只需要将add()方法替换为 replace()方法。

记住：当你操作fragment事务的时候，像替换和移除，事务会随着用户的操作分配给用户按后退键以“撤销”当前状态的权利，如果想要通过FragmentTransaction允许用户使用后退键，你要在提交事务前调用addToBackStack()方法。

Note：当移除或者替换一个fragment并把它放入返回栈中时，被移除的fragment的生命周期是stopped(不是destoryed).当用户返回重新恢复这个fragment,它就重启了。如果没有把fragment放入返回栈中，那么当它被移除或者替换时，其生命周期是destoryed。

下面是一个fragment替换的例子

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

addToBackStack()方法提供了一个可选的String参数为事务指定了一个唯一的名字。除非打算用FragmentManager.BackStackEntry APIs来进行一些高级的fragments操作，否则这个参数不是必须的。