换行后附加字符串

Question

我想实现NSAttributedString的换行和串联（如上图所示）。第二个城市，在这种情况下，巴黎应该从顶部开始，但是它应该从德国的右侧开始，因为德国是从新线开始的，这就是为什么巴黎从德国开始而不是从顶部开始。任何帮助，将不胜感激。

以下是我的代码：

    /// Flight Attributed String
    var flightAttributedString = NSMutableAttributedString(string: "");

    /// From City
    let fromCityAttributes = [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 10.0, weight: .medium)];
    let fromCity = NSMutableAttributedString(string: "\((self.route?.fromCity)!)  ", attributes: fromCityAttributes);

    /// From Country
    let fromCountryAttributes = [NSAttributedString.Key.foregroundColor : kAppSecondryIconColor, NSAttributedString.Key.font: UIFont.systemFont(ofSize: 8.0)];
    let fromCountry = NSMutableAttributedString(string: "\n\((self.route?.fromCountry)!)", attributes: fromCountryAttributes);

    /// From City Complete
    fromCity.append(fromCountry);

    /// To City
    let toCityAttributes = [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 10.0, weight: .medium)] as [NSAttributedString.Key : Any]
    let toCity = NSMutableAttributedString(string: "\((self.route?.toCity)!)  ", attributes: toCityAttributes);

    /// To Country
    let toCountryAttributes = [NSAttributedString.Key.foregroundColor : kAppSecondryIconColor, NSAttributedString.Key.font: UIFont.systemFont(ofSize: 8.0)];
    let toCountry = NSMutableAttributedString(string: "\n\((self.route?.toCountry)!)", attributes: toCountryAttributes);

    /// To City Complete
    toCity.append(toCountry);
    // print("toCity.accessibilityFrame: \(toCity.accessibilityFrame)");

    /// Plain Icon
    let imgAttachment = NSTextAttachment()
    imgAttachment.image = UIImage(named: "iconAirplane.png")
    imgAttachment.bounds = CGRect(x: 0, y: -5, width: 25.0, height: 25.0)
    let imgAirplane = NSAttributedString(attachment: imgAttachment)

    /// Making Complete Flight String
    flightAttributedString.append(fromCity);
    flightAttributedString.append(imgAirplane);
    flightAttributedString.append(toCity);

    /// Draw the result in a lblFlight
    // self.lblFlight.lineBreakMode = .byWordWrapping;
    self.lblFlight.attributedText = flightAttributedString;

Answer 1

我将在此处亲自使用堆栈视图，这肯定会为您提供更大的灵活性：

import UIKit

class ViewController: UIViewController {

    private let flightBoardView: FlightBoardView = {
        $0.translatesAutoresizingMaskIntoConstraints = false
        return $0
    }(FlightBoardView())

    override func viewDidLoad() {
        super.viewDidLoad()
        setup()
        view.backgroundColor = .white
    }

    private func setup() {
        setupViews()
        setupConstraints()
    }

    private func setupViews() {
        flightBoardView.set(fromCountry: "Germany", fromCity: "Frankfurt", toCountry: "France", toCity: "Paris")
        view.addSubview(flightBoardView)
    }

    private func setupConstraints() {
        flightBoardView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        flightBoardView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    }
}

您的FlightBoardView可能是UIView的子类，看起来像这样：

class FlightBoardView: UIView {

    private lazy var departureStackView: UIStackView = {
        $0.distribution = .fill
        $0.alignment = .leading
        $0.axis = .vertical
        $0.spacing = 5
        $0.translatesAutoresizingMaskIntoConstraints = false
        return $0
    }(UIStackView(arrangedSubviews: [fromCountryLabel, fromCityLabel]))

    private lazy var destinationStackView: UIStackView = {
        $0.distribution = .fill
        $0.alignment = .leading
        $0.axis = .vertical
        $0.spacing = 5
        $0.translatesAutoresizingMaskIntoConstraints = false
        return $0
    }(UIStackView(arrangedSubviews: [toCountryLabel, toCityLabel]))

    private lazy var containerStackView: UIStackView = {
        $0.distribution = .fill
        $0.alignment = .center
        $0.axis = .horizontal
        $0.spacing = 20
        $0.translatesAutoresizingMaskIntoConstraints = false
        return $0
    }(UIStackView(arrangedSubviews: [departureStackView, planeImageView, destinationStackView]))

    private let fromCountryLabel: UILabel = {
        $0.textColor = .black
        $0.font = UIFont.systemFont(ofSize: 30)
        $0.translatesAutoresizingMaskIntoConstraints = false
        return $0
    }(UILabel())

    private let fromCityLabel: UILabel = {
        $0.textColor = .lightGray
        $0.font = UIFont.systemFont(ofSize: 15)
        $0.translatesAutoresizingMaskIntoConstraints = false
        return $0
    }(UILabel())

    private let toCountryLabel: UILabel = {
        $0.textColor = .black
        $0.font = UIFont.systemFont(ofSize: 30)
        $0.translatesAutoresizingMaskIntoConstraints = false
        return $0
    }(UILabel())

    private let toCityLabel: UILabel = {
        $0.textColor = .lightGray
        $0.font = UIFont.systemFont(ofSize: 15)
        $0.translatesAutoresizingMaskIntoConstraints = false
        return $0
    }(UILabel())

    private let planeImageView: UIImageView = {
        $0.contentMode = .scaleAspectFit
        $0.image = UIImage(named: "airplane")?.withRenderingMode(.alwaysTemplate)
        $0.tintColor = .systemBlue
        $0.translatesAutoresizingMaskIntoConstraints = false
        return $0
    }(UIImageView())

    override init(frame: CGRect) {
        super.init(frame: frame)
        setup()
    }

    required init?(coder: NSCoder) {
        fatalError()
    }

    private func setup() {
        addSubview(containerStackView)
        NSLayoutConstraint.activate([
            containerStackView.topAnchor.constraint(equalTo: topAnchor),
            containerStackView.leftAnchor.constraint(equalTo: leftAnchor),
            containerStackView.bottomAnchor.constraint(equalTo: bottomAnchor),
            containerStackView.rightAnchor.constraint(equalTo: rightAnchor),
            planeImageView.widthAnchor.constraint(equalToConstant: 50),
            planeImageView.heightAnchor.constraint(equalTo: planeImageView.widthAnchor),
        ])
    }

    func set(fromCountry: String, fromCity: String, toCountry: String, toCity: String) {
        fromCountryLabel.text = fromCountry
        fromCityLabel.text = fromCity
        toCountryLabel.text = toCountry
        toCityLabel.text = toCity
    }
}

当然，如果愿意，您可以对Storyboards和xib文件进行相同的操作，但这至少可以为您提供一个可行的示例，您可以根据需要进行调整。

我还添加了set(fromCountry:fromCity:toCountry:toCity:)方法，使您可以轻松地从父视图更改数据。