iOS可视化动态绘制八种排序过程

   <p>前面几篇博客都是关于排序的，在之前陆陆续续发布的博客中，我们先后介绍了冒泡排序、选择排序、插入排序、希尔排序、堆排序、归并排序以及快速排序。俗话说的好，做事儿要善始善终，本篇博客就算是对之前那几篇博客的总结了。而本篇博客的示例Demo也是在之前那些博客Demo的基础上做的，也算是集成了各种排序的方法，然后给出了可视化的解决方案。今天博客的内容还是比较有趣的。</p>    <p>因为本猿是做iOS开发的，所以就使用iOS相关的组件来表示上述各种排序的过程。使用可视化方式来感受一下上述这些排序方法的异同。本篇博客所使用的相关的排序代码都是来自于之前的博客。因为我们在之前实现各种排序Demo时，我们定义了相应的排序接口SortType，所以上述的七种排序对外的调用方式是一致的，所以在此基础上给出相应排序的可视化解决方案并不困难。本篇博客就会给出其相应的扩展过程。</p>    <h3><strong>一、可视化解决方案综述</strong></h3>    <p><strong>1.交互UI综述</strong></p>    <p>在本篇博客的第一部分我们先来整体的看一下我们Demo的功能。下方就是我们今天博客中的Demo的交互示意图。上方的输入框可以输入要排序元素的个数，下方输入的是300。程序会根据你输入的个数来随机生成数据，你输入300，就会随机生成300个数据提供排序使用。下方的SegmentControl可以选择不同的排序方式，本篇博客给出了7中常用的排序方式，选择完排序方式后可以点击右上方的排序按钮进行相应的排序。</p>    <p>下方显示的不同颜色的颜色条就是我们要排序的东西，我们会按照从小到大的方式对这些色条进行排序。左图中是未排序的状态，右图中是已经排序的状态。我们上面随机生成的数据反应到色条上就是色条的高度，我们按照色条的高度进行从小到大的排序。下方会给出每种排序的介绍。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/a391af48e938b17dabc9cf93e2f50232.png"></p>    <p><strong>2、部分核心代码实现</strong></p>    <p>为了实现今天的Demo，我们需要对之前我们实现的那一些列的排序的方法进行扩展。因为我们之前在实现各种排序时，我们先定义了SortType接口，依据“开放封闭原则”，我们可以为各种排序的类创建一个“简单工厂”以供我们的视图层使用。关于设计模式更多以及更详细的内容，可以移步之前发布的设计模式系列博客《设计模式Swift版》。</p>    <p>上方就是为各种Sort类提供的“简单工厂”。上面这个简单工厂在视图控制器中点击SegmentControl时会使用，因为我们在选择不同排序类的时候需要使用不同的排序对象。下方就是我们视图控制器对“简单工厂”的调用，当然我们所有排序类都有父类，你也可以使用“工厂方法”来创建相应的对象，在此就不做过多赘述了。</p>    <p><img src="https://simg.open-open.com/show/261c7b68f97aa5254987dca0a2506776.png"></p>    <p>下方代码段就是点击SegmentControl要调用的方法，其中从“简单工厂”中获取到相应排序方式的对象后，然后在设置相应的闭包回调。</p>    <p><img src="https://simg.open-open.com/show/14a393d34bbb8394e11bf1c2ffabbead.png"></p>    <h3><strong>二、冒泡排序</strong></h3>    <p>接下来我们来逐一看一下每种排序的具体效果。下方就是冒泡排序的效果，因为冒泡排序的时间复杂度是O(n^2)的，所以我们先设置元素个数是80， 如果太大的话会比较慢。因为我们在排序步骤结果输出时，每进行一次交换操作或者比较操作让排序线程休眠0.001秒，便于我们观察整个排序过程。</p>    <p>从下方这个动图上我们不难看出冒泡的整个过程，较小的数据从右往左以此往外冒。下方这个效果还是比较直观的，整个冒泡过程就是从后往前比较，如果后边的数要比前边的小就交换。冒泡过程如下所示：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/60f88077ced8f5c88bdff3dae14d693a.gif"></p>    <h3><strong>三、选择排序</strong></h3>    <p>选择排序的时间复杂度也是O(n^2)。下方是“选择排序”的可视化过程，选择排序的过程就是从无序序列中找出最小的那个值放到有序序列中最后方。不断执行这个过程，我们的序列就是有序的了。下方就是选择排序的整个过程，元素的个数是80.</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/df84dee5ffdf54d3a2e2cef4fd7f911c.gif"></p>    <h3><strong>四、插入排序</strong></h3>    <p>插入排序的复杂度与上述选择排序的时间复杂度一样，都是O(n^2)。下方就是插入排序的运行结果。插入排序是从无序序列中取出第一个值，然后插入到前方有序序列中相应的位置。每次插入后，有序序列就会增加1，无序序列就会减少1。下方就是插入排序的过程，如下所示：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/9de16305cb6245920f1f3a239975c370.gif"></p>    <h3><strong>五、希尔排序</strong></h3>    <p>希尔排序的效率要高一些，其时间复杂度是O(n^(3/2))。下方就是希尔排序的具体执行步骤，希尔排序又称为缩小增量排序。该排序方式是插入排序的升级版，等增量缩小到1时，我们的序列就是有序的了。下方就是希尔排序的具体执行步骤，如下所示：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/6b2af9358a13d60d1e25c36ff2a9627b.gif"></p>    <h3><strong>六、堆排序</strong></h3>    <p>堆排序比希尔排序更为高效，其时间复杂度为O(nlog2n)。下方的“堆排序”是根据大顶堆来进行排序的，大顶堆第一个值是序列中最大的，我们可以利用这一点获取无序序列中最大的那个值。首先我们将序列调整为大顶堆，然后把大顶堆的第一个值与最后一个值进行交换，然后再将剩下的序列调整成大顶堆，然后进行下一轮的替换。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/316918a0de4d40bf310589ef5841e695.gif"></p>    <h3><strong>七、归并排序</strong></h3>    <p>归并排序的时间复杂度也是O(nlog2n)。归并排序就是将无序数组拆分成多个只有一个元素的数组，然后进行两两合并。在合并的过程中将两个数组中的元素进行比较，将较小的放在前方，两个有序的数组合并后依然是有序的，然后再次进行两两合并，直到合并成一个数组为止。下方就是归并排序的执行顺序，从执行过程中，我们可以清楚的看到在排序过程中被分割的小的有序序列。归并排序的执行过程如下所示：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e1eaeee43d54318266d5f8b21825da9d.gif"></p>    <h3><strong>八、快速排序</strong></h3>    <p>快速排序的时间复杂度为O(nlog2n)。下方是快速排序的执行步骤，快速排序是利用里分治法的思想。从无序序列中取出一个值，比该值大的放在前方，比该值小的放在后方。然后递归执行前半部分和后半部分依次递归下去，我们的序列就是有序的了。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/0feb9c48b619ef93a3cc67cdb73cd10d.gif"></p>    <h3><strong>九、基数排序</strong></h3>    <p>下方是基数排序的运行效果，我们先输入1000个元素，生成1000个随机数，选择基数排序。如下所示：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/afcd90e38a9cb74903d5664cab6383f1.gif"></p>    <h3><strong>十、上述排序的比较</strong></h3>    <p>关于上述排序的比较，在此就不做过多赘述了，就引用“维基百科”中的表格来说明吧，如下所示:</p>    <p> </p>    <p> </p>    <p> </p>