iOS 中突出显示的文本（类似卡拉 OK 的应用）

Posted 2023-03-06

【中文标题】iOS 中突出显示的文本（类似卡拉 OK 的应用）

【英文标题】：Highlighted text in iOS (karaoke like app)

【发布时间】：2012-08-29 13:18:44

【问题描述】：

我正在尝试创建一个类似卡拉 OK 的应用程序，但我遇到了一个问题。

我有一首 mp3 歌曲和 UITextView 中显示的相应歌词。 我想突出显示/下划线（或类似的东西）从该 mp3 文件中听到的单词。我对每个单词都有相应的时间（开始时间、结束时间、持续时间），但我不知道如何突出显示它们。

我在 Stack Overflow 上进行了搜索，但已经发布的问题都没有解决我的问题。

我发现 UITextView 可能不适合我的要求，但我不知道还能使用什么。

我在 WWDC 2011 上看到过类似的东西：一个核心动画“弹跳球”演示，但我无法实现它。

请帮我想办法做到这一点。

【问题讨论】：

使用单行 UILabel，后面有彩色视图，这可能是可能的，但我认为你不能用多行来做到这一点......

好的，但这意味着将突出显示整行或仅突出显示覆盖视图的那些...我实际上想在特定时间突出显示每个单词以与歌曲匹配，我认为使用view 和 uilabel 不是一种非常有效的方法......

是的，但是您可以编写一个函数来计算单词的矩形，然后将突出显示视图设置为该矩形，甚至对其进行动画处理...或者您可以等待 ios 6，因为它支持 NSAttributedString...

如何动态获取对应单词的位置？

如果您在 29:30 左右观看 Core Animation Essentials (developer.apple.com/videos/wwdc/2011) 下的视频，他们会展示一个完全符合我需要的演示，但我在任何地方都找不到示例代码，而且不幸的是，我自己没能实现它:(

【参考方案1】：

在我看来，您有两个选择：

1。核心文本属性

使用 Core Text，您可以为单词添加下划线并为其添加许多其他装饰。下面是给文本加下划线的例子：

//Create a font
CTFontRef sysUIFont = CTFontCreateUIFontForLanguage(kCTFontSystemFontType,
    24.0, NULL);

//Create a string
NSString *aString = @"Random text";

//Choose the color
CGColorRef color = [UIColor blueColor].CGColor;

//Single underline
NSNumber *underline = [NSNumber numberWithInt:kCTUnderlineStyleSingle];

//Pack the attributes into a dictionary
NSDictionary *attributesDict = [NSDictionary dictionaryWithObjectsAndKeys:
    (id)sysUIFont, (id)kCTFontAttributeName,
    color, (id)kCTForegroundColorAttributeName,
    underline, (id)kCTUnderlineStyleAttributeName, nil];

//Make the attributed string
NSAttributedString *attrString = [[NSAttributedString alloc] initWithString:string
    attributes:attributesDict];

现在这可以很好地为文本添加下划线，但我不确定如何在歌词进行时让下划线从一个单词移动到另一个单词。

---

2。自定义 UIView 下划线

现在您的第二个选择是创建一个自定义下划线类，它是 UIView 的子类。这很容易制作动画。你甚至不必为下划线创建一个单独的类（尽管我推荐它）；您可以创建一个 UIView 并使用如下动画将其从一个词移到另一个词：

CABasicAnimation *underlineMove = [CABasicAnimation animationWithKeyPath:@"position"];
underlineMove.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
endPosition = CGPointMake((float)nextWord.x, (float)nextWord.y);
underlineMove.toValue = [NSValue valueWithCGPoint:endPosition];
underlineMove.duration = currentWord.duration;
[underlineView addAnimation:underlineMove forKey:@"animation"];

【讨论】：

如何动态获取下一个单词的位置？

@stonycis - 我不完全确定如何做到这一点。您可能必须手动将文本放置在指定点并存储该点，然后传递到动画中。

@stonycis，我认为您可能需要为歌词中的每个单词构建一个范围数组，并在适当的时间循环遍历它们（该数组实际上必须包含您可以获得的字符串从 NSStringFromRange() 因为你不能把范围放在一个数组中）。您可以使用 NSString 方法、componentsSeparatedByString: 或 componentsSeparatedByCharactersInSet: 将歌词字符串分解为单个单词。使用 rangeOfString: 循环遍历该数组以获取原始歌词字符串中的范围，并将这些范围（转换为字符串）添加到您的数组中。

【参考方案2】：

我发现最简单的方法是使用 uiwebview，以 html 格式插入文本并使用 javascript 下划线/突出显示它...希望它对每个想要这样做的人有所帮助:)