结合自动布局绘制分隔线 [英] Draw a separator line in conjunction with Auto Layout

问题描述

我正在重新实现某种 UISplitViewController.现在我需要在主视图和详细视图之间画一条分隔线.现在我有一些问题:

I'm reimplementig some kind of UISplitViewController. Now I need to draw a separator line between the master and the detail view. Now I have some questions for this:

• 分隔线应该在视图控制器本身上还是应该是单独的视图?
• 自动布局呢?不允许设置框架.

我看到了 CALayer/CAShapeLayer、drawRect (CoreGraphics) 或使用 UIView/UILabel.根据那里的人的说法，最后一个应该会花费太多的性能.

I saw solutions for CALayer/CAShapeLayer, drawRect (CoreGraphics) or using the background color of an UIView/UILabel. The last one should cost too much performance according to the folks there.

一方面，在 UITableViewController 本身中画线很舒服.还是应该创建一个单独的 UIView?如果我嵌入一个单独的 UIView 会有更多的约束，它会使事情复杂化(必须设置单独的宽度)......它还应该适应方向变化(例如 UITableViewController 更改 -> 分隔线也应该调整大小).

On the one side it is comfortable to draw the line in the UITableViewController itself. Or should a separate UIView be created? If I embed a separate UIView there will be much more constraints and it will complicate things (would have to set separate widths) ... Also it should adapt to orientation changes (e.g. the size of the UITableViewController changes -> the separation line should also resize).

如何添加这样的划分规则?这样的划分规则可以在这里看到:

How can I add such a dividing rule? Such a dividing rule can be seen here:

推荐答案

如果你需要添加一个真正的单像素线，不要用图像来欺骗.这几乎是不可能的.就用这个吧:

If you need to add a true one pixel line, don't fool with an image. It's almost impossible. Just use this:

@interface UILine : UIView
@end

@implementation UILine

- (void)awakeFromNib {

    CGFloat sortaPixel = 1 / [UIScreen mainScreen].scale;

    // recall, the following...
    // CGFloat sortaPixel = 1 / self.contentScaleFactor;
    // ...does NOT work when loading from storyboard!

    UIView *line = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, sortaPixel)];

    line.userInteractionEnabled = NO;
    line.backgroundColor = self.backgroundColor;

    line.autoresizingMask = UIViewAutoresizingFlexibleWidth;

    [self addSubview:line];

    self.backgroundColor = [UIColor clearColor];
    self.userInteractionEnabled = NO;
}

@end

使用方法:

实际上在情节提要中，只需制作一个在您想要的确切位置和确切宽度的 UIView.(可以正常使用约束/自动布局.)

Actually in storyboard, simply make a UIView that is in the exact place, and exact width, you want. (Feel free to use constraints/autolayout as normal.)

让视图显示为 5 像素高，以便您在工作时可以清楚地看到它.

Make the view say five pixels high, simply so you can see it clearly, while working.

使 UIView 的 顶部 恰好位于您想要单像素线的位置.使 UIView 成为所需的颜色.

Make the top of the UIView exactly where you want the single-pixel line. Make the UIView the desired color of the line.

将类更改为 UILine.在运行时，它将在所有设备上的确切位置绘制一条完美的单像素线.

Change the class to UILine. At run time, it will draw a perfect single-pixel line in the exact location on all devices.

(对于垂直线类，只需修改CGRectMake.)

(For a vertical line class, simply modify the CGRectMake.)

希望对你有帮助！

这篇关于结合自动布局绘制分隔线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！