一、前言
<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，大家直接下载就可以了。
android
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。