ios - UITableView - 行 - 多重对齐

Question

我试图使行的内容(在 UITableView 中)具有多种对齐方式:左对齐、居中对齐和右对齐。我在 Stackoverflow 上搜索了解决方案，发现了这个:Different text alignment to a row in table view 。唯一的问题是该解决方案是基于 ObjectiveC 的，我在将其转换为基于 Swift 的解决方案时遇到了麻烦。

具体来说，我有一个代表事件用户列表的 UITableView。将内容加载到 TableView 中效果很好，但为了可读性，内容(分为三种类型)需要在视觉上分为三个不同的“部分”。我该怎么做呢？上面的解决方案在 Swift 中会是什么样子？提前致谢。

代码(Vive)

类声明

class MainViewController: UIViewController, UITableViewDataSource, UITableViewDelegate

viewDidLoad()

self.activeIDs.delegate = self
self.activeIDs.dataSource = self
self.activeIDs.rowHeight = 25
self.activeIDs.separatorStyle = UITableViewCellSeparatorStyle.None
self.activeIDs.allowsMultipleSelection = true

cellForRowAtIndexPath

func tableView(tableView: UITableView,
    cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{
        let cell = activeIDs.dequeueReusableCellWithIdentifier("cellReuseId", forIndexPath: indexPath) as ActiveIDTableViewCell

        cell.leftLabel.text = "I go left"
        cell.middleLabel.text = "I go center"
        cell.rightLabel.text = "I go right"

        return cell
}

numberOfRowsInSection

func tableView(tableView: UITableView,
    numberOfRowsInSection section: Int) -> Int {
        return 4 //I randomly chose 4, just for example
}

ActiveIDTableViewCell.swift - 几乎复制

import UIKit

class ActiveIDTableViewCell: UITableViewCell {

// alloc & init labels
let leftLabel = UILabel()
let middleLabel = UILabel()
let rightLabel = UILabel()

// MARK: Memory Management

override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
    // never forget to call super in overriden UIKit methods (almost never ;))
    super.init(style: .Default, reuseIdentifier: reuseIdentifier)

    // now let's assign these values we've set previously in storyboards
    leftLabel.textAlignment = NSTextAlignment.Left
    // you created a label, but you need to add this label as a subview of cells view.
    contentView.addSubview(leftLabel)

    middleLabel.textAlignment = NSTextAlignment.Center
    contentView.addSubview(middleLabel)

    rightLabel.textAlignment = NSTextAlignment.Right
    contentView.addSubview(rightLabel)
}

required init(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented") //Xcode points to this line when error is thrown
}

// MARK: Layout

override func layoutSubviews() {
    super.layoutSubviews()

    // here happens all the magic which skips autolayouts. You can ofc set autolayouts from code :)
    let frame = self.contentView.bounds
    // frame was the size of the cell, but we want to set our labels at least 10px from sides of cell - so it looks nicely
    let insetFrame = CGRectInset(frame, 10.0, 10.0)
    // width of each label is width of cell / 3 (you want 3 labels next to each other) minus margins
    let labelWidth = (CGRectGetWidth(insetFrame) - 20.0) / 3.0

    // lets calculate the rects and assign frames to calculated values
    let leftLabelRect = CGRectMake(CGRectGetMinX(insetFrame), CGRectGetMinY(insetFrame), labelWidth, CGRectGetHeight(insetFrame))
    leftLabel.frame = leftLabelRect

    let middleLabelRect = CGRectMake(CGRectGetMaxX(leftLabelRect), CGRectGetMinY(insetFrame), labelWidth, CGRectGetHeight(insetFrame))
    middleLabel.frame = middleLabelRect

    let rightLabelRect = CGRectMake(CGRectGetMaxX(middleLabelRect), CGRectGetMinY(insetFrame), labelWidth, CGRectGetHeight(insetFrame))
    rightLabel.frame = rightLabelRect
}}

我已经仔细检查了 Storyboard中单元标识符和自定义类等内容是否正确设置。

Answer 1

好的，小教程如何做到这一点，请根据编程最佳实践查看我在您的问题下的评论:

第一个文件，包含您的 ViewController:

class MyTableViewController: UITableViewController {

    // here ofc you'll have your array/dictionary of input data
    let titles = ["iOS", "Android", "Windows Phone", "Firefox OS", "Blackberry OS", "Tizen", "Windows Mobile", "Symbian", "Palm OS"]

    // this is to make sure how many rows your table should have
    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return titles.count
    }

    // here you dequeue tableViewCells, so they're reusable (so your table is fast & responding
    // allocating new resources for new cell is very consuming
    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell: MyTableViewCell = tableView.dequeueReusableCellWithIdentifier("cellId", forIndexPath: indexPath) as! MyTableViewCell
        // fill your data
        cell.rightLabel.text = "I'm right cell"
        cell.middleLabel.text = titles[indexPath.row]
        cell.leftLabel.text = "I'm left cell"

        return cell;
    }
}

第二个文件包含细胞类别:

class MyTableViewCell: UITableViewCell {

    @IBOutlet weak var leftLabel: UILabel!
    @IBOutlet weak var middleLabel: UILabel!
    @IBOutlet weak var rightLabel: UILabel!

}

现在如何告诉您如何使用 IB :/.就我个人而言，我更喜欢代码解决方案，但这是你的决定。

1. 复制代码；)
2. 将 TableViewController 从对象引入 Storyboard，在 Identity Inspector 中将类设置为 MyTableViewController
3. 扩展单元格，使高度达到所需值(我已设置为 50)，在 Identity Inspector 中将类设置为 MyTableViewCell
4. 向单元格添加 3 个标签
5. 选择全部 3 个标签并添加约束:
   • 等宽
   • 等高
   • 顶部垂直间距:10
   • 到底部的垂直间距:10
6. 选择左侧标签并设置:
   • 到中间标签的水平间距:10
   • 左侧水平间距:10
7. 选择正确的标签并设置:
   • 到中间标签的水平间距:10
   • 向右水平间距:10
8. 点击右下角的三角形并选择更新帧。一切都应该正确定位。
9. 选择每个标签，在右侧面板上选择属性检查器，在其中标记正确的对齐方式(左侧为左侧标签，中间为中间标签，右侧为右侧标签)。
10. 将适当的标签连接到 MyTableViewCell IBOutlets 中的标签。

使用此解决方案一切都应该正常工作。