关闭

Google 关于 管理Fragment通信的 示例APP 学习

标签: ui谷歌app
222人阅读 评论(0) 收藏 举报
分类:

Google - 如何管理Fragment并通信 的示例学习


今天在Google Training 上看了第一章的第四节,标题是 Building a Dynamic UI with Fragments 。看过以后学到了很多东西,以前关于Fragment之间的很多疑问也被解决,关于Fragment的创建,如何适配不同屏幕,Fragment之间如何进行通信等内容都进行了十分详细地讲解。因为只是Training,关于Fragment生命周期的讲解,Google爸爸放在API Guides里面,我还是和上次一样,嘿嘿。手痒了,下载了一下示例,看了看Google爸爸的代码,一看。。

内心独白:我去,一样的方法,完全不一样的写法。。而且人家的精炼好多,考虑的也好粥道(嘿嘿,我饿啦)。以前自己在Activity复用Fragment的时候,都是照搬网站的代码,心里祈祷着,千万不要出岔子啊,前往不要出岔子啊。现在看了Google爸爸的代码,是时候来一个小小小小的档次变化了,嘿嘿,下面就开始记录我学到东西。

这个示例APP的主要内容是,有两个Fragment,我们在Fragment A里面放文章的标题列表,在Fragment B里面相对应的文章内容。在屏幕较小的设备上,比如正常的手机,我们点击Fragment A 中列表的一项文章标题,Fragment B就会出现该文章的内容,但是如果在平板,这样屏幕比较大的设备上,我们点击Fragment A,右侧的Fragment B就会显示对应的内容。

恩,看完一大段话,好像和一般关于Fragment的讲解,没什么不同哦,哈哈,看着吧。就像上次讲Activity生命周期的APP示例一样,虽然内容一样,但看完之后却能在Google中学到很多,差距自在不言中。

我先把在两个不同设备上的APP运行图给大家看看:

  • 首先是在手机模拟器上运行的效果图:

这里写图片描述

这里写图片描述

  • 接下来是在平板上模拟器上运行的效果图,为了这个效果,本boy还千辛万苦地下载了平板的模拟器:

这里写图片描述

这里写图片描述

如果大家对这个示例感兴趣,可以点击这里下载,恩,效果很酷炫,下面我们开始代码的分析!


首先先让我们看看这个诡异的整体布局吧!

这里写图片描述

看Java代码部分还是还是很正常的,ArticleFragment 用来显示文章内容,HeadlinesFragment用于显示文章的标题列表, MainActivity把这两部分结合起来,Ipsum 用来存放一文章标题和内容的字符串资源。恩还可以哦。再往下看,我就惊了,这个APP连MainActivity的布局文件都不写么。。。。

我点开看了看artcle_vew.xml,里面是这样的:

<?xml version="1.0" encoding="utf-8"?>

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/article"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:textSize="18sp" />

只有一个TextView, 然后我又点开news_articles.xml,看了看:

<?xml version="1.0" encoding="utf-8"?>

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

很熟悉有没有,里面是一个用来替换Fragment的容器FrameLayout,那下面那个名字一样的后面有(large)的就应该是对于大屏幕设备的布局了。

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_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>

果然没错,我们看到里面放着两个fragment,ViewGroup是横向的线性布局,分别对应大平板的左边和右边,左边明白weight用法的人应该看出来,大屏幕的左边1/3是用来放文章标题列表的地方,大屏幕右边2/3的空间用来放显示文章内容的地方。

这个时候我有个疑问,在之前看Google教程的时候,我看到,对于屏幕尺寸为large的布局文件,我们应该要新建一个文件名为layout-large的文件夹,然后放一个名字相同但内容不同的布局文件,然后Android运行时根据设备屏幕大小自动加载啊,现在怎么没有啊,后面又(large)。好神奇,我搜了一下,了解原来Android Studio默认不显示带后缀是 -large 的文件夹,但是在我们点击相应的xml文件的时候上面的小横条也是会显示的,可以去上面的项目结构图看看,嘿嘿,小心机。

现在没有main.xml的疑问也烟消云散了,原来人家是直接用news_articles.xml,这样反而方便了很多呢。

好了,下面我们来看看Java代码的部分吧。首先看看 HeadlinesFragment 的代码(文章标题列表的Fragment):

public class HeadlinesFragment extends ListFragment {
    OnHeadlineSelectedListener mCallback;

    // The container Activity must implement this interface so the frag can deliver messages
    public interface OnHeadlineSelectedListener {
        /** Called by HeadlinesFragment when a list item is selected */
        public void onArticleSelected(int position);
    }

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

        // We need to use a different list item layout for devices older than Honeycomb
        int layout = Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB ?
                android.R.layout.simple_list_item_activated_1 : android.R.layout.simple_list_item_1;

        // Create an array adapter for the list view, using the Ipsum headlines array
        setListAdapter(new ArrayAdapter<String>(getActivity(), layout, Ipsum.Headlines));
    }

    @Override
    public void onStart() {
        super.onStart();

        // When in two-pane layout, set the listview to highlight the selected list item
        // (We do this during onStart because at the point the listview is available.)
        if (getFragmentManager().findFragmentById(R.id.article_fragment) != null) {
            getListView().setChoiceMode(ListView.CHOICE_MODE_SINGLE);
        }
    }

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

    @Override
    public void onListItemClick(ListView l, View v, int position, long id) {
        // Notify the parent activity of selected item
        mCallback.onArticleSelected(position);

        // Set the item as checked to be highlighted when in two-pane layout
        getListView().setItemChecked(position, true);
    }
}

首先定义了一个接口 OnHeadlineSelectedListener ,和 一个对应这个接口成员变量 mCallback,然后在 onAttach() 回调函数里面,完成接口的实现,和对应Activity进行绑定,恩,这样 HeadlinesFragment 就能通过 mCallback 向Activity发送消息了,如果不懂,可以看这篇(Google原装进口,绝对懂)。恩,我们继续往下看。

我看到 onCreate() 回调函数的时候惊了,Google爸爸就是厉害,在设置ListFragment的时候,人家不是先考虑用什么样式,而是先考虑设备的Android系统版本,就是这行代码:

        int layout = Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB ?
                android.R.layout.simple_list_item_activated_1 : android.R.layout.simple_list_item_1;

确保系统版本高于HONEYCOMB的设备能用更加酷炫的酷炫的东西,而低于该版本的设备,人家也给予了充分的考虑,好感人。咕~~(╯﹏╰)b,停!

然后因为这个HeadlinesFragment 继承ListFragment所以,要setListAdapter,Ipsum是专门放资源的文件,我简单贴一下:

public class Ipsum {

    static String[] Headlines = {
        "Article One",
        "Article Two"
    };

    static String[] Articles = {
        "Article One\n\nExcepteur pour-over occaecat squid biodiesel umami gastropub, nulla laborum salvia dreamcatcher fanny pack. Ullamco culpa retro ea, trust fund excepteur eiusmod direct trade banksy nisi lo-fi cray messenger bag. Nesciunt esse carles selvage put a bird on it gluten-free, wes anderson ut trust fund twee occupy viral. Laboris small batch scenester pork belly, leggings ut farm-to-table aliquip yr nostrud iphone viral next level. Craft beer dreamcatcher pinterest truffaut ethnic, authentic brunch. Esse single-origin coffee banksy do next level tempor. Velit synth dreamcatcher, magna shoreditch in american apparel messenger bag narwhal PBR ennui farm-to-table.",
        "Article Two\n\nVinyl williamsburg non velit, master cleanse four loko banh mi. Enim kogi keytar trust fund pop-up portland gentrify. Non ea typewriter dolore deserunt Austin. Ad magna ethical kogi mixtape next level. Aliqua pork belly thundercats, ut pop-up tattooed dreamcatcher kogi accusamus photo booth irony portland. Semiotics brunch ut locavore irure, enim etsy laborum stumptown carles gentrify post-ironic cray. Butcher 3 wolf moon blog synth, vegan carles odd future."
    };
}

。。。比较多,原谅原谅

我们接着看发现,在onStart()的回调函数里面,Google考虑到大屏幕的UI优化,我解读这个函数的意思是,如果能找到article_fragment ,说明是大屏幕,我们就高亮显示左侧Fragment选中的部分。如果不是,就不用设置了,因为设置了也要被替换,又看不到。而且人家把这个设置放在了 onStart() 这个函数里,是因为这个Fragment的生命周期回调函数在onCreate()方法之后被执行,而这个时候布局肯定已经加载好了,所以我们可以安全的在这个方法里面进行设置!

再往下看就是这个 onListItemClick() 函数了,这个函数是List item被点击后的回调函数,方法内通过 mCallback 发送消息给Activity,为什么不是显示文章的Fragment,而是Activity,因为Google爸爸说任何两个Fragment都不能直接联系!不懂还是请看这篇

好了,让我们再看看显示文章内容的 ArticleFragment,先展示它的代码:

public class ArticleFragment extends Fragment {
    final static String ARG_POSITION = "position";
    int mCurrentPosition = -1;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, 
        Bundle savedInstanceState) {

        // If activity recreated (such as from screen rotate), restore
        // the previous article selection set by onSaveInstanceState().
        // This is primarily necessary when in the two-pane layout.
        if (savedInstanceState != null) {
            mCurrentPosition = savedInstanceState.getInt(ARG_POSITION);
        }

        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.article_view, container, false);
    }

    @Override
    public void onStart() {
        super.onStart();

        // During startup, check if there are arguments passed to the fragment.
        // onStart is a good place to do this because the layout has already been
        // applied to the fragment at this point so we can safely call the method
        // below that sets the article text.
        Bundle args = getArguments();
        if (args != null) {
            // Set article based on argument passed in
            updateArticleView(args.getInt(ARG_POSITION));
        } else if (mCurrentPosition != -1) {
            // Set article based on saved instance state defined during onCreateView
            updateArticleView(mCurrentPosition);
        }
    }

    public void updateArticleView(int position) {
        TextView article = (TextView) getActivity().findViewById(R.id.article);
        article.setText(Ipsum.Articles[position]);
        mCurrentPosition = position;
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);

        // Save the current article selection in case we need to recreate the fragment
        outState.putInt(ARG_POSITION, mCurrentPosition);
    }
}

先看成员变量,一个常量静态字符串,一个指示点击位置的变量,没啥好说的。

但是 onCreate() 又开始惊艳了,它比我多了 if (savedInstanceState != null) 这个判断,几天前看过Google 的教程之后越来越发现这个的重要性,savedInstanceState 是在Activity销毁的时候恢复之前视图层次管理和一些View的内容的,比如你上次在平板上点的是C文章,下次回来继续看,人家会继续给你显示C文章。而且,不只是你主动销毁,可能是偶然销毁,比方说,你旋转了一下屏幕,这也算销毁,因为如果有分别对应横向和纵向的两种layout文件,为了要去重新加载不同的布局文件,Activity也会被销毁,这个时候我们必须要恢复啊!不过这点很遗忘,学习。

然后是 onStart() 回调函数,不得不说Google爸爸考虑就是周到好多,我们看这个代码:

    @Override
    public void onStart() {
        super.onStart();

        // During startup, check if there are arguments passed to the fragment.
        // onStart is a good place to do this because the layout has already been
        // applied to the fragment at this point so we can safely call the method
        // below that sets the article text.
        Bundle args = getArguments();
        if (args != null) {
            // Set article based on argument passed in
            updateArticleView(args.getInt(ARG_POSITION));
        } else if (mCurrentPosition != -1) {
            // Set article based on saved instance state defined during onCreateView
            updateArticleView(mCurrentPosition);
        }
    }

它的意思是,如果Fragment启动的时候传了参数进来,我们就显示对应的内容,这个比较简单,第二个else if 什么意思呢?

其实它的意思是,虽然我没有参数传递进来,但是我是双平板模式启动的(我们可以想象,如果启动,要么是一开始就是两个fragment一起显示了,要么是传个参数,然后启动,因为没有参数,所以只能是大屏幕的情况了,因为我的表述很差劲,所以不懂还是自己想想吧,一般想想也就懂了),所以我之前可能保存了 运行实例,如果保存了,在 onCreate() 回调函数里面,会更新 mCurrentPosition 变量,让他代表上次离开的文章标号,所以我直接显示就好,如果这种情况也不是,那就空白就好啦!

然后 updateArticleView() 函数是更新Activity中的内容,然后 onSaveInstanceState() 方法是在Activity要销毁的时候保存 mCurrentPosition 变量的值,用于下次使用。

最后,让我们再来看看MainActivity的内容吧。

先说明一点,一般良好的代码风格是不会像我贴出来的示例这样写一大推注释的,因为这样不方便我们快速浏览代码的整体结构,但是这是教程啊,呵呵哒~

老规矩:

public class MainActivity extends FragmentActivity 
        implements HeadlinesFragment.OnHeadlineSelectedListener {

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.news_articles);

        // Check whether the activity is using the layout version with
        // the fragment_container FrameLayout. If so, we must add the first fragment
        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();
        }
    }

    public void onArticleSelected(int position) {
        // The user selected the headline of an article from the HeadlinesFragment

        // Capture the article fragment from the activity layout
        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 {
            // If the frag is not available, 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();
        }
    }
}

好了,我们按惯例看看Google爸爸一直惊艳我的 onCreate() 函数,它先检查是不是正常只显示一个Fragment的设备,如果不是,直接加载 -large 的布局文件显示 Fragment 就完事了,但是如果是,要先有这么一句话 if (savedInstanceState != null) ,它的注释说明了一下,它说:如果我们之间已经由一个运行示例,我么你不需要做什么应该,可以直接返回(因为Android会自动帮我们恢复),负责的话,会造成 Fragment 的重叠,没错,就是这个万恶的Fragment重叠,原来这个原因。以前我苦苦百度,哭出一口老血也无济于事。

然后就是加载标题 HeadlinesFragment,然后那个 setArguments() 是为了什么,我看不懂,然后显示出来就可以了。

接下来就是实现 HeadlinesFragment 接口 方法 onArticleSelected,来处理 HeadlinesFragment 传来的事件,这里是用户点击的标题位置 ,还是,先看是不是平板之类的大屏幕设备,如果是,ArticleFragment 示例已经存在了,如果不是那就要我们手动创建,然后把显示的文章标号作为参数穿进去,替换,加载显示。对了,别忘了把Fragment添加返回堆栈,就是调用这个方法 addToBackStack(),这样可以保证用户点击返回键以后,之前的Fragment会被重新加载,而不会被销毁。也是解决了之前的一个小疑问,嘿嘿。


好了,手都打酸了,本boy休息去了

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:14979次
    • 积分:661
    • 等级:
    • 排名:千里之外
    • 原创:52篇
    • 转载:1篇
    • 译文:1篇
    • 评论:4条
    最新评论