Android开发学习 -- Day10 Fragment实践-

作者: h080294 | 来源:发表于2018-03-23 10:57 被阅读49次

在Fragment的学习中，我们在了解Fragment设计的原理时，举了一个类似新闻的例子。在平板运行上时，展示如下图的左侧部分；在手机上运行时，展示如下图的右侧部分。

接下来，我们就要运用之前学习的知识，来编写一个简易的新闻客户端，并且要求它可以同时兼容平板和手机。

首先我们需要一个新闻的实体类，新建News类，代码如下：

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;
    }
}

News类还是很简单的，title表示新闻的标题，content表示新闻的具体内容。接着，我们新建一个新闻内容的布局文件news_content_frag.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <LinearLayout
        android:id="@+id/visibility_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/news_content_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_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/news_content"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:padding="15dp"
            android:textSize="18sp"/>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_alignParentStart="true"
        android:background="#000"/>

</RelativeLayout>

新闻内容的布局主要分为两个部分，一个是新闻的Title，另外一个是新闻的内容。我们利用一个高度为1dp、背景色为黑色的view来作为他们之间的分割线。

然后创建NewsContentFragment类，继承自Fragment，代码如下：

public class NewsContentFragment extends Fragment {

    private View view;

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

    public void refresh(String newsTitle, String newsContent) {
        View visibilityLayout = view.findViewById(R.id.visibility_layout);
        visibilityLayout.setVisibility(View.VISIBLE);
        TextView textTitle = view.findViewById(R.id.news_content_title);
        TextView textContent = view.findViewById(R.id.news_content);
        textTitle.setText(newsTitle);
        textContent.setText(newsContent);
    }

}

首先在onCreateView()中加载了我们刚才创建的news_content_frag布局。接下来提供了一个refresh()方法，这个方法用于将新闻的标题和内容显示在界面上。可以看到，通过findViewById()方法得到新闻标题和内容的控件，然后将方法传递进来的参数设置进去。

这样我们就创建好了新闻内容的布局和Fragment。但是考虑到我们还得用单页模式来适配手机屏幕，所以需要新建一个对应的Activity--NewsContentActivity。首先修改一下布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.johnhao.listviewdemo.Activity.NewsContentActivity">

    <fragment
        android:id="@+id/news_content_fragment"
        android:name="com.johnhao.listviewdemo.Fragment.NewsContentFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

我们在这里通过android:name直接引入com.johnhao.listviewdemo.Fragment.NewsContentFragment，这样也就相当于把news_content_frag布局的内容自动加了进来。接着修改Activity代码：

public class NewsContentActivity extends BaseActivity {

    public static void actionStart(Context context, String newsTitile, String newsContent) {
        Intent intent = new Intent(context, NewsContentActivity.class);
        intent.putExtra("news Title", newsTitile);
        intent.putExtra("news Content", newsContent);
        context.startActivity(intent);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_news_content);
        String newsTitle = getIntent().getStringExtra("news Title");
        String newsContent = getIntent().getStringExtra("news Content");
        setTitle(newsTitle);
        NewsContentFragment newsContentFragment = (NewsContentFragment)getSupportFragmentManager().findFragmentById(R.id.news_content_fragment);
        newsContentFragment.refresh(newsTitle, newsContent);
    }
}

首先我们提供了一个actionStart()方法用于启动NewsContentActivity。然后在onCreate()方法中通过Intent获取到传入的新闻和标题，接着调用FragmentManager的findFragmentById()方法得到NewsContentFragment的实例，最后调用NewsContentFragment中的refresh()方法，将新闻的标题和内容传进去，就可以把这些数据显示出来了。

搞定了新闻内容，接下来还需要一个新闻标题的列表的布局，新建news_title_frag.xml布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/news_title_recycle_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>

</LinearLayout>

内容很简单，只有一个RecyclerView用于展示新闻列表。既然用到RecyclerView，那么我们就需要创建子项布局，新建news_item.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/news_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:textSize="18sp"
        android:ellipsize="end"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:textColor="#aaaa00"/>
</LinearLayout>

子项布局也很简单，因为我们只需要存放新闻的标题，因此只有一个TextView。android:singleLine为true表示只能单行显示，android:ellipsize为end表示当文本超出控件长度，在尾部进行缩略。android:padding表示在控件周围加上补白。

紧接着我们创建一个NewsTitleFragment类用于展示新闻列表：

public class NewsTitleFragment extends Fragment {

    private Boolean isTwoPane;

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


    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        if (getActivity().findViewById(R.id.news_content_layout) != null) {
            isTwoPane = true;
        } else {
            isTwoPane = false;
        }
    }
}

在onCreateView()方法中加载了news_title_frag布局，然后主要在onActivityCreated()中，我们增加了一个双页展示的判断。判断的依据为是否能找到一个id为news_content_layout的布局，找的到就位双页展示，找不到就为单页展示。

这里用Android的限定符就可以实现，修改主Activity的布局文件：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/news_title_laytout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.johnhao.listviewdemo.Activity.NewsTitleActivity">

    <fragment
        android:id="@+id/news_title_fragment"
        android:name="com.johnhao.listviewdemo.Fragment.NewsTitleFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</FrameLayout>

在单页模式下，只会加载NewsTitleFragment。然后在res目录下新建目录layout-sw600dp，再在这个目录下新建一个一样名字的布局文件并添加代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/news_title_laytout"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.johnhao.listviewdemo.Activity.NewsTitleActivity">

    <fragment
        android:id="@+id/news_title_fragment"
        android:name="com.johnhao.listviewdemo.Fragment.NewsTitleFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>

    <FrameLayout
        android:id="@+id/news_content_layout"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3">

        <fragment
            android:id="@+id/news_content_fragment"
            android:name="com.johnhao.listviewdemo.Fragment.NewsContentFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </FrameLayout>

</LinearLayout>

可以看到在这里，同时引入了NewsTitleFragment和NewsContentFragment，并且将NewsContentFragment放在了一个id为news_content_layout的FrameLayout中。因此，能够找到这个id的时候，就是要展示双页的时候。

当然我们的工作仍然没有结束，别忘了还得在NewsTitleFragment通过RecycleView将新闻内容展示出来。这时就需要创建一个适配器，我们通过内部类的形式来实现。

public class NewsTitleFragment extends Fragment {

    private Boolean isTwoPane;
    ...
    class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.ViewHolder>{

        private List<News> mNewsList;

        public NewsAdapter(List<News> newsList) {
            mNewsList = newsList;
        }

        class ViewHolder extends RecyclerView.ViewHolder {
            TextView newsTitle;

            public ViewHolder(View itemView) {
                super(itemView);
                newsTitle = itemView.findViewById(R.id.news_title);
            }
        }

        @Override
        public NewsAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.news_item, parent, false);
            final ViewHolder holder = new ViewHolder(view);
            view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    News news = mNewsList.get(holder.getAdapterPosition());
                    if (!isTwoPane) {
                        // 如果是单页模式，则启动NewsContentActivity，传递当前的标题和内容
                        NewsContentActivity.actionStart(getActivity(), news.getTitle(), news.getContent());
                    } else {
                        // 如果是双页模式，刷新NewsContentFragment的内容
                        NewsContentFragment newsContentFragment = (NewsContentFragment) getFragmentManager().findFragmentById(R.id.news_content_fragment);
                        newsContentFragment.refresh(news.getTitle(), news.getContent());
                    }
                }
            });
            return holder;
        }

        @Override
        public void onBindViewHolder(NewsAdapter.ViewHolder holder, int position) {
            News news = mNewsList.get(position);
            holder.newsTitle.setText(news.getTitle());
        }

        @Override
        public int getItemCount() {
            return mNewsList.size();
        }
    }

RecycleView的用法我们应该很熟悉的，这里写成内部类主要是方便访问全局变量isTwoPane。主要看onCreateViewHolder()方法中注册的点击事件，通过isTwoPane判断模式，如果为单页模式，则启动NewsContentActivity来展示新闻内容；如果为双页模式，则先获取到NewsContentFragment的实例，然后调用NewsContentFragment的refresh()方法，传进新闻标题和内容，将内容展示出来。

适配器完成后，最后我们就可以往RecycleView填充数据了：

public class NewsTitleFragment extends Fragment {
    ...
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.news_title_frag, container, false);
        RecyclerView newsTitleRecycleView = view.findViewById(R.id.news_title_recycle_view);
        LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
        newsTitleRecycleView.setLayoutManager(layoutManager);
        NewsAdapter adapter = new NewsAdapter(getNews());
        newsTitleRecycleView.setAdapter(adapter);
        return view;
    }

    private List<News> getNews() {
        List<News> newsList = new ArrayList<>();
        for (int i = 1; i < 51; i++) {
            News news = new News();
            news.setTitle("This is news title " + i);
            news.setContent(getRandomLengthContent("This is news title " + i + "."));
            newsList.add(news);
        }
        return newsList;
    }

    private String getRandomLengthContent(String content) {
        Random random = new Random();
        int length = random.nextInt(20) + 1;
        StringBuilder builder = new StringBuilder();
        for (int i = 0; i < length; i++) {
            builder.append(content);
        }
        return builder.toString();
    }

在onCreateView()方法中添加了RecycleView的标准使用方法，在Fragment中使用RecycleView和在Activity中几乎是一模一样的。我们通过getNews()方法初始化了一些模拟新闻数据，同样使用了getRandomLengthContent()方法来生成一些随机长度的新闻内容。

到这儿，我们的编码工作就算结束了，运行程序试一下，手机版本的：

平板在模拟器上运行的：

关注获取更多

Android开发学习 -- Day10 Fragment实践-

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android开发入门教程