Android培训
美国上市Android培训机构

400-111-8989

热门课程

Android开发学习 -简易的新闻客户端

  • 发布: John Hao
  • 来源:TesterJohn
  • 时间:2018-03-28 15:52

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

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

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

  1. public class News {

  2.    private String title;

  3.    private String content;

  4.    public void setTitle(String title) {

  5.        this.title = title;

  6.    }

  7.    public void setContent(String content) {

  8.        this.content = content;

  9.    }

  10.    public String getTitle(){

  11.        return title;

  12.    }

  13.    public String getContent() {

  14.        return content;

  15.    }

  16. }

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

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

  2.    android:layout_width="match_parent"

  3.    android:layout_height="match_parent">

  4.    <LinearLayout

  5.        android:id="@+id/visibility_layout"

  6.        android:layout_width="match_parent"

  7.        android:layout_height="match_parent"

  8.        android:orientation="vertical">

  9.        <TextView

  10.            android:id="@+id/news_content_title"

  11.            android:layout_width="match_parent"

  12.            android:layout_height="wrap_content"

  13.            android:layout_gravity="center"

  14.            android:padding="10dp"

  15.            android:textSize="20sp"/>

  16.        <View

  17.            android:layout_width="match_parent"

  18.            android:layout_height="1dp"

  19.            android:background="#000" />

  20.        <TextView

  21.            android:id="@+id/news_content"

  22.            android:layout_width="match_parent"

  23.            android:layout_height="0dp"

  24.            android:layout_weight="1"

  25.            android:padding="15dp"

  26.            android:textSize="18sp"/>

  27.    </LinearLayout>

  28.    <View

  29.        android:layout_width="match_parent"

  30.        android:layout_height="1dp"

  31.        android:layout_alignParentStart="true"

  32.        android:background="#000"/>

  33. </RelativeLayout>

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

然后创建NewsContentFragment类,继承自Fragment,代码如下:

  1. public class NewsContentFragment extends Fragment {

  2.    private View view;

  3.    @Override

  4.    public View onCreateView(LayoutInflater inflater, ViewGroup container,

  5.                             Bundle savedInstanceState) {

  6.        view = inflater.inflate(R.layout.news_content_frag, container, false);

  7.        return view;

  8.    }

  9.    public void refresh(String newsTitle, String newsContent) {

  10.        View visibilityLayout = view.findViewById(R.id.visibility_layout);

  11.        visibilityLayout.setVisibility(View.VISIBLE);

  12.        TextView textTitle = view.findViewById(R.id.news_content_title);

  13.        TextView textContent = view.findViewById(R.id.news_content);

  14.        textTitle.setText(newsTitle);

  15.        textContent.setText(newsContent);

  16.    }

  17. }

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

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

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  2.    xmlns:app="http://schemas.android.com/apk/res-auto"

  3.    xmlns:tools="http://schemas.android.com/tools"

  4.    android:layout_width="match_parent"

  5.    android:layout_height="match_parent"

  6.    tools:context="com.johnhao.listviewdemo.Activity.NewsContentActivity">

  7.    <fragment

  8.        android:id="@+id/news_content_fragment"

  9.        android:name="com.johnhao.listviewdemo.Fragment.NewsContentFragment"

  10.        android:layout_width="match_parent"

  11.        android:layout_height="match_parent"/>

  12. </LinearLayout>

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

  1. public class NewsContentActivity extends BaseActivity {

  2.    public static void actionStart(Context context, String newsTitile, String newsContent) {

  3.        Intent intent = new Intent(context, NewsContentActivity.class);

  4.        intent.putExtra("news Title", newsTitile);

  5.        intent.putExtra("news Content", newsContent);

  6.        context.startActivity(intent);

  7.    }

  8.    @Override

  9.    protected void onCreate(Bundle savedInstanceState) {

  10.        super.onCreate(savedInstanceState);

  11.        setContentView(R.layout.activity_news_content);

  12.        String newsTitle = getIntent().getStringExtra("news Title");

  13.        String newsContent = getIntent().getStringExtra("news Content");

  14.        setTitle(newsTitle);

  15.        NewsContentFragment newsContentFragment = (NewsContentFragment)getSupportFragmentManager().findFragmentById(R.id.news_content_fragment);

  16.        newsContentFragment.refresh(newsTitle, newsContent);

  17.    }

  18. }

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

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

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  2.    android:orientation="vertical"

  3.    android:layout_width="match_parent"

  4.    android:layout_height="match_parent">

  5.    <android.support.v7.widget.RecyclerView

  6.        android:id="@+id/news_title_recycle_view"

  7.        android:layout_width="match_parent"

  8.        android:layout_height="match_parent">

  9.    </android.support.v7.widget.RecyclerView>

  10. </LinearLayout>

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

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  2.    android:layout_width="match_parent"

  3.    android:layout_height="wrap_content">

  4.    <TextView

  5.        android:id="@+id/news_title"

  6.        android:layout_width="match_parent"

  7.        android:layout_height="wrap_content"

  8.        android:singleLine="true"

  9.        android:textSize="18sp"

  10.        android:ellipsize="end"

  11.        android:paddingLeft="10dp"

  12.        android:paddingRight="10dp"

  13.        android:paddingTop="15dp"

  14.        android:paddingBottom="15dp"

  15.        android:textColor="#aaaa00"/>

  16. </LinearLayout>

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

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

  1. public class NewsTitleFragment extends Fragment {

  2.    private Boolean isTwoPane;

  3.    @Override

  4.    public View onCreateView(LayoutInflater inflater, ViewGroup container,

  5.                             Bundle savedInstanceState) {

  6.        View view = inflater.inflate(R.layout.news_title_frag, container, false);

  7.        return view;

  8.    }

  9.    @Override

  10.    public void onActivityCreated(Bundle savedInstanceState) {

  11.        super.onActivityCreated(savedInstanceState);

  12.        if (getActivity().findViewById(R.id.news_content_layout) != null) {

  13.            isTwoPane = true;

  14.        } else {

  15.            isTwoPane = false;

  16.        }

  17.    }

  18. }

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

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

  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

  2.    xmlns:app="http://schemas.android.com/apk/res-auto"

  3.    xmlns:tools="http://schemas.android.com/tools"

  4.    android:id="@+id/news_title_laytout"

  5.    android:layout_width="match_parent"

  6.    android:layout_height="match_parent"

  7.    tools:context="com.johnhao.listviewdemo.Activity.NewsTitleActivity">

  8.    <fragment

  9.        android:id="@+id/news_title_fragment"

  10.        android:name="com.johnhao.listviewdemo.Fragment.NewsTitleFragment"

  11.        android:layout_width="match_parent"

  12.        android:layout_height="match_parent"/>

  13. </FrameLayout>

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

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  2.    xmlns:app="http://schemas.android.com/apk/res-auto"

  3.    xmlns:tools="http://schemas.android.com/tools"

  4.    android:id="@+id/news_title_laytout"

  5.    android:orientation="horizontal"

  6.    android:layout_width="match_parent"

  7.    android:layout_height="match_parent"

  8.    tools:context="com.johnhao.listviewdemo.Activity.NewsTitleActivity">

  9.    <fragment

  10.        android:id="@+id/news_title_fragment"

  11.        android:name="com.johnhao.listviewdemo.Fragment.NewsTitleFragment"

  12.        android:layout_width="0dp"

  13.        android:layout_height="match_parent"

  14.        android:layout_weight="1"/>

  15.    <FrameLayout

  16.        android:id="@+id/news_content_layout"

  17.        android:layout_width="0dp"

  18.        android:layout_height="match_parent"

  19.        android:layout_weight="3">

  20.        <fragment

  21.            android:id="@+id/news_content_fragment"

  22.            android:name="com.johnhao.listviewdemo.Fragment.NewsContentFragment"

  23.            android:layout_width="match_parent"

  24.            android:layout_height="match_parent"/>

  25.    </FrameLayout>

  26. </LinearLayout>

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

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

  1. public class NewsTitleFragment extends Fragment {

  2.    private Boolean isTwoPane;

  3.    ...

  4.    class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.ViewHolder>{

  5.        private List<News> mNewsList;

  6.        public NewsAdapter(List<News> newsList) {

  7.            mNewsList = newsList;

  8.        }

  9.        class ViewHolder extends RecyclerView.ViewHolder {

  10.            TextView newsTitle;

  11.            public ViewHolder(View itemView) {

  12.                super(itemView);

  13.                newsTitle = itemView.findViewById(R.id.news_title);

  14.            }

  15.        }

  16.        @Override

  17.        public NewsAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

  18.            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.news_item, parent, false);

  19.            final ViewHolder holder = new ViewHolder(view);

  20.            view.setOnClickListener(new View.OnClickListener() {

  21.                @Override

  22.                public void onClick(View v) {

  23.                    News news = mNewsList.get(holder.getAdapterPosition());

  24.                    if (!isTwoPane) {

  25.                        // 如果是单页模式,则启动NewsContentActivity,传递当前的标题和内容

  26.                        NewsContentActivity.actionStart(getActivity(), news.getTitle(), news.getContent());

  27.                    } else {

  28.                        // 如果是双页模式,刷新NewsContentFragment的内容

  29.                        NewsContentFragment newsContentFragment = (NewsContentFragment) getFragmentManager().findFragmentById(R.id.news_content_fragment);

  30.                        newsContentFragment.refresh(news.getTitle(), news.getContent());

  31.                    }

  32.                }

  33.            });

  34.            return holder;

  35.        }

  36.        @Override

  37.        public void onBindViewHolder(NewsAdapter.ViewHolder holder, int position) {

  38.            News news = mNewsList.get(position);

  39.            holder.newsTitle.setText(news.getTitle());

  40.        }

  41.        @Override

  42.        public int getItemCount() {

  43.            return mNewsList.size();

  44.        }

  45.    }

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

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

  1. public class NewsTitleFragment extends Fragment {

  2.    ...

  3.    @Override

  4.    public View onCreateView(LayoutInflater inflater, ViewGroup container,

  5.                             Bundle savedInstanceState) {

  6.        View view = inflater.inflate(R.layout.news_title_frag, container, false);

  7.        RecyclerView newsTitleRecycleView = view.findViewById(R.id.news_title_recycle_view);

  8.        LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());

  9.        newsTitleRecycleView.setLayoutManager(layoutManager);

  10.        NewsAdapter adapter = new NewsAdapter(getNews());

  11.        newsTitleRecycleView.setAdapter(adapter);

  12.        return view;

  13.    }

  14.    private List<News> getNews() {

  15.        List<News> newsList = new ArrayList<>();

  16.        for (int i = 1; i < 51; i++) {

  17.            News news = new News();

  18.            news.setTitle("This is news title " + i);

  19.            news.setContent(getRandomLengthContent("This is news title " + i + "."));

  20.            newsList.add(news);

  21.        }

  22.        return newsList;

  23.    }

  24.    private String getRandomLengthContent(String content) {

  25.        Random random = new Random();

  26.        int length = random.nextInt(20) + 1;

  27.        StringBuilder builder = new StringBuilder();

  28.        for (int i = 0; i < length; i++) {

  29.            builder.append(content);

  30.        }

  31.        return builder.toString();

  32.    }

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

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

平板在模拟器上运行的:

预约申请免费试听课

上一篇:android UI自定义模板TopBar标题栏
下一篇:android 6.0指纹识别开发

Android有哪些权限?Android开发权限集合

Android开发内存优化注意事项和方法

做为一个Android开发程序员,这些Android基本功你会吗?

Android怎么让图片占用尽可能少的内存

选择城市和中心
贵州省

广西省

海南省