一、前言
<font face = 黑体>Android 在 Android 3.0（API 级别 11）中引入了 Fragment，次要目标是为大屏幕（如平板电脑）上更加动静和灵便的界面设计提供反对。因为平板电脑的屏幕尺寸远胜于手机屏幕尺寸，因此有更多空间可供组合和替换界面组件。
<font face = 黑体>例如，新闻利用能够应用一个片段在左侧显示文章列表，应用另一个片段在右侧显示文章，两个片段并排显示在一个 Activity 中，每个片段都领有本人的一套生命周期回调办法，并各自解决本人的用户输出事件。因而，用户无需应用一个 Activity 来抉择文章，而后应用另一个 Activity 来阅读文章，而是能够在同一个 Activity 内抉择文章并进行浏览，如下图中的平板电脑布局所示。
<font face = 黑体>咱们明天要实现的例子来自《第一行代码第三版》 Fragment 相干章节，只是原文是用 Kotlin 实现的，我用 Java 实现的。
二、实例展现
2.1、手机上成果
<font face = 黑体>能够看到手机上新闻列表和新闻内容是在不同的界面的。
2.2、平板上成果
<font face = 黑体>在平板上的话，右边是新闻列表，左边就是新闻内容界面了。我这里用的是夜神模拟器，将其调成平板模式就能够了。
三、次要实现步骤
<font face = 黑体>我这里就写了几个次要的步骤，并非所有的，展现的源码也不是全的，不过残缺的源码我曾经上传至 github，在文末给了地址，能够间接下载。
3.1、新建新闻内容的布局文件 news_content_frag.xml
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/contentLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:visibility="invisible" > <TextView android:id="@+id/newsTitle" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="10dp" android:textSize="20sp" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="#000" /> <TextView android:id="@+id/newsContent" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:padding="15dp" android:textSize="18sp" /> </LinearLayout> <View android:layout_width="1dp" android:layout_height="match_parent" android:layout_alignParentStart="true" android:background="#000" /></RelativeLayout><font face = 黑体>新闻内容的布局次要分为新闻标题和新闻内容两局部，并且须要设置布局不可见，因为再 pad 模式下，如果没有点击新闻列表，默认是不显示新闻内容的。
3.2、新建 NewsContentFragment 类
public class NewsContentFragment extends Fragment { private LinearLayout contentLayout; private TextView newsTitle; private TextView newsContent; @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.news_content_frag, container, false); contentLayout = view.findViewById(R.id.contentLayout); newsTitle = view.findViewById(R.id.newsTitle); newsContent = view.findViewById(R.id.newsContent); return view; } public void refresh(String title, String content) { contentLayout.setVisibility(View.VISIBLE); // 刷新新闻的题目 newsTitle.setText(title); // 刷新新闻内容 newsContent.setText(content); }}<font face = 黑体>创立 NewsContentFragment 加载 news_content_frag.xml 布局，这样咱们新闻内容的 Fragment 咱们就创立好了。
3.3、新建新闻列表的布局文件 news_title_frag
<?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="match_parent"> <androidx.recyclerview.widget.RecyclerView android:id="@+id/newsTitleRecyclerView" android:layout_width="match_parent" android:layout_height="match_parent" /></LinearLayout><font face = 黑体>咱们这里显示新闻列表是用 RecyclerView 来实现的。
3.4、新建 NewsTitleFragment 类
public class NewsTitleFragment extends Fragment { private boolean isTwoPane = false; private RecyclerView newsTitleRecyclerView; @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.news_title_frag, container, false); } @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); newsTitleRecyclerView = getActivity().findViewById(R.id.newsTitleRecyclerView); if (getActivity().findViewById(R.id.newsContentLayout) != null) { isTwoPane = true; } LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity()); newsTitleRecyclerView.setLayoutManager(layoutManager); NewsAdapter adapter = new NewsAdapter(getNews(), getActivity()); newsTitleRecyclerView.setAdapter(adapter); } private List<News> getNews() { List<News> newsList = new ArrayList<>(); for (int i = 1; i <= 50; i++) { News news = new News("This is news title " + i, getRandomLengthString("This is news content" + i + ".")); newsList.add(news); } return newsList; } private String getRandomLengthString(String str) { int n = new Random().nextInt(20) + 1; StringBuilder sb = new StringBuilder(str); for (int i = 0; i < n; i++) { sb.append(str); } return sb.toString(); } class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.ViewHolder> { private List<News> newsList; private Context mContext; public NewsAdapter(List<News> newsList, Context mContext) { this.newsList = newsList; this.mContext = mContext; } @NonNull @Override public NewsAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { View view = LayoutInflater.from(mContext).inflate(R.layout.news_item, parent, false); final ViewHolder holder = new ViewHolder(view); holder.itemView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { News news = newsList.get(holder.getAdapterPosition()); if (isTwoPane) { // 如果是双页模式，则刷新NewsContentFragment中的内容 NewsContentFragment fragment = (NewsContentFragment) getActivity(). getSupportFragmentManager(). findFragmentById(R.id.newsContentFrag); fragment.refresh(news.getTitle(), news.getContent()); } else { // 如果是单页模式，则间接启动NewsContentActivity Intent intent = new Intent(getActivity(), NewsContentActivity.class); intent.putExtra("news_title", news.getTitle()); intent.putExtra("news_content", news.getContent()); startActivity(intent); } } }); return holder; } @Override public void onBindViewHolder(@NonNull ViewHolder holder, int position) { News news = newsList.get(position); holder.newsTitle.setText(news.getTitle()); } @Override public int getItemCount() { return newsList.size(); } public class ViewHolder extends RecyclerView.ViewHolder { public TextView newsTitle; public ViewHolder(@NonNull View itemView) { super(itemView); newsTitle = itemView.findViewById(R.id.newsTitle); } } }}<font face = 黑体>这里把 RecyclerView 的适配器用外部类来实现了，并且写了一个随机生成新闻内容条数的办法。
3.5、新建适配 pad 的双页布局 activity_main
<font face = 黑体>在跟 layout 同级的中央新建 layout-sw600dp 文件夹，这里的 sw 代表 smallwidth 的意思，当你的屏幕的相对宽度大于 600dp 时，屏幕就会主动调用 layout-sw600dp 文件夹外面的布局，在这个文件夹下新建 activity_news，具体代码如下：
<?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:id="@+id/newsTitleFrag" android:name="com.zjgsu.fragmentdemo.news.NewsTitleFragment" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" /> <FrameLayout android:id="@+id/newsContentLayout" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="3" > <fragment android:id="@+id/newsContentFrag" android:name="com.zjgsu.fragmentdemo.news.NewsContentFragment" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout></LinearLayout>四、源码
<font face = 黑体>源码曾经上传至 github，大家间接下载就能够了。