本文翻译自Android developer网站上面,原文参考:Building a Dynamic UI with Fragments
当我们需要动态的多界面切换的时候,就需要将UI元素和Activity融合成一个模块。在2.3中我们一般通过各种Activity中进行跳转来实现多界面的跳转和单个界面动态改变。在4.0或以上系统中就可以使用新的特性来方便的达到这个效果--Fragment类。Fragment类似一个嵌套Activity,可以定义自己的layout和自己的生命周期。
多个Fragment可以放在一个Activity中(所以上面讲到类似一个嵌套Activity),而这个类可以对这些Fragment进行配置以适应不同的屏幕尺寸(比如平板和手机)。
下面将向您讲述如何创建通过Fragment向用户提供一个动态的体验,并且还可以针对不同的屏幕尺寸做优化,给用户提供更好的使用体验。该特性可以运行在Android1.6上面(当然需要google库的支持)。(all while continuing to support devices running versions as old as Android 1.6.这个真心没搞懂,E文好的同学指点下)
Android支持库是一个jar文件,使用这个支持库可以让我们在低版本上运行高版本的特性(比如Fragment并非1.6的特性,但是通过库的引入,我们可以将包含fragment的程序运行在1.6上面,保证程序兼容性)。
步骤:
1. 通过SDK Manager下载Android Support Package。
2. 在项目代码顶层创建libs文件夹,并将你需要的jar库文件拷贝到libs里面去。
3. 更新manifest文件,设置如下
android:minSdkVersion="4" android:targetSdkVersion="15" />
为了确保没有在旧的系统上面使用新的api特性,却要在使用Fragment的文件中包含如下内容:
import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager;应该声明FragmentActivity(而不是Activity)来包含Fragments。
我们可以将Fragment当成是一个独立的Activity,它有自己独立的生命周期、获取单独的触发事件,并且在Activity运行的时候可以动态的移除或者添加Fragment。更有趣的是你可以在其他地方重用这个Fragment。本节将展示通过引入支持库,通过继承Fragment来在低版本(最低为1.6版)上运行包含Fragment的程序,保证程序的兼容性。
创建Fragment类
就像创建Activity类一样,继承Fragment,实现一些生命周期中的关键函数,并且记得把你自己的功能代码放到里面去。创建一个Fragment,必须使用onCreateView()定义他的layout布局文件。实际上这是让一个Fragment能够运行起来的唯一一个回调函数,看看下面的例子:
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简单多了,不是吗。当然,就像Activity一样,Fragment也应该实现其他生命周期中的函数,这样我们才可以实现对他的添加删除。举例来说,当activity收到onPause()方法调用的时候,它里面的Fragment同样会被调用到onPause(),所以看好机会,在Fragment里面的onPause()里面放入你写的代码吧。
当重用Fragment的时候,每一个实例化的Fragment必须依附于一个父FragmentActivity,我们可以通过在这个父活动的布局文件xml中定义fragment。
下面是一个将两个Fragment添加到一个活动中的例子
res/layout-large/news_articles.xml:
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
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" />
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" />
看到没有,其实跟一般的添加edittext空间没有任何区别,很简单吧。
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); } }Note:通过在xml中定义fragment的方式,我们不能在运行时移除fragment。如果我们想要通过切换fragments来跟用户有更好的互动,那么就需要在activity启动的时候定义fragment了。
当我们针对各种不同屏幕尺寸的设备设计应用程序的时候,我们可以在不同的布局文件中重用fragments来让客户体验最优化。
比如在平板和手机上,当使用fragment时,表现可能就完全不一样。平板上面我们可以将前后的两个Fragment都显示在屏幕上(因为屏幕空间足够显示了,而且不至于让屏幕空间太空),而在手机上这两个Fragment只能进行切换显示了,因为手机屏幕空间太小,只能够一次显示一屏。图片如下:
我们可以用类FragmentManager提供一些方法,在运行时对activity中的一些fragments进行添加、移除、覆盖操作,来提供给客户一个动态的更优的体验。
在运行时添加一个Fragment到Activity
上面一节的在activity的布局文件(layout xml)中添加Fragment的方法我们已经知道了。现在我们将学习另外一种方式,这种方式允许我们在运行时动态的显示和隐藏fragment。为了达到在activity中动态管理Fragment,我们需要用到FragmentManager,并且通过它创建FragmentTransaction(提供针对Fragment操作的一些列api,add/attach/detach/hide等)。
如果需要在activity中动态的移除或者替换fragments,我们就需要在onCreate函数中将初始化的fragments加入到该activity中。在处理Fragments时,特别是在运行中动态加入的fragments,有一个很重要的规则就是fragment必须有一个容器View,来容纳fragments的layout布局。
下面的layout是针对前面一节内容的替代,每次只显示一个fragment。为了替换当前的fragment,这个activity的layout必须包含一个FrameLayout用来当做fragment容器。
注意:该布局文件文件名是跟上节一样,但是layout文件夹并没有large修饰,所以你懂的。(如果不懂的话也不要紧。解释:因为没有large修饰,所以这个layout是用在比large小的屏幕上,这样屏幕每次只能显示一个fragment了,不能像上图的平板那样显示两个fragment)。
res/layout/news_articles.xml:
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内,用getSupportFragmentManager()函数获取FragmentManager。使用beginTransaction创建一个FragmentTransaction,并且调用add()函数添加一个Fragment。我们可以用FragmentTransaction执行多次fragment相关的操作,当我们准备切换的时候,调用函数call()就可以了。
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 an instance of ExampleFragment 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(); } } }因为是在运行时加入到FrameLayout容器中,并不是写死在xml中,所以activity能够移除、替换该fragment。
切换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的时候需要用到。
为了重用Fragment UI,我们就需要将该Fragment建立成一个可以自包含(自闭)的系统,拥有自己的layout和行为。一旦定义了这些可重用的fragments,就可以将他们绑定到一个activity上,实现全部的活动UI。很多时候我们想要在两个fragments间进行通信(例如根据用户输入改变内容),所有的Fragment间通信都是通过他们所依附的Activity,他们之间永远不能够直接通信。
定义一个接口
为了允许一个Fragment跟包含他的Activity通信,我们可以在Fragment类中定义一个接口,并且在Activity内实现。Fragment在onAttach()函数里面捕获接口实现,并且调用接口方法和Activity通信。(上面都说了Fragment间只能通过Activity进行通信了。)
看看下面的Fragment和Activity通信的例子:
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可以通过onArticleSelected()函数,将消息传递到到Activity中。通过使用OnHeadlineSelectedListener的实例达到传递的目的。
,将该事件传递给它所依附的父Activity。
@Override public void onListItemClick(ListView l, View v, int position, long id) { // Send the event to the host activity mCallback.onArticleSelected(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 } }
宿主Activity可以可以通过findFragmentById()函数获取Fragment实例,然后通过访问fragments的共有函数来将消息传递给Fragments。
在下面的实例中,宿主类将在回调函数中获取的信息传递到另外一个显示这些数据的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(); } } }