学习笔记-Kuaihu(仿知乎日报)

本文目的:由于第一次学习较为完整的项目,故作记录以系统地整理APP开发知识

先看看整个项目结构:

  • activity, fragment, 不用说了。可以看做MVC中的controller
  • db, 存储json缓存用的,model就是一些bean类比如首页Item的对象,点开详情的文章对象
  • util嘛一些工具类。里面可以对已有的HTTP工具再次进行封装。
  • view就是一些自定义的或者第三方view类。
  • Kpplication就是自己写的application类,里面进行了第三方工具的初始化,其他没什么。

manifest也很简单。就是网络请求、网络状态、和写外部存储的权限(有了写,默认就可以读)。

我们从splashActivity开始看起:

  1. 先用FULLSCREEEN和HIDE_NAVIGATION两个给decorView设置上
  2. 初始化启动图imageview,getFileDir获得splash.jpg, 文件不存在则用默认图,存在则用BitmapFactory.decodeFile(splashFile.getAbsolutePath() )解析该文件
  3. 不管splash存不存在,我们都要进行get请求,获得最新的启动图的url,拿着这个url我们再次进行请求,并把该图片保存成文件。
  4. 此时我们主线程在播放启动图的动画:
  • 在anim文件夹下写scale动画,或者直接在代码new一个ScaleAnimation对象

    • fillAfter: true表示动画结束后图像persist;fromXScale和toXScale表示从多少倍放大到多少倍。pivotX="0.5"表示从X轴的中心开始效果
    • 设置Duration为3000毫秒,然后加上setAnimationListener,onAnimationEnd中写上动画结束后的操作。
  • 动画完成进入MainActivity, 通过overridePendingTransition更改进入activity的动画。调用finish()干掉启动页。

然后我们到了MainActivity:

  1. 首先看看布局,这里用的是Drawerlayout, 主布局放在上面,menu布局放在下面(menu这里用的fragment,我们应该替换成design库的navigationView)
  2. 看看onCreate代码。首先当然是初始化View了,这里根据是否是夜间模式,toolbar和statusBar的颜色进行了初始化。
  3. 主布局由toolbar和SwipeRefreshLayout组成,所以要对swipeRefreshLayout进行初始化,这里设置了颜色,和onRefreshListener
  4. 此处onRefresh中简单地new了一个MainFragment,目测可以优化。刷新结束需要调用setRefreshing(false),这个方法会移除刷新的圆环。
  5. 然后配置了ActionBarDrawerToggle,吧drawerlayout和toolbar关联起来。mDrawerlayout.setDrawerListener(drawerToggle).
  6. 最后就是用mainFragment来replace主布局啦。记得加上tag哦

  7. 着往下看,我们会看到MainActivity包含很多跟UI有关的操作,比如关闭drawer,
    设置SwpieRfreshEnable,toolbar的setTitle,但是mainActivity实际上没调用过。这些方法写成public,
    然后我们在mainFragment中获得mActivity对象,就可以方便的调用。mActivity在baseFragment中获得就行了。

  8. 有一个onOptionsItemSelected(MenuItem
    item)就是来监听menu的点击事件啦。这里主要是一个夜间模式,通过改变toolbar的backgroundColor和
    setStatusBarClor,通过findFragmentByTag或者Id找到主fragment和内容fragment,调用其
    updateTheme方法(fragment中解释),然后记得把夜间模式保存到sharedPreference就行了。
  9. 最后理所当然的复写了onBackPressed方法实现按两次退出的效果。记得先关闭drawer;用到snackbar, 记得根据夜间模式可以来setBackgroundColor

接下来就是比较重要的MainFragment:

  1. 布局嘛不用说就是一个listView或者recyclerView。后者通过判断itemType可以加载不同的布局达到header或者footer的效果
  2. 这里header是一个图片循播的控件。里面包含TopEntities(放在顶部的一些文章对象),点击事件就跟其他的Item一样了,都是用intent传递id和title来打开详情页。
  3. 然后就是list的初始化,用setOnScrollListener控制滑动到最后几项时来加载更多(第一次加载是加载今天的,加载更多中拿到日期来查询历史文章就行)
  4. item点击事件和header中一样的,传递一个带有id和title的entity过去,打开详情页的activity。

  5. 后看看数据加载:-如果有网络:请求news/latest的文章数据,获取数据后通过SQLiteOpenHelper来
    getWritableDatabase.执行SQL语句保存json数据。缓存json数据后,就要解析了。我们根据不同的json数据创建对应的对
    象。这里是Latest文章对象类(用GsonFormat工具很方便)。new一个Gson,
    把response的String和Latest.class传入,于是我们就方便地获得了一个Latest对象,
    对象里面有对应的方法获得一个ArticleEntities的数组,把他加到list的adapter中,通知一下(添加和通知的方法可以封装)就OK
    了。
  6. -如果没有网络:获得SQLiteOpenHelper以getReadableDatabase,对
    SQLiteDatabase进行rawQuery,返回cursor,用cursor来找到json数据。。具体流程不太清楚。准备用第三方的ORM数
    据库greenDao。
  7. 再看看加载更多方法:加载更多是写在list的onScroll中的。判断滚动到最后倒数第二个就可以执行了。拿着json中的date,对news/before这个API进行请求即可。解析的时候传入的是Before.class,也就是历史文章对象,其他一样。
  8. 最后是updateTheme也就是夜间模式方法。调用的是list的adapter中的同名方法。这个方法只是重新获取了isDarkMode这个值,然后notifyDataSetChanged(这么简单就行了?有连锁反应?)

看看MainFragment中list的Adapter:

  1. 首先这是继承自baseAdapter的,构造方法就一个context(数据通过自己写的addList方法传入文章对象的List)
  2. 然后看看updateTheme:先获得了isDarkMode值,然后notifyDataSetChanged(..这句话我是不是说过?)

详情页的Activity:

  1. 详情页是通过webView显示的。根布局是CoordinatorLayout,我称之为协调布局。然后依次是AppBarLayout包裹着
    CollapsingToolbarLayout, 正如名字一样,CollapsingToolbarLayout中,应有一个Toolbar,
    而imageview放在toolbar上面(固定格式);AppBarLayout下面是content布局(可以用include方法包含进去),它
    是一个NestedScrollView,看名字,应该是一个带有滑动事件的Scrollview,有一个属性叫layout_behavior,

    值是系统自带的固定的string。NestedScrollView中就是一个webview,用来显示主要的文章内容。考你一道题,如果想加入
    FloatingActionButton,布局应该放在哪?答案是放在AppBarLayout下方,用
    app:layout_anchor="@id/app_bar"和app:layout_anchorGravity="bottom|end"来控制
    其位置。

  2. 首先是喜闻乐见的初始化,从intent中获得文章entity对象(里面包含title和id),然后是toolbar,这
    里是第二级activity,所以要setDisplayHomeAsUpEnabled(不觉得这个方法名太长了吗?),然后
    setNavigationOnClickListener,里面就是onBackPressed.
    然后就是标题栏了。这里要用CollapsingToolbarLayout来设置title。还有个setContentScrimColor和
    setStatusBarScrimColor(Scrim是沙罩的意思)。
  3. 然后就是webview的设置了,先
    getSettings获得webSettings对象,setJavaScriptEnabled不解释了,别随便
    开;setCachemode(WebSettings.LOAD_CACHE_ELSE_NETWOR),
    有cache就加载,没有就network;setDomStorageEnabled、setDatabaseEnabled、
    setAppCacheEnabled统统开启,虽然不知道有什么效果。
  4. 初始化完成就如果有网可以进行网络访问了,拿到文章对象entity的id,直接访问news/,获得数据后,以id为key,response作为value。保存在数据库。没有网的话老规矩,以id来查询json数据,并进行解析。
  5. 解析:还是先根据json数据写好文章Content对象,new个Gson,用fromJson方法传入json数据和Content.class, 然后你就获得Content对象啦
  6. 首先用图片加载器把图片加载了,url直接从content对象中get就行了;然后是webview的加载:就是HTML的字符串头部加上css的样式,这里样式是固定的,所以放到了assets文件中:
    String html = "<html><head>" + css + "</head><body>" + content.getBody() + "</body></html>";
    html = html.replace("<div class=\"img-place-holder\">", "");
    mWebView.loadDataWithBaseURL("x-data://base", html, "text/html", "UTF-8", null);
时间: 2024-08-08 07:48:29

学习笔记-Kuaihu(仿知乎日报)的相关文章

仿知乎日报学习笔记与优化

仿知乎日报学习笔记与优化项目原地址(有些小BUG):单页网页应用:https://github.com/pomelo-chuan/Zhihu-Daily-Vue.js知乎日报api查询:https://github.com/izzyleung/ZhihuDailyPurify/wiki/%E7%9F%A5%E4%B9%8E%E6%97%A5%E6%8A%A5-API-%E5%88%86%E6%9E%90如果想看完整的API的json数据的话,推荐使用sublime,网上搜索sublime jso

微信小程序开发日记——高仿知乎日报(上)

本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教程分为以下三篇 微信小程序开发日记--高仿知乎日报(上) 微信小程序开发日记--高仿知乎日报(中) 微信小程序开发日记--高仿知乎日报(下) 三篇分别讲不同的组件和功能块 这篇要讲 API分析 启动页 轮播图 日报列表 浮动按钮 侧滑菜单 API分析 以下是使用到的具体API,更加详细参数和返回结

项目实战①—高仿知乎日报(1)逼真的开场动画

在这一篇开头我要感谢我的老师李卫民同志,没有他这个东西做不出来,有了他这个Demo逼近真正的XX日报 〇联网工具类的争论 在联网工具类中,有人说,Xutils 比volly牛逼,又有人说其实volly性能很差,不过我这一篇文章用的就是volly,我感觉不到差距在哪,反而觉得用起来很爽.其实我自己用的就是Xutils不过后面demo写下不下去了,经过李同志的代码重构,得以完全. ① 如何使用Volley 1.什么是Volley 我们在程序中需要和网络通信的时候,大体使用的东西莫过于AsyncTas

仿知乎日报App

1.6.Error:Execution failed for task ':app:buildInfoDebugLoader'.> Exception while doing past iteration backup : Source G:\project\***\app\build\intermediates\builds\debug\37215488613481\classes.dex and destination G:\project\***\app\build\intermediat

WEB前端学习笔记 三

接上一篇,web学习笔记 二,web学习笔记刚刚发出,就发现被其他网站采集了,在此感谢您的采集和转发,但请注明文章出自网知博学. 1.7  开发工具的选择 增强文本编辑器:EditPlus.Notepad++ 特点:比较小.占用系统资源比较少.代码颜色高亮显示.但没有代码自动补功能 IDE:(Integrated Development Environment,集成开发环境).IDE集成开发环境(简称IDE)开发环境就是指在开发软件的时候需要用到的软件.这些软件包括代码编辑器.编译器.调试工具和

WEB前端学习笔记 四

接上一篇,web学习笔记 四,在此感谢您对此篇笔记的认可,但转发时请注明文章出自网知博学. 2.0  html的语法格式 html的标签要写在尖括号中 :<> 在在英文输入法状态下,按住shift键然后再按它左侧的尖括号就可了, 先学习一个简单的h1标签,是个标题标签,在html中这样写: <h1>我在h1标签中,我就是标题</h1> 那么h1标签中所包裹的文字,就标记成标题了.通过浏览器的解析后在页面上显示出来的效果就是字体加粗,加黑,和word中的标题性质一样! 大

WEB前端学习笔记 五

接web前端学习笔记第四篇,此篇为web学习笔记 五,在此感谢您的采集和转发,但请注明文章出自网知博学. 2.0.3  html标签的属性格式 现在我们知道了两个双标签分别是,标题标签:<h1> - <h6>.和段落标签:<p></p>还知道了一个换行的单标签:<br />,现在我们给<p></p>标签添加一个属性,来改变段落是右对齐,还是左对齐,还是居中. 如上图,<p>标签中的 align(中文就是排列的意

MySQL必知必会 学习笔记(一)

第一章  了解SQL 模式:   关于数据库和表的布局以及特性的信息.[描述表可以存储什么样的数据,数据如何分解,各部分信息如何命名等等,可以用来描述数据库中特定的表以及整个数据库(和其中表的关系)]. 第二章 MySQL简介 MySQL是一种DBMS,即它是一种数据库软件.基于客户机----服务器的数据库. MySQL工具: 1.mysql 命令行实用程序 2.MySQL Administrator 3.MySQL query Browser 第四章 检索数据 LIMIT 5 表示MySQL返

JS学习笔记--仿手机发送内容交互

学习JS笔记----记录上课中学习的知识点,分享下老师教的内容: 1.html内容 <div id="box"> <div id="message"> <!--<p class="left"> <img src="img/136.jpg" /> <span>这是第一句话</span> </p> <p class="righ