像 Apple 那样在按钮中插入 V 形？答案

【问题标题】：Inserting a chevron into a button like Apple does?像 Apple 那样在按钮中插入 V 形？
【发布时间】：2016-02-25 03:25:47
【问题描述】：

我想找到一种有效的方法来为我的按钮添加 V 形，类似于 Apple 在 iTunes 中的做法。例如，在下图中，您可以在“查看全部”和“条款和条件”文本之后看到一个 V 形。是否有一个看起来像这样的 unicode 字符，或者如果没有，是否有一种简单的方法可以实现相同的效果？

我尝试搜索 unicode 字符，但我找到的所有 V 字要么太粗、太高或太小。

注意：我意识到我可以将自动布局与 UIImageView 一起使用，但这似乎有点过头了，特别是如果我希望两个元素都居中对齐，如下面的“条款和条件”示例所示。这将涉及类似的事情，例如向按钮和图像添加超级视图，添加必要的约束以将其调整到子视图的框架，然后将这个新的超级视图与中心对齐。这将产生大约 8 个约束和 3 个视图，而不是理想情况下的 2 个约束和一个视图。另外，它不会使人字形可点击。（由于手指匹配模糊，在 iPhone 上没什么大不了的，但在模拟器中很明显。）

我希望有更简单的方法来做到这一点，例如使用 unicode 字符，或直接在按钮内添加图像。

【问题讨论】：

查看UIButton 的titleEdgeInsets 和imageEdgeInsets 属性。

标签： ios cocoa-touch unicode uibutton uiimage

【解决方案1】：

我刚刚注意到他们的网站上有类似的图标：

在这种情况下，他们创建了一个自定义字体appleicons_text：

然后他们将more 类添加到任何需要V 形的元素。实际添加 chevron 的相关 CSS 类是：

.more:after {
    font-family: as-AppleIcons;
    content: ""
}

请注意，content 看起来是空的，但实际上在第二个引号附近有一个隐藏的 V 形字符。如果您安装了字体，您应该会看到 V 形图标。（将该行粘贴到文本编辑中会显示一个问号字符。）

最后，他们确保 as-AppleIcon 将显示在您的浏览器中：

@font-face {
    font-family: as-AppleIcons;
    url(assets/ac-appleicons/fonts/appleicons_text.ttf) format("truetype")
}

注意：我省略了一堆与这个答案没有直接关系的 css 代码。

Apple imported this font into iOS 有可能使用 NSAttributedString 来产生相同的效果。

更新：看起来有一个开源项目做类似的事情，叫做Font Awesome，到目前为止有超过650个图标。

【讨论】：