文章目录

  • 一、项目概述
  • 二、开发环境
  • 三、主要实现
  • 四、项目演示
  • 五、项目总结
  • 六、项目源码

一、项目概述

本项目名称叫做TodayHistory，顾名思义，就是“历史上的今天”。点击就能查看在这悠久的历史长河里面，今天这个日期都发生了哪些大事件。这个应用有着三点优势：一来可以培养人文情怀，二来丰富自己的知识文化储备，三来以史为鉴知晓大义。主要功能是怎么实现的呢？下面就一起来看下。

二、开发环境

三、主要实现

1、介绍下项目的总体结构。
首先base包里面放的是底层需要调用的类BaseActivity和UniteApp，里面都是继承父类和接口后重写了方法。ContentURL就是我们调用的接口类，里面是获取URL的方法。

bean包都是实体集，HIstoryBean是【历史上的今天】实体集，HIstoryDescBean是【详细信息】实体集，LaoHuangliBean是【老黄历】实体集，你可以把bean理解为数据库里面一张表的设计，就是一个类它所有的私有属性以及get/set方法。

下面的HistoryActivity就是二级页面的活动文件，HistoryAdapter是适配器文件，用来把从网络上获取的数据显示到列表中，有列表那肯定有adapter，可以把它理解为容器，ListView装上adapter就可以显示了。

HistoryDescActivity是三级页面的活动文件，它不是列表显示，所以不需要adapter。最后就是MainActivity了，作为所有Android项目都有的活动文件，这里它起到的还是列表的作用，从上到下展示内容，我们下面会讲到。


2、获取网络数据的URL
这里的key值是我自己申请的，如果你运行项目出现没有数据的情况，应该是使用次数到达每日上限，方便起见，可以自己去【聚合数据】官网申请这两个key，一个是【老黄历】，还有一个是【历史上的今天】，然后替换掉下面三个方法中对应的key值，第一个和第三个需要替换【历史上的今天】的key值，第二个需要替换【老黄历】的key值。

运行环境要保证电脑是联网的，不然key值有用，也不会显示数据。

3、一级界面的绘制
首先讲activity_main，这个布局文件是一个RelativeLayout，它定义了一个ListView（列表）和一个ImageButton（图片按钮），ListView不是为了显示一个个条目，而是将我们要显示的界面分为头部和尾部，依次防止这个ListView中，这个图标按钮是用来点击更改日历的，之所以能显示在这个列表右下方，是因为 android:layout_alignParentRight="true"和android:layout_alignParentBottom="true"这两句设置的与父布局的位置关系，代码如下：

<?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"><ListViewandroid:id="@+id/main_lv"android:layout_width="match_parent"android:layout_height="match_parent"android:divider="@null"/><ImageButtonandroid:id="@+id/main_imgbtn"android:layout_width="70dp"android:layout_height="70dp"android:src="@mipmap/icon_calendar"android:layout_alignParentRight="true"android:layout_alignParentBottom="true"android:background="@drawable/calendarbg"android:layout_margin="20dp"/>
</RelativeLayout>

整体显示效果如下：

图片按钮，我在drawable文件夹下定义了一个calendarbg.xml文件，更改了它的显示效果。首先形状设置成圆形（oval），颜色设置成淡红色，然后添加上下左右的内边距，对它的长度和高度也设置成了30dp，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"android:useLevel="false"><solid android:color="#88B22222"/><paddingandroid:left="2dp"android:right="2dp"android:top="1dp"android:bottom="1dp"/><size android:width="30dp"android:height="30dp"/>
</shape>

接下来是main_headerview，就是主界面的头部，这里展示的就是【老黄历】显示的信息，设置的都是TextView，垂直居中分布，比较简单，代码如下：

<?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"android:background="@color/mainBg"><TextViewandroid:id="@+id/main_header_tv_yangli"android:layout_width="match_parent"android:layout_height="wrap_content"android:textStyle="bold"android:textSize="18sp"android:gravity="center"android:padding="3dp"android:text=""/><TextViewandroid:id="@+id/main_header_tv_day"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:textStyle="bold"android:textSize="80sp"android:text=""android:textColor="@color/fireRed"/><TextViewandroid:id="@+id/main_header_tv_week"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:textColor="@color/fireRed"android:textStyle="bold"android:textSize="26sp"android:text=""/><TextViewandroid:id="@+id/main_header_tv_nongli"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:padding="3dp"android:textStyle="bold"android:textSize="18sp"android:layout_marginTop="10dp"android:text=""/><LinearLayoutandroid:orientation="vertical"android:layout_margin="20dp"android:padding="10dp"android:background="@drawable/headerbg"android:layout_width="match_parent"android:layout_height="wrap_content"><TextViewandroid:id="@+id/main_header_tv_baiji"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="10dp"android:textSize="14sp"android:text=""/><TextViewandroid:id="@+id/main_header_tv_wuxing"android:layout_width="match_parent"android:layout_height="wrap_content"android:textSize="14sp"android:text=""/><TextViewandroid:id="@+id/main_header_tv_chongsha"android:layout_width="match_parent"android:layout_height="wrap_content"android:textSize="14sp"android:layout_marginBottom="10dp"android:text=""/><TextViewandroid:layout_width="match_parent"android:layout_height="1dp"android:background="@color/fireRed"/><TextViewandroid:id="@+id/main_header_tv_jishen"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="10dp"android:textSize="14sp"android:text=""/><TextViewandroid:id="@+id/main_header_tv_xiongshen"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginBottom="10dp"android:textSize="14sp"android:text=""/><TextViewandroid:layout_width="match_parent"android:layout_height="1dp"android:background="@color/fireRed"/><TextViewandroid:id="@+id/main_header_tv_yi"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="10dp"android:textSize="14sp"android:text=""/><TextViewandroid:id="@+id/main_header_tv_ji"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginBottom="10dp"android:textSize="14sp"android:text=""/></LinearLayout><TextViewandroid:id="@+id/main_header_tv_history"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="历史上的这一天"android:layout_marginLeft="20dp"android:textSize="18sp"android:textStyle="bold"/>
</LinearLayout>

具体效果：

最后就是main_footer这个布局文件，就是主界面的尾部，这个就是显示一个TextView，用来点击使用，然后加载更多信息的，最简单的一个layout文件了，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:orientation="horizontal"android:background="@color/mainBg"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="点击加载更多"android:padding="15dp"/>
</LinearLayout>

具体效果：

这样，在MainActivity里面就将头部和尾部放到ListView中，共同构成了主界面

    private void addHeaderAndFooterView() {//        给ListView添加头尾布局函数View headerView = LayoutInflater.from(this).inflate(R.layout.main_headerview,null);initHeaderView(headerView);mainLv.addHeaderView(headerView);View footerView = LayoutInflater.from(this).inflate(R.layout.main_footer,null);footerView.setTag("footer");footerView.setOnClickListener(this);mainLv.addFooterView(footerView);}

4、二级界面的绘制
二级界面就是【历史上的今天】，包含所有事件的一个界面。首先最上面在一个子RelativeLayout中放置了TextView，文本内容 android:text=“历史上的这一天”，android:layout_centerInParent="true"居中显示在父布局中。然后左侧放置了一个ImageView，这是返回按钮的图片，用的是垂直居中，代码如下：

<?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"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="45dp"android:id="@+id/history_title"android:background="@color/mainBg"><TextViewandroid:id="@+id/history_title_tv"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="历史上的这一天"android:textSize="18sp"android:textStyle="bold"android:layout_centerInParent="true"/><ImageViewandroid:id="@+id/history_iv_back"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:src="@mipmap/icon_back"/></RelativeLayout><TextViewandroid:id="@+id/history_line"android:layout_width="match_parent"android:layout_height="1dp"android:layout_below="@id/history_title"android:background="@color/fireRed"/><ListViewandroid:id="@+id/history_lv"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_below="@id/history_line"android:divider="@null"></ListView><TextViewandroid:id="@+id/history_tv"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:textStyle="bold"android:textSize="30sp"android:text="暂无数据"android:visibility="gone"/>
</RelativeLayout>

显示效果：

有ListView肯定少不了item，而item_main_timeline就是这样一个条目文件，它显示了时间线图片和文本，代码如下：

<?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"android:background="@color/mainBg"><LinearLayoutandroid:id="@+id/item_main_ll"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><LinearLayoutandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="vertical"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_marginLeft="1dp"android:src="@mipmap/timeline_group_divider"/><Viewandroid:layout_width="1dp"android:layout_height="30dp"android:layout_gravity="center_horizontal"android:layout_marginTop="2dp"android:background="#996600"/></LinearLayout><TextViewandroid:id="@+id/item_main_time"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_marginTop="6dp"android:layout_weight="15"android:text="2019-11-14"android:textColor="#996600"/></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="70dp"android:orientation="horizontal"><RelativeLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="2dp"android:gravity="center_horizontal"android:orientation="vertical"><ImageViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/template_time_spot"/><Viewandroid:layout_width="1dp"android:layout_height="match_parent"android:background="#996600"android:layout_marginTop="2dp"/></LinearLayout></RelativeLayout><android.support.v7.widget.CardViewandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="15"android:background="#FFF"android:layout_marginRight="15dp"android:layout_marginBottom="10dp"android:elevation="5dp"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal"><ImageViewandroid:id="@+id/item_main_pic"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:scaleType="centerCrop"android:src="@mipmap/icon"/><TextViewandroid:id="@+id/item_main_title"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="2"android:text="联想集团公司在京成立"android:padding="5dp"/></LinearLayout></android.support.v7.widget.CardView></LinearLayout>
</LinearLayout>

显示效果，可以看到时间是一个小圆，事件是一个小点，左边图片，右边文字：

4、三级界面的绘制
最后就是activity_history_desc这个布局文件了，它和二级界面在顶部几乎是一样的，只是多了一个分享按钮，主要是下面使用了ScrollView（垂直滚动条），用来放大量数据，防止数据显示不完，可以上下滑动，就和我们浏览网页一样，这个滚动条中，我们放了一个LinearLayout子布局，在其中放了TextView控件，显示当天日期，下面就是ImageView控件，显示历史上这件事的图片，有可能有多张，所以可以滚动，最下面就是这个事件的详细阐述，也是用一个TextView就搞定了，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<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"android:background="@color/mainBg"android:orientation="vertical"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="45dp"><TextViewandroid:id="@+id/history_tv_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="历史上的这一天"android:layout_centerInParent="true"android:textSize="18sp"android:textStyle="bold"/><ImageViewandroid:id="@+id/desc_back_iv"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:src="@mipmap/icon_back"/><ImageViewandroid:id="@+id/desc_share_iv"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:src="@mipmap/icon_share"android:layout_alignParentRight="true"android:layout_marginRight="10dp"/></RelativeLayout><TextViewandroid:layout_width="match_parent"android:layout_height="1dp"android:background="@color/fireRed"/><ScrollViewandroid:layout_width="match_parent"android:layout_height="wrap_content"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><TextViewandroid:id="@+id/desc_tv_title"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:textSize="18sp"android:textStyle="bold"android:layout_margin="10dp"/><ImageViewandroid:layout_width="match_parent"android:layout_height="280dp"android:id="@+id/desc_iv_pic"android:scaleType="fitXY"android:layout_margin="10dp"/><TextViewandroid:id="@+id/desc_tv_content"android:layout_width="match_parent"android:layout_height="wrap_content"android:textSize="16sp"android:layout_margin="10dp"/></LinearLayout></ScrollView>
</LinearLayout>

显示效果：

四、项目演示

1、进入应用，主页从上至下，依次显示的是阳历、阴历、历史上的这一天

2、我们往下拖，可以看到底下显示了5条内容，点击加载更多内容，就会进入到二级页面，显示更多内容

3、进入二级界面后，会显示所有的事件，这些事件有的有图片，有的没有图片，而且有的还有两三张图片，这主要根据网络数据提供，最上面有【返回】按钮，可以返回上一级页面，标题是【历史上的这一天】

4、我们点击其中一个事件，跳转到三级界面，可以看到它的详细内容desc，标题+大图+文字描述，非常好的用户体验

5、在事件的详情页面中，即上图中右上角有个分享按钮，点击可以分享给好友

6、右下角有一个日历，点击它弹出日历的对话框，可以选择日期

7、我们选择2021.06.01，然后发现日历和历史的今天都更新成了六月一号

五、项目总结

以上就是该项目的主要内容介绍，考察的还是基础控件（ImageButton、ListView、TextView、ImageView）和布局（RelativeLayout、LinearLayout）的使用；还有每个项目必不可少的类：适配器Adapter、实体集Bean等，综合运用，融会贯通，边打边思考，才能加深记忆，写起来行云流水。

六、项目源码

点此下载源码：

Android Studio实现 历史上的今天相关推荐

  1. Android Studio中mac上面的安装

    Android Studio中mac上面的安装 学习了:https://blog.csdn.net/xianrenli38/article/details/79347170 http://www.an ...

  2. android studio try again,完美解决Android Studio在gradle上的各种问题

    原标题:完美解决Android Studio在gradle上的各种问题 题记: 看到很多人都来读这篇文章,说明很多人都有遇到这个问题,文章质量不是很高,感觉我自己都有些看不懂了,因此来更新一下,希望可 ...

  3. 解决Android Studio连接不上逍遥模拟器的问题

    H:\app\Microvirt\MEmu\adb.exe start-serverH:\app\AndroidSDK\platform-tools\adb.exe connect 127.0.0.1 ...

  4. Android Studio项目如何上传至JCenter

    Android studio Library项目上传至JCenter 配置Project目录下build.gradle dependencies {classpath 'com.jfrog.bintr ...

  5. Android Studio使用Gradle上传AAR至Maven

    这几天有个开源library要上传到Maven Central Repository,找到某大神的博客,他用Maven上传的库,我依葫芦画瓢搞了两天,卧槽,可能是人品问题,mvn一直报一个莫名其妙的异 ...

  6. 安装 | Android studio连接不上真机解决办法（电脑安装虚拟机不成功的情况下）

    博主github:https://github.com/MichaelBeechan 博主CSDN:https://blog.csdn.net/u011344545 **很多人安装Android St ...

  7. android studio在夜神上打开_Android Studio之使用连接夜神模拟器分析Smail 【详文】8.7日更正...

    本帖最后由 Jxdm 于 2018-8-7 09:31 编辑 前言: 想把一个APP去广告,结果发现修改关键代码后出现崩溃,于是就想到了动态调试.由于是第一次使用,百度了N个网页,然后慢慢摸索才知道是 ...

  8. 码云 git android,Android studio使用Git上传码云入门教程

    Git使用教程: 本来android studio 我使用了插件gitee进行代码同步到码云,不得不说十分有用,可是也出现了一些问题,好比更新的代码提交不上去,可是用命令行的形式成功提交,故做记录.a ...

  9. window10 android studio连接不上夜神/mumu/蓝叠模拟器

    android studio运行程序的时候,列表里找不到夜神模拟器,当然,模拟器是开着的. 解决方法: 1.桌面上找到夜神模拟器,右键-打开文件所在的位置,比如我的是F:\Program Files\ ...

最新文章

  1. python查看数据类型nonetype_python 查询数据库数据 NoneType报错
  2. latex 波浪线_湖熟镇月牙刀波浪刀带哪家好厂家
  3. 四、MyBatis-映射文件
  4. Kibana源码分析--Hapijs路由设置理解笔记
  5. 【pyinstaller打包pyqt5编写的项目为exe（脱离环境可运行）】
  6. mysql sql优化_MySQL优化SQL语句的步骤
  7. 计算机音乐至少还有你,至少还有你-林忆莲
  8. accp8.0转换教材第4章MySQL高级查询(二)理解与练习
  9. wps excel连接MySQL数据库可刷新实时读取数据
  10. CMMB手机电视自毁长城？
  11. JAVA 事务回滚方法调用非事务回滚方法
  12. ubuntu16.04校园网（使用mentohust替代锐捷）
  13. tf.sigmoid
  14. java实现百度网盘爬虫
  15. 珠宝电商探索之路实战分享
  16. 退出登录清空session
  17. 用python让excel飞起来（第7章 图表操作）
  18. 奔图M9006DN复印机显示代码service error 191.10 engine error
  19. std::function 学习笔记(3)
  20. 关于PostgreSQL failed to load SQLModule安装失败的解决办法

热门文章

  1. linux下c语言版线程池
  2. JavaScript 简介第一课
  3. 米奇emoji_一些常用的 Emoji 符号（可直接复制）
  4. docker 代理_利用Docker容器实现代理转发和数据备份
  5. php mongodb 管理工具,细数MongoDB管理工具
  6. sed 之简单用法小记
  7. C/C++ 命令行参数的实现方法
  8. ThinkPHP单字母函数(快捷方法)使用总结
  9. 改变mysql默认字符集为utf8
  10. FFmpeg4.3.2之ffplay log输出级别(三十)