关于android:Fragment-实现简易新闻界面适配手机与Pad

24次阅读

共计 6597 个字符，预计需要花费 17 分钟才能阅读完成。

一、前言

<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
发表至： android
2020-10-13
 0
关于android:个推发布Android13适配攻略开发者请查收
关于android:Android-更新版本改变聚焦于安全与便捷操作
关于android:Android-Jetpack-更新一览
关于android:Android入门教程-Fragment-基础概念