如何创建单向箭头标签 [英] How to create one sided arrowed label

问题描述

我不是在寻找代码片段.我只是想知道如何开发如下所示的 UI 组件.我对创建它有多种想法，但很想知道最好的方法

I am not looking out for code snippet. I am just curious to know how to develop a UI component which is shown below. I have multiple thoughts on creating it, but would love to know the best approach

• 创建一个标签并对其图层进行一些操作
• 设置背景图片并在标签上添加文字
• 设置带有文字的图片

开发它的好方法是什么.请提出任何建议.

What will be the good approach to develop it. Any suggestions please.

推荐答案

您想显示单行文本.您可以为此使用 UILabel.

You want to display a single line of text. You can use a UILabel for that.

您有一个要填充的形状.您可以为此使用 CAShapeLayer.最好将形状层包裹在 UIView 子类中，以便 UIKit 可以正确布局.

You have a shape you want to fill. You can use a CAShapeLayer for that. It's best to wrap the shape layer in a UIView subclass so that UIKit can lay it out properly.

您想将文本放在形状上，因此使用父视图将标签和形状组合为子视图.

You want to put the text over the shape, so use a parent view to combine the label and the shape as subviews.

import UIKit

class TagView: UIView {

    init() {
        super.init(frame: .zero)
        addSubview(background)
        addSubview(label)

        background.translatesAutoresizingMaskIntoConstraints = false
        label.translatesAutoresizingMaskIntoConstraints = false

        label.setContentHuggingPriority(.defaultHigh + 10, for: .horizontal)
        label.setContentHuggingPriority(.defaultHigh + 10, for: .vertical)

        NSLayoutConstraint.activate([
            background.heightAnchor.constraint(equalTo: label.heightAnchor, constant: 4),
            background.centerYAnchor.constraint(equalTo: label.centerYAnchor),
            background.widthAnchor.constraint(equalTo: label.widthAnchor, constant: 20),
            background.centerXAnchor.constraint(equalTo: label.centerXAnchor, constant: -2),
            leadingAnchor.constraint(equalTo: background.leadingAnchor),
            trailingAnchor.constraint(equalTo: background.trailingAnchor),
            topAnchor.constraint(equalTo: background.topAnchor),
            bottomAnchor.constraint(equalTo: background.bottomAnchor),
            ])
    }

    let label = UILabel()

    private let background = BackgroundView()

    private class BackgroundView: UIView {
        override class var layerClass: AnyClass { return CAShapeLayer.self }

        override func layoutSubviews() {
            super.layoutSubviews()
            layoutShape()
        }

        private func layoutShape() {
            let layer = self.layer as! CAShapeLayer
            layer.fillColor = #colorLiteral(red: 0.731529057, green: 0.8821037412, blue: 0.9403864741, alpha: 1)
            layer.strokeColor = nil

            let bounds = self.bounds
            let h2 = bounds.height / 2
            let path = UIBezierPath()
            path.move(to: CGPoint(x: 0, y: h2))
            path.addLine(to: CGPoint(x: h2, y: 0))
            path.addLine(to: CGPoint(x: bounds.maxX - h2, y: 0))
            path.addArc(withCenter: CGPoint(x: bounds.maxX - h2, y: h2), radius: h2, startAngle: -.pi/2, endAngle: .pi/2, clockwise: true)
            path.addLine(to: CGPoint(x: h2, y: bounds.maxY))
            path.close()

            layer.path = path.cgPath
        }
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

import PlaygroundSupport
let root = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
root.backgroundColor = .white
PlaygroundPage.current.liveView = root

let tag = TagView()
tag.translatesAutoresizingMaskIntoConstraints = false
tag.label.text = "CURRENT"
root.addSubview(tag)
NSLayoutConstraint.activate([
    tag.centerXAnchor.constraint(equalTo: root.centerXAnchor),
    tag.centerYAnchor.constraint(equalTo: root.centerYAnchor),
])

结果:

这篇关于如何创建单向箭头标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！