图形化冒泡排序

本文介绍了如何使用OC实现冒泡排序的图形化展示,通过可视化的方式让排序过程更加直观。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天晚上下班回来 , 一朋友问我想把冒泡排序图形化展示出来 , 是怎样 , 我想大概也就是肉眼比较直观的吧 .既然没说用什么语言 , OC自带方法就可以实现了 , 只是在处理view上稍微麻烦点 .

#import "ViewController.h"

@interface ViewController ()
//存储所有的label
@property (strong ,nonatomic) NSMutableArray *labelsInfo;
//存储所有的X值
@property (strong, nonatomic) NSArray *positionXNew;

@end

- (void)viewDidLoad {
    [super viewDidLoad];

    CGFloat width = 25.f;
    CGFloat height = 25.f;

    self.labelsInfo = [NSMutableArray array];
    //创建10个label用于展示
    for (NSInteger index = 0; index < 10; index++) {

        CGFloat labelX = arc4random_uniform(self.view.bounds.size.width - width);
        CGFloat labelY = arc4random_uniform(self.view.bounds.size.height - height);;

        UILabel *label = [[UILabel alloc]init];
        label.backgroundColor = [UIColor colorWithRed:arc4random_uniform(255)/255.0 green:arc4random_uniform(255)/255.0 blue:arc4random_uniform(255)/255.0 alpha:1.0];
        label.frame = CGRectMake(labelX, labelY, width, height);
        label.textAlignment = NSTextAlignmentCenter;
        label.text = [NSString stringWithFormat:@"%li",index];

        [self.view addSubview:label];
        //存储初始化数据
        [self.labelsInfo addObject:@{@"obj":label,@"X":@(labelX)}];

    }

    //重新整理数据
    NSArray *array = [self.labelsInfo valueForKey:@"X"];
    array = [array sortedArrayUsingComparator:^NSComparisonResult(id  _Nonnull obj1, id  _Nonnull obj2) {

        return obj1 > obj2;
    }];
    //保存所有X值
    self.positionXNew = array;
}

//点击屏幕实现排序
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    dispatch_async(dispatch_get_global_queue(0, 0), ^{

        //重新升序赋值
    for (NSInteger i = 0; i < self.labelsInfo.count; i ++) {

        //线程稍作睡眠 , 看起来比较直观一些
        [NSThread sleepForTimeInterval:1.f];

        dispatch_async(dispatch_get_main_queue(), ^{
            UILabel *label = [self.labelsInfo valueForKey:@"obj"][i];
            __block CGPoint center = label.center;
            __block CGRect bounds = label.bounds;
            [UIView animateWithDuration:1.f animations:^{
                bounds.size.width = 25.f + i *5;
                bounds.size.height = 25.f + i *5;
                center.x = [self.positionXNew[i]floatValue];
                center.y = self.view.bounds.size.height/2;
                label.bounds = bounds;
                label.center = center;
            }];
        });
     }
  });
}

//实现结果如下:

这里写图片描述

图形化编程环境(如Scratch)中实现冒泡排序,主要是通过可视化的积木块来模拟冒泡排序的逻辑过程。尽管图形化编程语言不具备传统文本型编程语言的高效性能,但其直观的交互界面非常适合初学者理解算法的基本思想和执行流程。 冒泡排序的核心思想是通过重复遍历列表,比较相邻元素并在顺序错误时交换它们,从而逐步将较大的元素“浮”到列表的末尾,类似于气泡上升的过程。这一过程需要多轮遍历,直到整个列表有序为止。 ### 实现步骤 1. **初始化数据** 在Scratch中,可以通过创建一个列表来表示待排序的数据。例如,定义一个名为`numbers`的列表,并手动输入或随机生成一些数字作为初始数据。 2. **外层循环控制遍历次数** 冒泡排序需要进行`n-1`次完整的遍历(其中`n`是列表长度),因为每次遍历至少会把一个元素放到正确的位置上。可以使用`重复执行 (n - 1) 次`这样的控制结构来模拟外层循环。 3. **内层循环处理相邻元素比较与交换** 对于每一次遍历,需要从第一个元素开始,依次比较相邻的两个元素。如果前一个元素大于后一个元素,则交换它们。这一步骤可以用`重复执行 (n - 1 - i) 次`来控制,其中`i`表示当前是第几次完整遍历。 4. **可视化比较与交换过程** 图形化编程的一个重要优势是可以将每一步操作可视化。例如,在Scratch中,可以通过改变角色大小、颜色等方式来表示不同的数值,并且在每次比较和交换时让角色动起来,这样用户可以看到排序的动态过程。此外,为了让人眼能够感知这个过程,可以在每次比较操作之间加入短暂的延迟[^2]。 5. **优化机制(可选)** 冒泡排序的一个常见优化方法是在每一轮遍历中检查是否有任何交换发生。如果没有发生交换,说明列表已经有序,可以提前结束排序过程。这种优化能有效减少不必要的比较次数,提高效率。 ### 示例代码结构(Scratch伪代码) 以下是一个简化的伪代码示例,展示了如何在Scratch环境中构建冒泡排序: ```scratch 当绿旗被点击 设置 [i v] 为 [0] 重复执行 (length of [numbers v] - 1) 次 设置 [swapped v] 为 [false] 设置 [j v] 为 [0] 重复执行 (length of [numbers v] - 1 - i) 次 如果 ([numbers v] 第 (j) 项) > ([numbers v] 第 (j + 1) 项) 替换 [numbers v] 的第 (j) 项为 ([numbers v] 第 (j + 1) 项) 替换 [numbers v] 的第 (j + 1) 项为 (临时变量) 设置 [swapped v] 为 [true] 结束 等待 (0.002) 秒 // 模拟比较耗时[^2] 改变 [j v] 由 [1] 结束 如果 <not (swapped)> 那么 停止 [这个脚本 v] 结束 改变 [i v] 由 [1] 结束 ``` ### 总结 通过上述步骤和结构,可以在图形化编程环境中较为完整地实现冒泡排序算法。这种方式不仅帮助学习者理解排序的基本原理,还提供了丰富的视觉反馈,使得抽象的算法概念变得具体而生动。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值