[Android Exercise]Fragment新闻客户端例子拆解PART.1—带你记忆Fragment的使用

把郭大大的新闻客户端例子从头到尾写一遍之后，理清了其中的思路。现在写下一篇例子的拆解，以供进一步理解和记忆。

********************************************************

来看一下整个页面架构的图示：

总体而言，左侧就是显示标题的Fragment，右侧就是显示具体内容的Fragment。通过限定符判断两个activity分别决定了采用单页模式还是双页模式。在单页模式下，两个碎片分别放入两个不同的Activity中，通过Intent跳转页面并传递参数；双页模式下，两个碎片被放入同一个Activity中，通过传递参数进行页面更新。

下面就开始逐步拆分整个客户端的例子吧。

***************************************************************

一、新建News类

在这个简易的客户端例子中，我们只需要新闻的标题和新闻的内容，因此新建News类，字段包括title和content。为了方便使用循环自动更改title和content，此处就不使用构造函数传参了，而是使用set方法设置。

public class News {
    private String title;
    private String content;

    public void setTitle(String title){
        this.title = title;}

    public void setContent(String content){
        this.content = content;}

    public String getTitle(){
        return title;}

    public String getContent(){
        return content;}
}

二、完成并加载两个基础Fragment的布局

1.右侧碎片详情页的布局：right_detail_fragment

新建right_detail_fragment.xml，Root Element选择使用ScrollView而非书中例子所使用的RelativeLayout，主要是考虑到万一新闻内容超出页面范围，使用ScrollView则可以让页面进行滑动，不会造成被裁切的情况。

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/layout_1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_margin="10dp">

            <TextView
                android:id="@+id/text_detail_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:background="#ccc"
                android:layout_marginTop="10dp"/>

            <TextView
                android:id="@+id/text_detail_content"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="10dp"/>
        </LinearLayout>
        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#ccc"
            android:layout_toLeftOf="@id/layout_1"/>
    </RelativeLayout>
</ScrollView>

这段代码中没有对样式给出太多要求，在做的时候可以手动添加各种不同的样式随你喜欢~

※ScrollView中只允许拥有一个子控件，因此SrollView中不可以包含两个或两个以上控件。但SrollView的子控件则无要求，因此一般使用会把LinearLayout嵌进SrollView中，

此处我使用的是RelativeLayout。

这是我调整完样式后得到的预览图：

2.左侧碎片标题页的布局：left_title_fragment

左侧使用RecyclerView去显示所有的标题，因此别忘了先导入RecyclerView的依赖库。

新建left_title_fragment.xml，RootElement选择LinearLayout，然后嵌入RecyclerView。

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" 
    android:layout_height="match_parent"
    android:orientation="vertical">
    
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview_title"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
    </android.support.v7.widget.RecyclerView>

</LinearLayout>

布置好了RecyclerView以后，当然也需要布置它子项的布局。新建left_title_item.xml，RootElement并没有按照书上直接使用TextView，而是使用了一个LInearLayout，毕竟我想在RecyclerView的每个子项中添加一条分隔线。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/text_item_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:layout_margin="10dp"
        android:maxLines="1"
        android:ellipsize="end"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#ccc"/>
</LinearLayout>

这里要注意的是，这个布局只是用于RecyclerView中的一个子项的布局，因此注意LinearLayout和TextView的高度都不能设定成match_parent，否则结果将会变成每显示一个子项都需要翻一页，也就是一屏只显示一个子项。

TextView中的maxLines属性表示最多只允许文本出现一行。如果缺少了这个属性，如果标题过长，就会导致这个子项所占的高度随着文本行数的增多而变大，就没有那么美观了。而ellipsize属性则表示如果一行过长，将会省略哪一部分内容，可选择的属性有end（省略号在末尾进行省略）、marquee（文本滚动显示）、middle（省略号在中间进行省略）、start（省略号在开头进行省略）。

3.加载两个碎片的布局：LeftTitleFragment和RightDetailFragment

新建LeftTitleFragment，继承于Fragment。父类输入Fragment的时候会提示两个库，一个是v4库，一个是app库。这里我们要使用v4库的Fragment，以保证在低版本系统中Fragment不会令程序崩溃。

重写OnCreatView方法，将已经编写好的左侧碎片布局加载进来，如下：

public class LeftTitleFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.left_title_fragment, container, false);
        return view;
    }
}

※一定要注意，此处使用inflate加载布局的时候必须使用3个参数，不可忽略第三个参数！详情可回顾上一篇博文。RightDetailFragment加载右侧碎片布局方法和LeftTitleFragment相同。

到这里为止，第一部分工作已经完成了！休息一下，然后开始完成第二部分吧！