YY帐号登录
登录前请仔细阅读
请选择适合你手机系统的版本下载。如果看了此文你还不懂傅里叶变换，那就过来掐死我吧【完整版】 - 文章 - 伯乐在线
& 如果看了此文你还不懂傅里叶变换，那就过来掐死我吧【完整版】
作 者：韩 昊
知 乎：Heinrich
微 博：@花生油工人
知乎专栏：与时间无关的故事
谨以此文献给大连海事大学的吴楠老师，柳晓鸣老师，王新年老师以及张晶泊老师。
转载的同学请保留上面这句话，谢谢。如果还能保留文章来源就更感激不尽了。
——更新于，想直接看更新的同学可以直接跳到第四章————
12345678910
作 者：韩 昊知 乎：Heinrich微 博：@花生油工人知乎专栏：与时间无关的故事&谨以此文献给大连海事大学的吴楠老师，柳晓鸣老师，王新年老师以及张晶泊老师。&转载的同学请保留上面这句话，谢谢。如果还能保留文章来源就更感激不尽了。&——更新于，想直接看更新的同学可以直接跳到第四章————
我保证这篇文章和你以前看过的所有文章都不同，这是 2012 年还在果壳的时候写的，但是当时没有来得及写完就出国了……于是拖了两年，嗯，我是拖延症患者……
这篇文章的核心思想就是：
要让读者在不看任何数学公式的情况下理解傅里叶分析。
傅里叶分析不仅仅是一个数学工具，更是一种可以彻底颠覆一个人以前世界观的思维模式。但不幸的是，傅里叶分析的公式看起来太复杂了，所以很多大一新生上来就懵圈并从此对它深恶痛绝。老实说，这么有意思的东西居然成了大学里的杀手课程，不得不归咎于编教材的人实在是太严肃了。（您把教材写得好玩一点会死吗？会死吗？）所以我一直想写一个有意思的文章来解释傅里叶分析，有可能的话高中生都能看懂的那种。所以，不管读到这里的您从事何种工作，我保证您都能看懂，并且一定将体会到通过傅里叶分析看到世界另一个样子时的快感。至于对于已经有一定基础的朋友，也希望不要看到会的地方就急忙往后翻，仔细读一定会有新的发现。
————以上是定场诗————
下面进入正题：
抱歉，还是要啰嗦一句：其实学习本来就不是易事，我写这篇文章的初衷也是希望大家学习起来更加轻松，充满乐趣。但是千万！千万不要把这篇文章收藏起来，或是存下地址，心里想着：以后有时间再看。这样的例子太多了，也许几年后你都没有再打开这个页面。无论如何，耐下心，读下去。这篇文章要比读课本要轻松、开心得多……
一、什么是频域
从我们出生，我们看到的世界都以时间贯穿，股票的走势、人的身高、汽车的轨迹都会随着时间发生改变。这种以时间作为参照来观察动态世界的方法我们称其为时域分析。而我们也想当然的认为，世间万物都在随着时间不停的改变，并且永远不会静止下来。但如果我告诉你，用另一种方法来观察世界的话，你会发现世界是永恒不变的，你会不会觉得我疯了？我没有疯，这个静止的世界就叫做频域。
先举一个公式上并非很恰当，但意义上再贴切不过的例子：
在你的理解中，一段音乐是什么呢？
这是我们对音乐最普遍的理解，一个随着时间变化的震动。但我相信对于乐器小能手们来说，音乐更直观的理解是这样的：
好的！下课，同学们再见。
是的，其实这一段写到这里已经可以结束了。上图是音乐在时域的样子，而下图则是音乐在频域的样子。所以频域这一概念对大家都从不陌生，只是从来没意识到而已。
现在我们可以回过头来重新看看一开始那句痴人说梦般的话：世界是永恒的。
将以上两图简化：
在时域，我们观察到钢琴的琴弦一会上一会下的摆动，就如同一支股票的走势；而在频域，只有那一个永恒的音符。
你眼中看似落叶纷飞变化无常的世界，实际只是躺在上帝怀中一份早已谱好的乐章。
抱歉，这不是一句鸡汤文，而是黑板上确凿的公式：傅里叶同学告诉我们，任何周期函数，都可以看作是不同振幅，不同相位正弦波的叠加。在第一个例子里我们可以理解为，利用对不同琴键不同力度，不同时间点的敲击，可以组合出任何一首乐曲。
而贯穿时域与频域的方法之一，就是传中说的傅里叶分析。傅里叶分析可分为傅里叶级数（Fourier Serie）和傅里叶变换(Fourier Transformation)，我们从简单的开始谈起。
二、傅里叶级数(Fourier Series)的频谱
还是举个栗子并且有图有真相才好理解。
如果我说我能用前面说的正弦曲线波叠加出一个带 90 度角的矩形波来，你会相信吗？你不会，就像当年的我一样。但是看看下图：
第一幅图是一个郁闷的正弦波 cos（x）
第二幅图是 2 个卖萌的正弦波的叠加 cos (x) +a.cos (3x)
第三幅图是 4 个发春的正弦波的叠加
第四幅图是 10 个便秘的正弦波的叠加
随着正弦波数量逐渐的增长，他们最终会叠加成一个标准的矩形，大家从中体会到了什么道理？
（只要努力，弯的都能掰直！）
随着叠加的递增，所有正弦波中上升的部分逐渐让原本缓慢增加的曲线不断变陡，而所有正弦波中下降的部分又抵消了上升到最高处时继续上升的部分使其变为水平线。一个矩形就这么叠加而成了。但是要多少个正弦波叠加起来才能形成一个标准 90 度角的矩形波呢？不幸的告诉大家，答案是无穷多个。（上帝：我能让你们猜着我？）
不仅仅是矩形，你能想到的任何波形都是可以如此方法用正弦波叠加起来的。这是没有接触过傅里叶分析的人在直觉上的第一个难点，但是一旦接受了这样的设定，游戏就开始有意思起来了。
还是上图的正弦波累加成矩形波，我们换一个角度来看看：
在这几幅图中，最前面黑色的线就是所有正弦波叠加而成的总和，也就是越来越接近矩形波的那个图形。而后面依不同颜色排列而成的正弦波就是组合为矩形波的各个分量。这些正弦波按照频率从低到高从前向后排列开来，而每一个波的振幅都是不同的。一定有细心的读者发现了，每两个正弦波之间都还有一条直线，那并不是分割线，而是振幅为 0 的正弦波！也就是说，为了组成特殊的曲线，有些正弦波成分是不需要的。
这里，不同频率的正弦波我们成为频率分量。
好了，关键的地方来了！！
如果我们把第一个频率最低的频率分量看作“1”，我们就有了构建频域的最基本单元。
对于我们最常见的有理数轴，数字“1”就是有理数轴的基本单元。
（好吧，数学称法为——基。在那个年代，这个字还没有其他奇怪的解释，后面还有正交基这样的词汇我会说吗?）
时域的基本单元就是“1 秒”，如果我们将一个角频率为的正弦波 cos（t）看作基础，那么频域的基本单元就是。
有了“1”，还要有“0”才能构成世界，那么频域的“0”是什么呢？cos（0t）就是一个周期无限长的正弦波，也就是一条直线！所以在频域，0 频率也被称为直流分量，在傅里叶级数的叠加中，它仅仅影响全部波形相对于数轴整体向上或是向下而不改变波的形状。
接下来，让我们回到初中，回忆一下已经死去的八戒，啊不，已经死去的老师是怎么定义正弦波的吧。
正弦波就是一个圆周运动在一条直线上的投影。所以频域的基本单元也可以理解为一个始终在旋转的圆
想看动图的同学请戳这里：
以及这里：
点出去的朋友不要被 wiki 拐跑了，wiki 写的哪有这里的文章这么没节操是不是。
介绍完了频域的基本组成单元，我们就可以看一看一个矩形波，在频域里的另一个模样了：
这是什么奇怪的东西？
这就是矩形波在频域的样子，是不是完全认不出来了？教科书一般就给到这里然后留给了读者无穷的遐想，以及无穷的吐槽，其实教科书只要补一张图就足够了：频域图像，也就是俗称的频谱，就是——
再清楚一点：
可以发现，在频谱中，偶数项的振幅都是0，也就对应了图中的彩色直线。振幅为 0 的正弦波。
动图请戳：
老实说，在我学傅里叶变换时，维基的这个图还没有出现，那时我就想到了这种表达方法，而且，后面还会加入维基没有表示出来的另一个谱——相位谱。
但是在讲相位谱之前，我们先回顾一下刚刚的这个例子究竟意味着什么。记得前面说过的那句“世界是静止的”吗？估计好多人对这句话都已经吐槽半天了。想象一下，世界上每一个看似混乱的表象，实际都是一条时间轴上不规则的曲线，但实际这些曲线都是由这些无穷无尽的正弦波组成。我们看似不规律的事情反而是规律的正弦波在时域上的投影，而正弦波又是一个旋转的圆在直线上的投影。那么你的脑海中会产生一个什么画面呢？
我们眼中的世界就像皮影戏的大幕布，幕布的后面有无数的齿轮，大齿轮带动小齿轮，小齿轮再带动更小的。在最外面的小齿轮上有一个小人——那就是我们自己。我们只看到这个小人毫无规律的在幕布前表演，却无法预测他下一步会去哪。而幕布后面的齿轮却永远一直那样不停的旋转，永不停歇。这样说来有些宿命论的感觉。说实话，这种对人生的描绘是我一个朋友在我们都是高中生的时候感叹的，当时想想似懂非懂，直到有一天我学到了傅里叶级数……
三、傅里叶级数（Fourier Series）的相位谱
上一章的关键词是：从侧面看。这一章的关键词是：从下面看。
在这一章最开始，我想先回答很多人的一个问题：傅里叶分析究竟是干什么用的？这段相对比较枯燥，已经知道了的同学可以直接跳到下一个分割线。
先说一个最直接的用途。无论听广播还是看电视，我们一定对一个词不陌生——频道。频道频道，就是频率的通道，不同的频道就是将不同的频率作为一个通道来进行信息传输。下面大家尝试一件事：
先在纸上画一个sin（x），不一定标准，意思差不多就行。不是很难吧。
好，接下去画一个sin（3x）+sin（5x）的图形。
别说标准不标准了，曲线什么时候上升什么时候下降你都不一定画的对吧？
好，画不出来不要紧，我把sin（3x）+sin（5x）的曲线给你，但是前提是你不知道这个曲线的方程式，现在需要你把sin（5x）给我从图里拿出去，看看剩下的是什么。这基本是不可能做到的。
但是在频域呢？则简单的很，无非就是几条竖线而已。
所以很多在时域看似不可能做到的数学操作，在频域相反很容易。这就是需要傅里叶变换的地方。尤其是从某条曲线中去除一些特定的频率成分，这在工程上称为滤波，是信号处理最重要的概念之一，只有在频域才能轻松的做到。
再说一个更重要，但是稍微复杂一点的用途——求解微分方程。（这段有点难度，看不懂的可以直接跳过这段）微分方程的重要性不用我过多介绍了。各行各业都用的到。但是求解微分方程却是一件相当麻烦的事情。因为除了要计算加减乘除，还要计算微分积分。而傅里叶变换则可以让微分和积分在频域中变为乘法和除法，大学数学瞬间变小学算术有没有。
傅里叶分析当然还有其他更重要的用途，我们随着讲随着提。
————————————————————————————————————
下面我们继续说相位谱：
通过时域到频域的变换，我们得到了一个从侧面看的频谱，但是这个频谱并没有包含时域中全部的信息。因为频谱只代表每一个对应的正弦波的振幅是多少，而没有提到相位。基础的正弦波A.sin(wt+θ)中，振幅，频率，相位缺一不可，不同相位决定了波的位置，所以对于频域分析，仅仅有频谱（振幅谱）是不够的，我们还需要一个相位谱。那么这个相位谱在哪呢？我们看下图，这次为了避免图片太混论，我们用7个波叠加的图。
鉴于正弦波是周期的，我们需要设定一个用来标记正弦波位置的东西。在图中就是那些小红点。小红点是距离频率轴最近的波峰，而这个波峰所处的位置离频率轴有多远呢？为了看的更清楚，我们将红色的点投影到下平面，投影点我们用粉色点来表示。当然，这些粉色的点只标注了波峰距离频率轴的距离，并不是相位。
这里需要纠正一个概念：时间差并不是相位差。如果将全部周期看作2Pi或者360度的话，相位差则是时间差在一个周期中所占的比例。我们将时间差除周期再乘2Pi，就得到了相位差。
在完整的立体图中，我们将投影得到的时间差依次除以所在频率的周期，就得到了最下面的相位谱。所以，频谱是从侧面看，相位谱是从下面看。下次偷看女生裙底被发现的话，可以告诉她：“对不起，我只是想看看你的相位谱。”
注意到，相位谱中的相位除了0，就是Pi。因为cos（t+Pi）=-cos（t），所以实际上相位为Pi的波只是上下翻转了而已。对于周期方波的傅里叶级数，这样的相位谱已经是很简单的了。另外值得注意的是，由于cos（t+2Pi）=cos（t），所以相位差是周期的，pi和3pi，5pi，7pi都是相同的相位。人为定义相位谱的值域为(-pi，pi]，所以图中的相位差均为Pi。
最后来一张大集合：
四、傅里叶变换（Fourier Tranformation）
相信通过前面三章，大家对频域以及傅里叶级数都有了一个全新的认识。但是文章在一开始关于钢琴琴谱的例子我曾说过，这个栗子是一个公式错误，但是概念典型的例子。所谓的公式错误在哪里呢？
傅里叶级数的本质是将一个周期的信号分解成无限多分开的（离散的）正弦波，但是宇宙似乎并不是周期的。曾经在学数字信号处理的时候写过一首打油诗：
往昔连续非周期，
回忆周期不连续，
任你ZT、DFT，
还原不回去。
（请无视我渣一样的文学水平……）
在这个世界上，有的事情一期一会，永不再来，并且时间始终不曾停息地将那些刻骨铭心的往昔连续的标记在时间点上。但是这些事情往往又成为了我们格外宝贵的回忆，在我们大脑里隔一段时间就会周期性的蹦出来一下，可惜这些回忆都是零散的片段，往往只有最幸福的回忆，而平淡的回忆则逐渐被我们忘却。因为，往昔是一个连续的非周期信号，而回忆是一个周期离散信号。
是否有一种数学工具将连续非周期信号变换为周期离散信号呢？抱歉，真没有。
比如傅里叶级数，在时域是一个周期且连续的函数，而在频域是一个非周期离散的函数。这句话比较绕嘴，实在看着费事可以干脆回忆第一章的图片。
而在我们接下去要讲的傅里叶变换，则是将一个时域非周期的连续信号，转换为一个在频域非周期的连续信号。
算了，还是上一张图方便大家理解吧：
或者我们也可以换一个角度理解：傅里叶变换实际上是对一个周期无限大的函数进行傅里叶变换。
所以说，钢琴谱其实并非一个连续的频谱，而是很多在时间上离散的频率，但是这样的一个贴切的比喻真的是很难找出第二个来了。
因此在傅里叶变换在频域上就从离散谱变成了连续谱。那么连续谱是什么样子呢？
你见过大海么？
为了方便大家对比，我们这次从另一个角度来看频谱，还是傅里叶级数中用到最多的那幅图，我们从频率较高的方向看。
以上是离散谱，那么连续谱是什么样子呢？
尽情的发挥你的想象，想象这些离散的正弦波离得越来越近，逐渐变得连续……
直到变得像波涛起伏的大海：
很抱歉，为了能让这些波浪更清晰的看到，我没有选用正确的计算参数，而是选择了一些让图片更美观的参数，不然这图看起来就像屎一样了。
不过通过这样两幅图去比较，大家应该可以理解如何从离散谱变成了连续谱的了吧？原来离散谱的叠加，变成了连续谱的累积。所以在计算上也从求和符号变成了积分符号。
不过，这个故事还没有讲完，接下去，我保证让你看到一幅比上图更美丽壮观的图片，但是这里需要介绍到一个数学工具才能然故事继续，这个工具就是——
五、宇宙耍帅第一公式：欧拉公式
虚数i这个概念大家在高中就接触过，但那时我们只知道它是-1 的平方根，可是它真正的意义是什么呢?
这里有一条数轴，在数轴上有一个红色的线段，它的长度是1。当它乘以 3 的时候，它的长度发生了变化，变成了蓝色的线段，而当它乘以-1 的时候，就变成了绿色的线段，或者说线段在数轴上围绕原点旋转了 180 度。
我们知道乘-1 其实就是乘了两次 i 使线段旋转了 180 度，那么乘一次 i 呢——答案很简单——旋转了 90 度。
同时，我们获得了一个垂直的虚数轴。实数轴与虚数轴共同构成了一个复数的平面，也称复平面。这样我们就了解到，乘虚数i的一个功能——旋转。
现在，就有请宇宙第一耍帅公式欧拉公式隆重登场——
这个公式在数学领域的意义要远大于傅里叶分析，但是乘它为宇宙第一耍帅公式是因为它的特殊形式——当x等于 Pi 的时候。
经常有理工科的学生为了跟妹子表现自己的学术功底，用这个公式来给妹子解释数学之美：”石榴姐你看，这个公式里既有自然底数e，自然数 1 和0，虚数i还有圆周率 pi，它是这么简洁，这么美丽啊！“但是姑娘们心里往往只有一句话：”臭屌丝……“
这个公式关键的作用，是将正弦波统一成了简单的指数形式。我们来看看图像上的涵义：
欧拉公式所描绘的，是一个随着时间变化，在复平面上做圆周运动的点，随着时间的改变，在时间轴上就成了一条螺旋线。如果只看它的实数部分，也就是螺旋线在左侧的投影，就是一个最基础的余弦函数。而右侧的投影则是一个正弦函数。
关于复数更深的理解，大家可以参考：
这里不需要讲的太复杂，足够让大家理解后面的内容就可以了。
六、指数形式的傅里叶变换
有了欧拉公式的帮助，我们便知道：正弦波的叠加，也可以理解为螺旋线的叠加在实数空间的投影。而螺旋线的叠加如果用一个形象的栗子来理解是什么呢？
高中时我们就学过，自然光是由不同颜色的光叠加而成的，而最著名的实验就是牛顿师傅的三棱镜实验：
所以其实我们在很早就接触到了光的频谱，只是并没有了解频谱更重要的意义。
但不同的是，傅里叶变换出来的频谱不仅仅是可见光这样频率范围有限的叠加，而是频率从 0 到无穷所有频率的组合。
这里，我们可以用两种方法来理解正弦波：
第一种前面已经讲过了，就是螺旋线在实轴的投影。
另一种需要借助欧拉公式的另一种形式去理解：
将以上两式相加再除2，得到：
这个式子可以怎么理解呢？
我们刚才讲过，e^(it)可以理解为一条逆时针旋转的螺旋线，那么e^(-it)则可以理解为一条顺时针旋转的螺旋线。而 cos (t)则是这两条旋转方向不同的螺旋线叠加的一半，因为这两条螺旋线的虚数部分相互抵消掉了！
举个例子的话，就是极化方向不同的两束光波，磁场抵消，电场加倍。
这里，逆时针旋转的我们称为正频率，而顺时针旋转的我们称为负频率（注意不是复频率）。
好了，刚才我们已经看到了大海——连续的傅里叶变换频谱，现在想一想，连续的螺旋线会是什么样子：
想象一下再往下翻：
是不是很漂亮？
你猜猜，这个图形在时域是什么样子？
哈哈，是不是觉得被狠狠扇了一个耳光。数学就是这么一个把简单的问题搞得很复杂的东西。
顺便说一句，那个像大海螺一样的图，为了方便观看，我仅仅展示了其中正频率的部分，负频率的部分没有显示出来。
如果你认真去看，海螺图上的每一条螺旋线都是可以清楚的看到的，每一条螺旋线都有着不同的振幅（旋转半径），频率（旋转周期）以及相位。而将所有螺旋线连成平面，就是这幅海螺图了。
好了，讲到这里，相信大家对傅里叶变换以及傅里叶级数都有了一个形象的理解了，我们最后用一张图来总结一下：
好了，傅里叶的故事终于讲完了，下面来讲讲我的故事：
这篇文章第一次被卸下来的地方你们绝对猜不到在哪，是在一张高数考试的卷子上。当时为了刷分，我重修了高数（上），但是后来时间紧压根没复习，所以我就抱着裸考的心态去了考场。但是到了考场我突然意识到，无论如何我都不会比上次考的更好了，所以干脆写一些自己对于数学的想法吧。于是用了一个小时左右的时间在试卷上洋洋洒洒写了本文的第一草稿。
你们猜我的了多少分？
没错，就是这个数字。而这 6 分的成绩是因为最后我实在无聊，把选择题全部填上了C，应该是中了两道，得到了这宝贵的 6 分。说真的，我很希望那张卷子还在，但是应该不太可能了。
那么你们猜猜我第一次信号与系统考了多少分呢？
没错，刚刚够参加补考的。但是我心一横没去考，决定重修。因为那个学期在忙其他事情，学习真的就抛在脑后了。但是我知道这是一门很重要的课，无论如何我要吃透它。说真的，信号与系统这门课几乎是大部分工科课程的基础，尤其是通信专业。
在重修的过程中，我仔细分析了每一个公式，试图给这个公式以一个直观的理解。虽然我知道对于研究数学的人来说，这样的学习方法完全没有前途可言，因为随着概念愈加抽象，维度越来越高，这种图像或者模型理解法将完全丧失作用。但是对于一个工科生来说，足够了。
后来来了德国，这边学校要求我重修信号与系统时，我彻底无语了。但是没办法，德国人有时对中国人就是有种藐视，觉得你的教育不靠谱。所以没办法，再来一遍吧。
这次，我考了满分，而及格率只有一半。
老实说，数学工具对于工科生和对于理科生来说，意义是完全不同的。工科生只要理解了，会用，会查，就足够了。但是很多高校却将这些重要的数学课程教给数学系的老师去教。这样就出现一个问题，数学老师讲得天花乱坠，又是推理又是证明，但是学生心里就只有一句话：学这货到底干嘛用的？
缺少了目标的教育是彻底的失败。
在开始学习一门数学工具的时候，学生完全不知道这个工具的作用，现实涵义。而教材上有只有晦涩难懂，定语就二十几个字的概念以及看了就眼晕的公式。能学出兴趣来就怪了！
好在我很幸运，遇到了大连海事大学的吴楠老师。他的课全程来看是两条线索，一条从上而下，一条从下而上。先将本门课程的意义，然后指出这门课程中会遇到哪样的问题，让学生知道自己学习的某种知识在现实中扮演的角色。然后再从基础讲起，梳理知识树，直到延伸到另一条线索中提出的问题，完美的衔接在一起！
这样的教学模式，我想才是大学里应该出现的。
最后，写给所有给我点赞并留言的同学。真的谢谢大家的支持，也很抱歉不能一一回复。因为知乎专栏的留言要逐次加载，为了看到最后一条要点很多次加载。当然我都坚持看完了，只是没办法一一回复。
本文只是介绍了一种对傅里叶分析新颖的理解方法，对于求学，还是要踏踏实实弄清楚公式和概念，学习，真的没有捷径。但至少通过本文，我希望可以让这条漫长的路变得有意思一些。
最后，祝大家都能在学习中找到乐趣…
可能感兴趣的话题
写的确实不错，原作者真的是用心了。连画的图都是自己画的，有自己的独特分析。好！
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线内容团队正试图以我们微薄的力量，把优秀的原创文章和译文分享给读者，为“快餐”添加一些“营养”元素。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2018 伯乐在线> 问题详情
一个质点同时在几个力作用下的位移为△r=4i—5j＋6k（SI)．其中一个力为恒力F=－3i—5j＋9k（SI)，则此力在
悬赏：0&答案豆
提问人：匿名网友
发布时间：
一个质点同时在几个力作用下的位移为△r=4i—5j+6k(SI)．其中一个力为恒力F=-3i—5j+9k(SI)，则此力在该位移过程中所做的功为（）．A． -67JB．17JC．67JD．91J请帮忙给出正确答案和分析，谢谢！
我有更好的答案
请先输入下方的验证码查看最佳答案
图形验证：
验证码提交中……
每天只需0.4元
选择支付方式
支付宝付款
郑重提醒：支付后，系统自动为您完成注册
请使用微信扫码支付(元)
支付后，系统自动为您完成注册
遇到问题请联系在线客服QQ：
微信扫一扫
体验上学吧搜题小程序
立即享有免费找答案
请您不要关闭此页面,支付完成后点击支付完成按钮
遇到问题请联系在线客服QQ：
恭喜您！升级VIP会员成功
提示：请截图保存您的账号信息，以方便日后登录使用。
常用邮箱：
用于找回密码
确认密码：863010人阅读
【Android 5.x】（10）
转载请标明出处：
RecyclerView出现已经有一段时间了，相信大家肯定不陌生了，大家可以通过导入support-v7对其进行使用。
据官方的介绍，该控件用于在有限的窗口中展示大量数据集，其实这样功能的控件我们并不陌生，例如：ListView、GridView。
那么有了ListView、GridView为什么还需要RecyclerView这样的控件呢？整体上看RecyclerView架构，提供了一种插拔式的体验，高度的解耦，异常的灵活，通过设置它提供的不同LayoutManager，ItemDecoration , ItemAnimator实现令人瞠目的效果。
你想要控制其显示的方式，请通过布局管理器LayoutManager
你想要控制Item间的间隔（可绘制），请通过ItemDecoration
你想要控制Item增删的动画，请通过ItemAnimator
你想要控制点击、长按事件，请自己写（擦，这点尼玛。）
鉴于我们对于ListView的使用特别的熟悉，对比下RecyclerView的使用代码：
mRecyclerView = findView(R.id.id_recyclerview);
mRecyclerView.setLayoutManager(layout);
mRecyclerView.setAdapter(adapter)
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
mRecyclerView.addItemDecoration(new DividerItemDecoration(
getActivity(), DividerItemDecoration.HORIZONTAL_LIST));
ok，相比较于ListView的代码，ListView可能只需要去设置一个adapter就能正常使用了。而RecyclerView基本需要上面一系列的步骤，那么为什么会添加这么多的步骤呢？
那么就必须解释下RecyclerView的这个名字了，从它类名上看，RecyclerView代表的意义是，我只管Recycler View，也就是说RecyclerView只管回收与复用View，其他的你可以自己去设置。可以看出其高度的解耦，给予你充分的定制自由（所以你才可以轻松的通过这个控件实现ListView,GirdView，瀑布流等效果）。
Just like ListView
package com.zhy.sample.demo_
import java.util.ArrayL
import java.util.L
import android.os.B
import android.support.v7.app.ActionBarA
import android.support.v7.widget.LinearLayoutM
import android.support.v7.widget.RecyclerV
import android.support.v7.widget.RecyclerView.ViewH
import android.view.LayoutI
import android.view.V
import android.view.ViewG
import android.widget.TextV
public class HomeActivity extends ActionBarActivity
private RecyclerView mRecyclerV
private List&String& mD
private HomeAdapter mA
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_single_recyclerview);
initData();
mRecyclerView = (RecyclerView) findViewById(R.id.id_recyclerview);
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
mRecyclerView.setAdapter(mAdapter = new HomeAdapter());
protected void initData()
mDatas = new ArrayList&String&();
for (int i = 'A'; i & 'z'; i++)
mDatas.add("" + (char) i);
class HomeAdapter extends RecyclerView.Adapter&HomeAdapter.MyViewHolder&
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
MyViewHolder holder = new MyViewHolder(LayoutInflater.from(
HomeActivity.this).inflate(R.layout.item_home, parent,
public void onBindViewHolder(MyViewHolder holder, int position)
holder.tv.setText(mDatas.get(position));
public int getItemCount()
return mDatas.size();
class MyViewHolder extends ViewHolder
public MyViewHolder(View view)
super(view);
tv = (TextView) view.findViewById(R.id.id_num);
Activity的布局文件
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" &
android:id="@+id/id_recyclerview"
android:divider="#ffff0000"
android:dividerHeight="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent" /&
Item的布局文件
&?xml version="1.0" encoding="utf-8"?&
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#44ff0000"
android:layout_height="wrap_content" &
android:id="@+id/id_num"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:text="1" /&
这么看起来用法与ListView的代码基本一致哈~~
看下效果图：
看起来好丑，Item间应该有个分割线，当你去找时，你会发现RecyclerView并没有支持divider这样的属性。那么怎么办，你可以给Item的布局去设置margin，当然了这种方式不够优雅，我们文章开始说了，我们可以自由的去定制它，当然我们的分割线也是可以定制的。
ItemDecoration
我们可以通过该方法添加分割线：
mRecyclerView.addItemDecoration()
该方法的参数为RecyclerView.ItemDecoration，该类为抽象类，官方目前并没有提供默认的实现类（我觉得最好能提供几个）。
该类的源码：
public static abstract class ItemDecoration {
public void onDraw(Canvas c, RecyclerView parent, State state) {
onDraw(c, parent);
public void onDrawOver(Canvas c, RecyclerView parent, State state) {
onDrawOver(c, parent);
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state) {
getItemOffsets(outRect, ((LayoutParams) view.getLayoutParams()).getViewLayoutPosition(),
@Deprecated
public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {
outRect.set(0, 0, 0, 0);
当我们调用mRecyclerView.addItemDecoration()方法添加decoration的时候，RecyclerView在绘制的时候，去会绘制decorator，即调用该类的onDraw和onDrawOver方法，
onDraw方法先于drawChildren
onDrawOver在drawChildren之后，一般我们选择复写其中一个即可。
getItemOffsets 可以通过outRect.set()为每个Item设置一定的偏移量，主要用于绘制Decorator。
接下来我们看一个RecyclerView.ItemDecoration的实现类，该类很好的实现了RecyclerView添加分割线（当使用LayoutManager为LinearLayoutManager时）。
该类参考自：
package com.zhy.sample.demo_
import android.content.C
import android.content.res.TypedA
import android.graphics.C
import android.graphics.R
import android.graphics.drawable.D
import android.support.v7.widget.LinearLayoutM
import android.support.v7.widget.RecyclerV
import android.support.v7.widget.RecyclerView.S
import android.util.L
import android.view.V
* This class is from the v7 samples of the Android SDK. It's not by me!
* See the license above for details.
public class DividerItemDecoration extends RecyclerView.ItemDecoration {
private static final int[] ATTRS = new int[]{
android.R.attr.listDivider
public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;
public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;
private Drawable mD
private int mO
public DividerItemDecoration(Context context, int orientation) {
final TypedArray a = context.obtainStyledAttributes(ATTRS);
mDivider = a.getDrawable(0);
a.recycle();
setOrientation(orientation);
public void setOrientation(int orientation) {
if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST) {
throw new IllegalArgumentException("invalid orientation");
mOrientation =
public void onDraw(Canvas c, RecyclerView parent) {
Log.v("recyclerview - itemdecoration", "onDraw()");
if (mOrientation == VERTICAL_LIST) {
drawVertical(c, parent);
drawHorizontal(c, parent);
public void drawVertical(Canvas c, RecyclerView parent) {
final int left = parent.getPaddingLeft();
final int right = parent.getWidth() - parent.getPaddingRight();
final int childCount = parent.getChildCount();
for (int i = 0; i & childC i++) {
final View child = parent.getChildAt(i);
android.support.v7.widget.RecyclerView v = new android.support.v7.widget.RecyclerView(parent.getContext());
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
.getLayoutParams();
final int top = child.getBottom() + params.bottomM
final int bottom = top + mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
public void drawHorizontal(Canvas c, RecyclerView parent) {
final int top = parent.getPaddingTop();
final int bottom = parent.getHeight() - parent.getPaddingBottom();
final int childCount = parent.getChildCount();
for (int i = 0; i & childC i++) {
final View child = parent.getChildAt(i);
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
.getLayoutParams();
final int left = child.getRight() + params.rightM
final int right = left + mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {
if (mOrientation == VERTICAL_LIST) {
outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
该实现类可以看到通过读取系统主题中的 android.R.attr.listDivider作为Item间的分割线，并且支持横向和纵向。如果你不清楚它是怎么做到的读取系统的属性用于自身，请参考我的另一篇博文：
获取到listDivider以后，该属性的值是个Drawable，在getItemOffsets中，outRect去设置了绘制的范围。onDraw中实现了真正的绘制。
我们在原来的代码中添加一句：
mRecyclerView.addItemDecoration(new DividerItemDecoration(this,
DividerItemDecoration.VERTICAL_LIST));
ok，现在再运行，就可以看到分割线的效果了。
该分割线是系统默认的，你可以在theme.xml中找到该属性的使用情况。那么，使用系统的listDivider有什么好处呢？就是方便我们去随意的改变，该属性我们可以直接声明在：
name="AppTheme" parent="AppBaseTheme"&
& =":listDivider"&@drawable/divider_bg&/item&
然后自己写个drawable即可，下面我们换一种分隔符：
&?xml version="1.0" encoding="utf-8"?&
&shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" &
android:centerColor="#ff00ff00"
android:endColor="#ff0000ff"
android:startColor="#ffff0000"
android:type="linear" /&
&size android:height="4dp"/&
现在的样子是：
当然了，你可以根据自己的需求，去随意的绘制，反正是画出来的，随便玩~~
ok，看到这，你可能觉得，这玩意真尼玛麻烦，完全不能比拟的心爱的ListView。那么继续看。
LayoutManager
好了，上面实现了类似ListView样子的Demo，通过使用其默认的LinearLayoutManager。
RecyclerView.LayoutManager吧，这是一个抽象类，好在系统提供了3个实现类：
LinearLayoutManager 现行管理器，支持横向、纵向。
GridLayoutManager 网格布局管理器
StaggeredGridLayoutManager
瀑布就式布局管理器
上面我们已经初步体验了下LinearLayoutManager，接下来看GridLayoutManager。
GridLayoutManager
我们尝试去实现类似GridView，秒秒钟的事情：
mRecyclerView.setLayoutManager(new GridLayoutManager(this,4));
只需要修改LayoutManager即可，还是很nice的。
当然了，改为GridLayoutManager以后，对于分割线，前面的DividerItemDecoration就不适用了，主要是因为它在绘制的时候，比如水平线，针对每个child的取值为：
final int left = parent.getPaddingLeft();
final int right = parent.getWidth() - parent.getPaddingRight();
因为每个Item一行，这样是没问题的。而GridLayoutManager时，一行有多个childItem，这样就多次绘制了，并且GridLayoutManager时，Item如果为最后一列（则右边无间隔线）或者为最后一行（底部无分割线）。
针对上述，我们编写了DividerGridItemDecoration。
package com.zhy.sample.demo_
import android.content.C
import android.content.res.TypedA
import android.graphics.C
import android.graphics.R
import android.graphics.drawable.D
import android.support.v7.widget.GridLayoutM
import android.support.v7.widget.RecyclerV
import android.support.v7.widget.RecyclerView.LayoutM
import android.support.v7.widget.RecyclerView.S
import android.support.v7.widget.StaggeredGridLayoutM
import android.view.V
public class DividerGridItemDecoration extends RecyclerView.ItemDecoration
private static final int[] ATTRS = new int[] { android.R.attr.listDivider };
private Drawable mD
public DividerGridItemDecoration(Context context)
final TypedArray a = context.obtainStyledAttributes(ATTRS);
mDivider = a.getDrawable(0);
a.recycle();
public void onDraw(Canvas c, RecyclerView parent, State state)
drawHorizontal(c, parent);
drawVertical(c, parent);
private int getSpanCount(RecyclerView parent)
int spanCount = -1;
LayoutManager layoutManager = parent.getLayoutManager();
if (layoutManager instanceof GridLayoutManager)
spanCount = ((GridLayoutManager) layoutManager).getSpanCount();
} else if (layoutManager instanceof StaggeredGridLayoutManager)
spanCount = ((StaggeredGridLayoutManager) layoutManager)
.getSpanCount();
return spanC
public void drawHorizontal(Canvas c, RecyclerView parent)
int childCount = parent.getChildCount();
for (int i = 0; i & childC i++)
final View child = parent.getChildAt(i);
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
.getLayoutParams();
final int left = child.getLeft() - params.leftM
final int right = child.getRight() + params.rightMargin
+ mDivider.getIntrinsicWidth();
final int top = child.getBottom() + params.bottomM
final int bottom = top + mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
public void drawVertical(Canvas c, RecyclerView parent)
final int childCount = parent.getChildCount();
for (int i = 0; i & childC i++)
final View child = parent.getChildAt(i);
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
.getLayoutParams();
final int top = child.getTop() - params.topM
final int bottom = child.getBottom() + params.bottomM
final int left = child.getRight() + params.rightM
final int right = left + mDivider.getIntrinsicWidth();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
private boolean isLastColum(RecyclerView parent, int pos, int spanCount,
int childCount)
LayoutManager layoutManager = parent.getLayoutManager();
if (layoutManager instanceof GridLayoutManager)
if ((pos + 1) % spanCount == 0)
return true;
} else if (layoutManager instanceof StaggeredGridLayoutManager)
int orientation = ((StaggeredGridLayoutManager) layoutManager)
.getOrientation();
if (orientation == StaggeredGridLayoutManager.VERTICAL)
if ((pos + 1) % spanCount == 0)
return true;
childCount = childCount - childCount % spanC
if (pos &= childCount)
return true;
return false;
private boolean isLastRaw(RecyclerView parent, int pos, int spanCount,
int childCount)
LayoutManager layoutManager = parent.getLayoutManager();
if (layoutManager instanceof GridLayoutManager)
childCount = childCount - childCount % spanC
if (pos &= childCount)
return true;
} else if (layoutManager instanceof StaggeredGridLayoutManager)
int orientation = ((StaggeredGridLayoutManager) layoutManager)
.getOrientation();
if (orientation == StaggeredGridLayoutManager.VERTICAL)
childCount = childCount - childCount % spanC
if (pos &= childCount)
return true;
if ((pos + 1) % spanCount == 0)
return true;
return false;
public void getItemOffsets(Rect outRect, int itemPosition,
RecyclerView parent)
int spanCount = getSpanCount(parent);
int childCount = parent.getAdapter().getItemCount();
if (isLastRaw(parent, itemPosition, spanCount, childCount))
outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
} else if (isLastColum(parent, itemPosition, spanCount, childCount))
outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
outRect.set(0, 0, mDivider.getIntrinsicWidth(),
mDivider.getIntrinsicHeight());
主要在getItemOffsets方法中，去判断如果是最后一行，则不需要绘制底部；如果是最后一列，则不需要绘制右边，整个判断也考虑到了StaggeredGridLayoutManager的横向和纵向，所以稍稍有些复杂。最重要还是去理解，如何绘制什么的不重要。一般如果仅仅是希望有空隙，还是去设置item的margin方便。
最后的效果是：
ok，看到这，你可能还觉得RecyclerView不够强大？
但是如果我们有这么个需求，纵屏的时候显示为ListView，横屏的时候显示两列的GridView，我们RecyclerView可以轻松搞定，而如果使用ListView去实现还是需要点功夫的~~~
当然了，这只是皮毛，下面让你心服口服。
StaggeredGridLayoutManager
瀑布流式的布局，其实他可以实现GridLayoutManager一样的功能，仅仅按照下列代码：
mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(4,
StaggeredGridLayoutManager.VERTICAL));
这两种写法显示的效果是一致的，但是注意StaggeredGridLayoutManager构造的第二个参数传一个orientation，如果传入的是StaggeredGridLayoutManager.VERTICAL代表有多少列；那么传入的如果是StaggeredGridLayoutManager.HORIZONTAL就代表有多少行，比如本例如果改为：
mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(4,
StaggeredGridLayoutManager.HORIZONTAL));
那么效果为：
可以看到，固定为4行，变成了左右滑动。有一点需要注意，如果是横向的时候，item的宽度需要注意去设置，毕竟横向的宽度没有约束了，应为控件可以横向滚动了。
如果你需要一样横向滚动的GridView，那么恭喜你。
ok，接下来准备看大招，如果让你去实现个瀑布流，最起码不是那么随意就可以实现的吧？但是，如果使用RecyclerView，分分钟的事。
那么如何实现？其实你什么都不用做，只要使用StaggeredGridLayoutManager我们就已经实现了，只是上面的item布局我们使用了固定的高度，下面我们仅仅在适配器的onBindViewHolder方法中为我们的item设置个随机的高度（代码就不贴了，最后会给出源码下载地址），看看效果图：
是不是棒棒哒，通过RecyclerView去实现ListView、GridView、瀑布流的效果基本上没有什么区别，而且可以仅仅通过设置不同的LayoutManager即可实现。
还有更nice的地方，就在于item增加、删除的动画也是可配置的。接下来看一下ItemAnimator。
ItemAnimator
ItemAnimator也是一个抽象类，好在系统为我们提供了一种默认的实现类，期待系统多
添加些默认的实现。
借助默认的实现，当Item添加和移除的时候，添加动画效果很简单:
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
系统为我们提供了一个默认的实现，我们为我们的瀑布流添加以上一行代码，效果为：
如果是GridLayoutManager呢？动画效果为：
注意，这里更新数据集不是用adapter.notifyDataSetChanged()而是
notifyItemInserted(position)与notifyItemRemoved(position)
否则没有动画效果。
上述为adapter中添加了两个方法：
public void addData(int position) {
mDatas.add(position, "Insert One");
notifyItemInserted(position);
public void removeData(int position) {
mDatas.remove(position);
notifyItemRemoved(position);
Activity中点击MenuItem触发：
public boolean onCreateOptionsMenu(Menu menu)
getMenuInflater().inflate(R.menu.main, menu);
return super.onCreateOptionsMenu(menu);
public boolean onOptionsItemSelected(MenuItem item)
switch (item.getItemId())
case R.id.id_action_add:
mAdapter.addData(1);
case R.id.id_action_delete:
mAdapter.removeData(1);
return true;
好了，到这我对这个控件已经不是一般的喜欢了~~~
当然了只提供了一种动画，那么我们肯定可以去自定义各种nice的动画效果。
高兴的是，github上已经有很多类似的项目了，这里我们直接引用下：，大家自己下载查看。
提供了SlideInOutLeftItemAnimator,SlideInOutRightItemAnimator,
SlideInOutTopItemAnimator,SlideInOutBottomItemAnimator等动画效果。
Click and LongClick
不过一个挺郁闷的地方就是，系统没有提供ClickListener和LongClickListener。
不过我们也可以自己去添加，只是会多了些代码而已。
实现的方式比较多，你可以通过mRecyclerView.addOnItemTouchListener去监听然后去判断手势，
当然你也可以通过adapter中自己去提供回调，这里我们选择后者，前者的方式，大家有兴趣自己去实现。
那么代码也比较简单：
class HomeAdapter extends RecyclerView.Adapter&HomeAdapter.MyViewHolder&
public interface OnItemClickLitener
void onItemClick(View view, int position);
void onItemLongClick(View view , int position);
private OnItemClickLitener mOnItemClickL
public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener)
this.mOnItemClickLitener = mOnItemClickL
public void onBindViewHolder(final MyViewHolder holder, final int position)
holder.tv.setText(mDatas.get(position));
if (mOnItemClickLitener != null)
holder.itemView.setOnClickListener(new OnClickListener()
public void onClick(View v)
int pos = holder.getLayoutPosition();
mOnItemClickLitener.onItemClick(holder.itemView, pos);
holder.itemView.setOnLongClickListener(new OnLongClickListener()
public boolean onLongClick(View v)
int pos = holder.getLayoutPosition();
mOnItemClickLitener.onItemLongClick(holder.itemView, pos);
return false;
adapter中自己定义了个接口，然后在onBindViewHolder中去为holder.itemView去设置相应
的监听最后回调我们设置的监听。
最后别忘了给item添加一个drawable:
&?xml version="1.0" encoding="utf-8"?&
xmlns:android="http://schemas.android.com/apk/res/android" &
android:state_pressed="true" android:drawable="@color/color_item_press"&&
android:drawable="@color/color_item_normal"&&
Activity中去设置监听：
mAdapter.setOnItemClickLitener(new OnItemClickLitener()
public void onItemClick(View view, int position)
Toast.makeText(HomeActivity.this, position + " click",
Toast.LENGTH_SHORT).show();
public void onItemLongClick(View view, int position)
Toast.makeText(HomeActivity.this, position + " long click",
Toast.LENGTH_SHORT).show();
mAdapter.removeData(position);
测试效果：
ok，到此我们基本介绍了RecylerView常见用法，包含了：
系统提供了几种LayoutManager的使用；
如何通过自定义ItemDecoration去设置分割线，或者一些你想作为分隔的drawable，注意这里
巧妙的使用了系统的listDivider属性，你可以尝试添加使用divider和dividerHeight属性。
如何使用ItemAnimator为RecylerView去添加Item移除、添加的动画效果。
介绍了如何添加ItemClickListener与ItemLongClickListener。
可以看到RecyclerView可以实现：
ListView的功能
GridView的功能
横向ListView的功能，参考
横向ScrollView的功能
瀑布流效果
便于添加Item增加和移除动画
整个体验下来，感觉这种插拔式的设计太棒了，如果系统再能提供一些常用的分隔符，多添加些动画效果就更好了。
通过简单改变下LayoutManager，就可以产生不同的效果，那么我们可以根据手机屏幕的宽度去动态设置LayoutManager，屏幕宽度一般的，显示为ListView；宽度稍大的显示两列的GridView或者瀑布流（或者横纵屏幕切换时变化，有点意思~）；显示的列数和宽度成正比。甚至某些特殊屏幕，让其横向滑动~~再选择一个nice的动画效果，相信这种插件式的编码体验一定会让你迅速爱上RecyclerView。
微信公众号：hongyangAndroid
（欢迎关注，第一时间推送博文信息）
文章：67篇
阅读：6857663
文章：10篇
阅读：148412
文章：11篇
阅读：255106