手把手带你撸一个校园APP（五）：新闻中心模块

这个项目是很早之前在学校做的，如今再回首。很多代码很是粗糙，逻辑也不尽完善。还望各位看官海涵。

前言

通过上一篇文章的功能设计，我们可以发现新闻通知公告等是APP的最主要功能点。主要是聚合展示学校官网的通知公告，官方微信，微博的重要信息，学校社团的活动，以及学校优秀自媒体的文章等等。

系列文章:

手把手带你撸一个校园APP（一）：项目简介
手把手带你撸一个校园APP（二）：应用启动和欢迎页面
手把手带你撸一个校园APP（三）：用户模块（登录注册等）
手把手带你撸一个校园APP（四）：APP框架及功能设计
手把手带你撸一个校园APP（五）：新闻中心模块
手把手带你撸一个校园APP（六）：失物招领&二手交易模块
手把手带你撸一个校园APP（七）：图说校园模块
手把手带你撸一个校园APP（八）：校园通讯录模块
手把手带你撸一个校园APP（九）：课程表模块（模拟登陆爬取教务处课程信息）
手把手带你撸一个校园APP（十）：APP通用模块（更新，意见反馈等）

实现效果

新闻部分主要是分了“通知公告”，“新闻速递”，“自媒体”，“校园文化”四个栏目，之间可以通过左右滑动进行切换。效果图如下：

分析

其实这是挺常见的一个新闻资讯模块。我们也可以轻易得出以下内容：

新闻条目一般都有标题，配图，作者，发表时间等组成。我们的新闻只是聚合展示使用，可以外加一个资讯链接；
配图数量并不一致，有无图的，1 张配图的，以及 3 张配图的。我们需要根据配图的数量进行不同布局的设置；
新闻列表应该拥有下拉刷新，上拉加载的功能。

实现

本项目基于Bmob进行开发，很多地方需要Bmob相关知识。大家如果没了解过的话，可先自行查看 Bmob开发文档。

数据库

当初设计数据库字段的时候，很多东西都为了简单，没有做更合理的规划。字段如下：

字段名	描述	类型	主键
objectId	用户id	String	是
title	标题	String
author	作者	String
time	发布时间	String
kind	栏目分类	String
content	内容链接	String
pic1	缩略图一	String
pic2	缩略图二	String
pic3	缩略图三	String
tag	布局样式（图片数量）	String

大家如果自己从头来的话，建议适当更改部分字段的类型以及组合方式，会更合理些。比如time改为时间类型，图片改为列表等。本文暂且不表。

安卓

逻辑流程讲解

本模块逻辑设计如下：

使用CoordinatorTabLayout + ViewPager + Fragment 完成新闻模块主页面的显示；
Fragment 进行网络请求，获取新闻数据并展示，使用 RecyclerView 展示新闻列表，根据缩略图数量对应3种条目布局；
新闻详情页面使用WebView 用于展示新闻详情。

代码实现

在这里为了能快速开发，我们使用了 CoordinatorTabLayout 。

文章：CoordinatorTabLayout组件库
Github地址：CoordinatorTabLayout
作者：hugeterry

使用 CoordinatorTabLayout 搭建新闻主页面

使用步骤如下：

在 app 的 build.gradle 中添加依赖

dependencies {implementation 'cn.hugeterry.coordinatortablayout:coordinatortablayout:1.2.2'
}

布局文件中使用

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><cn.hugeterry.coordinatortablayout.CoordinatorTabLayoutandroid:id="@+id/cootablayout_news"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v4.view.ViewPagerandroid:id="@+id/vp_news"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior" /></cn.hugeterry.coordinatortablayout.CoordinatorTabLayout></RelativeLayout>

在 java 代码中使用

// 四个栏目标题
String[] mTitles = {"通知公告", "新闻速递", "自媒体", "校园文化"}
// 初始化 Fragment 列表
ArrayList<Fragment> mFragments = new ArrayList<>();
mFragments.add(MainFragment1.getInstance(mTitles[0]));
mFragments.add(MainFragment2.getInstance(mTitles[1]));
mFragments.add(MainFragment3.getInstance(mTitles[2]));
mFragments.add(MainFragment4.getInstance(mTitles[3]));// 设置Viewpager
mViewPager.setOffscreenPageLimit(4);
mViewPager.setAdapter(new MyPagerAdapter(getChildFragmentManager(), mFragments, mTitles));// 设置顶部 展开后 4 张背景图
mImageArray = new int[]{R.mipmap.keshi1,R.mipmap.keshi4,R.mipmap.img_bg_news3,R.mipmap.img_bg_news4};
// 设置顶部 收缩后 4 种背景色
mColorArray = new int[]{android.R.color.holo_blue_light,android.R.color.holo_red_light,android.R.color.holo_orange_light,android.R.color.holo_green_light};
// 设置 CoordinatorTabLayout 属性
mCoordinatorTabLayout.setTransulcentStatusBar(mActivity).setTitle("").setImageArray(mImageArray, mColorArray).setupWithViewPager(mViewPager);

网络请求，数据填充

建立数据库对应表 bean 类

public class NewsBean extends BmobObject {private String title;private String author;private String time;private String tag;private String pic1;private String pic2;private String pic3;private String content;// ....get set 方法
}

网络请求数据，并填充

mAdapter = new NNNAdapter();
newsBeanList = new ArrayList<>();
BmobQuery<NewsBean> query = new BmobQuery<NewsBean>();
query.order("-time");
// kind: [a="通知公告", b="新闻速递", c="自媒体", d="校园文化"]
query.addWhereEqualTo("kind", "a");
query.setLimit(10);
query.findObjects(new FindListener<NewsBean>() {@Overridepublic void done(List<NewsBean> object, BmobException e) {if (e == null) {for (NewsBean newsBean : object) {newsBeanList.add(newsBean);LogUtils.e(newsBean.getAuthor());}mAdapter.setData(newsBeanList);} else {}}
});
mRecyclerView.setAdapter(mAdapter);

图片数量不同对应不同的布局

public class NewsBean extends BmobObject implements IMultiItem {@Overridepublic int getLayoutRes() {if ("3".equals(tag)) {return R.layout.item_news_type3;} else if ("2".equals(tag)) {return R.layout.item_news_type2;} else {return R.layout.item_news_type1;}}// 省略其它...
}

新闻详情页面
Fragment 中给 RecycleView 设置点击事件，传递网址到详情Activity

mAdapter.setOnItemClickListener(new OnItemClickListener() {@Overridepublic void onItemClick(@NonNull View view, int position) {Intent intent = new Intent(getActivity(), NewsWebActivity.class);intent.putExtra("url", newsBeanList.get(position).getContent());startActivity(intent);}
});

网页详情页面 NewsActivity 中只有一个WebView。接收上个页面传递过来的参数，并且展示页面。这里做了一些初始化操作，大家在别处需要的话，也可以直接复制过去

String url = getIntent().getStringExtra("url");
if (TextUtils.isEmpty(url)) {Toast.makeText(this, "该新闻已经失效！", Toast.LENGTH_SHORT).show();return;
}
MyWebViewClient myWebViewClient = new MyWebViewClient();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {wvNews.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
wvNews.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);//设置js可以直接打开窗口，如window.open()，默认为false
wvNews.getSettings().setJavaScriptEnabled(true);//是否允许执行js，默认为false。设置true时，会提醒可能造成XSS漏洞
wvNews.getSettings().setSupportZoom(true);//是否可以缩放，默认true
wvNews.getSettings().setBuiltInZoomControls(true);//是否显示缩放按钮，默认false
wvNews.getSettings().setUseWideViewPort(true);//设置此属性，可任意比例缩放。大视图模式
wvNews.getSettings().setLoadWithOverviewMode(true);//和setUseWideViewPort(true)一起解决网页自适应问题
wvNews.getSettings().setAppCacheEnabled(true);//是否使用缓存
wvNews.getSettings().setDomStorageEnabled(true);//DOM Storage
wvNews.setWebChromeClient(new WebChromeClient());
wvNews.setWebViewClient(myWebViewClient);
wvNews.loadUrl(url);// ....
private class MyWebViewClient extends WebViewClient {//重写父类方法，让新打开的网页在当前的WebView中显示public boolean shouldOverrideUrlLoading(WebView view, String url) {view.loadUrl(url);return true;}
}

至此，新闻模块页面基本完成。还有就是本文挺长的，很感谢你可以看到这里。

如果本文对你有所帮助，还望可以随手赏一个点赞哈 ~ ~

手把手带你撸一个校园APP（五）：新闻中心模块相关推荐

手把手带你撸一个校园APP（六）：失物招领二手交易模块
代码经过简单的整理,已经放到Github上了.https://github.com/zhengweichao/Hevttc 回首来看,代码质量一般,里面也有各种逻辑问题,还望各位看官海涵.接下来有时间 ...
手把手带你撸一个cli工具
你有没有遇到过在没有vue-cli.create-react-app这样子的脚手架的时候一个文件一个文件的去拷贝老项目的配置文件.最近,笔者就在为组里的框架去做一套基本的cli工具.通过这边文章,笔者 ...
dispatch作用 react_「React系列」手把手带你撸后台系统（Redux与路由鉴权）
[React系列]手把手带你撸后台系统(Redux与路由鉴权) 来源:https://juejin.im/post/5d9b5ddee51d45781b63b8f7 上一篇我们介绍了系统架构,这一篇将 ...
手把手带你写一个JavaScript类型判断小工具
业务写了很多,依然不是前端大神,我相信这是很多'入坑'前端开发同学的迷茫之处,个人觉得前端职业发展是有路径可寻的,前期写业务是一个积累过程,后期提炼总结,比如编程思想,父子类的原型继承,还是对象之间的 ...
手把手教你撸一个Web汇率计算器
手把手教你撸一个Web汇率计算器前言前段时间刚接触到前端网页开发,但是对于刚入门的小白而言,像flask.Django等这类稍大型的框架确实不太适合,今天这个Dash是集众家之长于一体的轻量化We ...
手把手教你写一个Matlab App（一）
对于传统工科的学生用的最多的编程软件应该就是matlab,其集成度高,计算能力强,容易上手,颇受大众青睐.今天挖的这个新坑,主要是分享用matlab app designer设计GUI界面的一些方法和 ...
【NLP】Pyhon+讯飞开放平台:手把手带你写一个智能语音播报系统
手把手带你写一个智能语音播报系统. 微信扫码登陆讯飞开放平台:https://www.xfyun.cn/ 完成个人认证. 在控制台创建应用,注意应用名称全库查重,很容易跟别人重复. 可查看到pytho ...
使用Flutter撸一个视频播放APP(有福利哦~)
使用Flutter撸一个视频播放APP(有福利哦~) 基于苹果CMS8.0的资源站收集视频播放APP. 视频资源来源:从网上的各大资源收集站中获取视频资源,他们大都支持苹果CMS8.0的接口方法获取. ...
Linux环境，手把手带你实现一个Nginx模块，深入了解Nginx丨惊群效应|error|负载均衡|Openresty丨C/C++Linux服务器开发丨中间件
Linux环境,手把手带你实现一个Nginx模块,深入了解Nginx 视频讲解如下,点击观看: Linux环境,手把手带你实现一个Nginx模块,深入了解Nginx丨惊群效应|error|负载均衡|O ...