OC开发记录（2）

2022.05.03

书接上回

之后继续在开发这款应用，由于是落地应用，有测试阶段，所以在等待测试的时候总结了一下实现UI界面的一些思路。

1.首先是受益最大的cell重构，这个上一个开发记录中提到过，既可以支持复用，又提升了代码的结构清晰度。

2.在这几个cell中，有几个地方是我关注的。

        下面的左边的内容，我定义为sourceLabel，右侧的内容我定义为readCountImg和readCountLabel。这里的需求为当readCountLabel的数字变化时，左侧的readCountImg和他的间距保持不变。也就是说，readCountImg和readCountLabel的相对位置不变。

        这里我的实现方法是：

        （1）锁定readCountLabel的height，根据字的多少计算它的width。

        （2）这样得到了label的height和width，下一步是定位readCountLabel的x和y。由于y的位置和sourceLabel是一致的，所以只需要使用sourceLabel.frame.origin.y即可。x的位置我是这样定义的：

        这样就确定了readCountLabel的位置了，然后是readCountImg的位置，也很简单，就是readCountLabel的左边4px的地方。

        PS：这里有个要注意的地方，我定义了一个rcLabelAttribute，key和value分别为NSFontAttributeName和self.readCountLabel.font，这是为了在计算CGSize时保持计算出的大小和readCountLabel的字体大小一致。

        PS2：rcLabelBoundSize里的第一个参数是宽度，第二个参数是高度。由于高度固定，宽度需要动态调整，因此赋予一个最大值MAXFLOAT。注意它只是一个boundSize，并不是实际size。实际size的计算在rcLabelSize这里。

        具体代码如下：

    // readCountLabel，用右边做相对定位
    // 高度固定，根据字的多少计算长度
    self.readCountLabel.text = model.readCount;
    self.readCountLabel.numberOfLines = 0;
    CGSize rcLabelBoundSize = CGSizeMake(MAXFLOAT, 20);
    NSDictionary *rcLabelAttribute = @{ NSFontAttributeName: self.readCountLabel.font };
    CGSize rcLabelSize = [self.readCountLabel.text boundingRectWithSize:rcLabelBoundSize options:NSStringDrawingTruncatesLastVisibleLine | NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading attributes:rcLabelAttribute context:nil].size;
    rcLabelSize = CGSizeMake(roundf(rcLabelSize.width)+1, roundf(rcLabelSize.height)+1);
    // 根据计算结果重新设置Label的尺寸
    self.readCountLabel.frame = CGRectMake(MRFullScreenWidth - 2 * paddingLeftAndRight - marginLeftAndRight - rcLabelSize.width,
                                           self.sourceLabel.frame.origin.y,
                                           rcLabelSize.width,
                                           rcLabelSize.height);
    
    // readCountImage
    self.readCountImage.frame = CGRectMake(self.readCountLabel.frame.origin.x - 24,
                                           self.readCountLabel.frame.origin.y,
                                           20,
                                           20);

        （3）确定了Label和Image的位置，最后为了避免Label的文字过长，导致右侧的文字和图片覆盖到左侧的sourceLabel，因此我们要再调整一下左侧sourceLabel的width。这里的contentWidth就是MRFullScreenWidth - 2 * paddingLeftAndRight。

        代码如下：

self.sourceLabel.frame = CGRectMake(paddingLeftAndRight + 4,
                                        self.titleLabel.frame.origin.y + self.titleLabel.frame.size.height + 8,
                                        contentWidth - 2 * marginLeftAndRight - self.readCountLabel.frame.size.width - self.readCountImage.frame.size.width - 4,
                                        20);

       先记录到这里。