背景介绍

效果图.png

比如要实现上图所示的这样一种效果，我们可以做一个自定义控件，该自定义控件构造方法接受3个参数。
1、控件的宽度
2、控件的高度
3、群聊中人的图片数组

最终实现效果

最终效果.gif

设计思路

1、我们可以用一个UIView来放图片，分为4种情况来处理：

case 1 : 只有一张图片
    直接用一个UIimageView填充整个UIView
case 2 : 有两张图片
    分为左上角一个，有下角一个，主要是frame的计算。
case 3: 有三张图片
    分为上面一个居中，左下角一个，有下角一个，也是主要是frame的计算
case 4: 有四张图片
    四个角落各一个

2、另外圆角处理：
UIView 都的layer中有一个cornerRadius的属性，这个直接就加圆角了，比android方便很多，圆角的borderWidth以及borderColor都很方便。

2、然后，图片之间还存在叠加的处理：
思路就是，我们虽然等分了这个UIView为4块，但是我们估计把每块的宽高，都稍微加一点，并且保证它们的frame都落在我们这个UIView之内就OK。

代码实现

//
//  CompoundImageView.swift
//  Created by brzhang on 16/2/24.
//  Copyright © 2016年 brang. All rights reserved.
//

import UIKit

class GroupCirCleImage: UIView {

    var borderWidth: CGFloat = 1.5
    var borderColor = UIColor.greenColor()
    var imageWidth: CGFloat
    var imageHeight: CGFloat
    var imageUrls : [String]?
    var ctx: CGContextRef?
    var imageCoverPx: CGFloat = 10
    lazy var sdManger = SDWebImageManager.sharedManager()
    var frames: [String: CGRect] = [String: CGRect]()
    var countFlag = 0
    init(width: CGFloat, height: CGFloat, imageUrls: [String]?) {
        imageWidth = width / 2
        imageHeight = width / 2
        self.imageUrls = imageUrls
        super.init(frame: CGRectMake(0, 0, width, height))
        drawImages()
    }

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

    override func drawRect(rect: CGRect) {
        // Drawing code
        super.drawRect(rect)
    }

    func initFrames() {
        frames["topLeft"] = CGRectMake(0, 0, imageWidth + imageCoverPx, imageCoverPx + imageHeight)
        frames["topRight"] = CGRectMake(imageWidth - imageCoverPx, 0, imageWidth + imageCoverPx, imageCoverPx + imageHeight)
        frames["bottomLeft"] = CGRectMake(0, imageHeight - imageCoverPx, imageWidth + imageCoverPx, imageCoverPx + imageHeight)
        frames["bottomRight"] = CGRectMake(imageWidth - imageCoverPx, imageHeight - imageCoverPx, imageWidth + imageCoverPx, imageCoverPx + imageHeight)
        frames["topCenter"] = CGRectMake(self.center.x - (imageWidth + imageCoverPx) / 2, 0, imageWidth + imageCoverPx, imageCoverPx + imageHeight)
    }

    func init_context(size: CGSize) -> CGContextRef? {
        UIGraphicsBeginImageContext(size);
        let ctx = UIGraphicsGetCurrentContext()

        // 设置笔触颜色
        CGContextSetStrokeColorWithColor(ctx, borderColor.CGColor)

        // 设置笔触宽度
        CGContextSetLineWidth(ctx, borderWidth)

        // 设置填充色

        CGContextSetFillColorWithColor(ctx, UIColor.purpleColor().CGColor)

        CGContextSetLineJoin(ctx, .Round)

        CGContextSetLineCap(ctx, .Round)

        return ctx
    }

    func drawImages() {

        initFrames()

        guard imageUrls != nil && imageUrls?.count > 0 else {
            return
        }
        let count = imageUrls!.count
        switch count {
        case 1:
            // 画图
            getImageFromNet(imageUrls![0], completion: { [unowned self](result) -> Void in
                guard let image = result as? UIImage else {
                    return
                }
                let ctx = self.init_context(self.frame.size)
                let borderRect = CGRectMake(self.borderWidth / 2, self.borderWidth / 2, self.imageWidth * 2 - self.borderWidth, self.imageHeight * 2 - self.borderWidth)
                CGContextAddEllipseInRect(ctx, borderRect)
                CGContextStrokePath(ctx)

                let rect = CGRectMake(self.borderWidth, self.borderWidth, self.imageWidth * 2 - self.borderWidth * 2, self.imageHeight * 2 - self.borderWidth * 2)
                CGContextAddEllipseInRect(ctx, rect);
                // 裁剪(按照当前的路径形状裁剪)
                CGContextClip(ctx)
                image.drawInRect(rect)

                let newImage = UIGraphicsGetImageFromCurrentImageContext();
                UIGraphicsEndImageContext();
                self.addSubview(UIImageView.init(image: newImage))
            })
        case 2:
            countFlag = 2
            getImageFromNet(imageUrls![0], completion: { [unowned self](result) -> Void in

                self.addToView(result, frame: self.frames["topLeft"], layerPosition: 2 - 0)
            })
            getImageFromNet(imageUrls![1], completion: { [unowned self](result) -> Void in
                self.addToView(result, frame: self.frames["bottomRight"], layerPosition: 2 - 1)
            })
        case 3:
            countFlag = 3
            getImageFromNet(imageUrls![0], completion: { [unowned self](result) -> Void in

                self.addToView(result, frame: self.frames["topCenter"], layerPosition: 3 - 0)
            })
            getImageFromNet(imageUrls![1], completion: { [unowned self](result) -> Void in
                self.addToView(result, frame: self.frames["bottomRight"], layerPosition: 3 - 1)
            })
            getImageFromNet(imageUrls![2], completion: { [unowned self](result) -> Void in
                self.addToView(result, frame: self.frames["bottomLeft"], layerPosition: 3 - 2)
            })

        case 4:
            countFlag = 4

            let startTime = NSDate().timeIntervalSince1970
            hlog("start point is \(startTime)")
            getImageFromNet(imageUrls![0], completion: { [unowned self](result) -> Void in

                self.addToView(result, frame: self.frames["topLeft"], layerPosition: 4 - 0)
            })
            getImageFromNet(imageUrls![1], completion: { [unowned self](result) -> Void in

                self.addToView(result, frame: self.frames["topRight"], layerPosition: 4 - 1)
            })
            getImageFromNet(imageUrls![2], completion: { [unowned self](result) -> Void in
                self.addToView(result, frame: self.frames["bottomRight"], layerPosition: 4 - 2)
            })

            getImageFromNet(imageUrls![3], completion: { [unowned self](result) -> Void in
                self.addToView(result, frame: self.frames["bottomLeft"], layerPosition: 4 - 3)
            })
            hlog("end point is \(NSDate().timeIntervalSince1970) ,it takes \(NSDate().timeIntervalSince1970 - startTime)")
        default:
            break
        }
    }

    func addToView(result: AnyObject, frame: CGRect?, layerPosition: Int) {
        let newImage = self.generateNewImages(result)
        let uiimage = UIImageView.init(image: newImage)
        uiimage.frame = frame!
        uiimage.tag = layerPosition
        uiimage.hidden = true
        self.addSubview(uiimage)
        self.countFlag--
        if countFlag <= 0 {
            adjustLayerPosition()
        }
    }

    /**
     重新排序，覆盖方式，层级越大，越在上层,注意，view本身的tag是0
     */
    func adjustLayerPosition() {
        for i in Range(start: 1, end: 5) {
            let view = self.viewWithTag(i)
            if view != nil {
                view!.removeFromSuperview()
                view?.hidden = false
                self.insertSubview(view!, atIndex: i - 1)
            }
        }
    }

    func generateNewImages(result: AnyObject) -> UIImage? {
        guard let image = result as? UIImage else {
            return nil
        }
        let ctx = self.init_context(CGSizeMake(self.imageWidth + self.imageCoverPx, self.imageHeight + self.imageCoverPx))
        let borderRect = CGRectMake(self.borderWidth / 2, self.borderWidth / 2, self.imageWidth + self.imageCoverPx - self.borderWidth, self.imageHeight + self.imageCoverPx - self.borderWidth)
        CGContextAddEllipseInRect(ctx, borderRect)
        CGContextStrokePath(ctx)

        let rect = CGRectMake(self.borderWidth, self.borderWidth, self.imageWidth + self.imageCoverPx - self.borderWidth * 2, self.imageHeight + self.imageCoverPx - self.borderWidth * 2)
        CGContextAddEllipseInRect(ctx, rect);
        // 裁剪(按照当前的路径形状裁剪)
        CGContextClip(ctx)
        image.drawInRect(rect)

        let newImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return newImage
    }

    func getImageFromNet(imageUrl: String, completion: blockOne) {
        sdManger.downloadImageWithURL(NSURL.init(string: imageUrl), options: SDWebImageOptions.AllowInvalidSSLCertificates, progress: nil, completed: { (image, error, cacheType, flag, nsurl) -> Void in
            if error == nil {
                completion(result: image)
            }
        })
    }
}

extension GroupCirCleImage: ValueChangeDelete {

    func imageCoverPxChange(newConverPx: CGFloat) {
        imageCoverPx = newConverPx
        for imageview in self.subviews {
            imageview.removeFromSuperview()
        }
        drawImages()
    }
    func imageWidthChange(newWidth: CGFloat) {
    }
    func imageHeightChange(newHeight: CGFloat) {
    }
}

测试用例

import UIKit
@objc class ForTestViewController: CPBaseViewController {

    override func viewDidLoad() {
        initAndLayoutStaticViews()
    }

    override func initAndLayoutStaticViews() {

        let imageUrls = ["http://cross.store.qq.com/cross/8b44fd266bba50be97436a2cc567b7818a1d32388ee2b623/",
            "http://cross.store.qq.com/cross/ec257a55c6090677a34dcd383b86915959f138f1b9e19e1f/",
            "http://cross.store.qq.com/cross/747b4f18548187c7b720c3ea81ed5d118328e67688ee32d3/",
            "http://q2.qlogo.cn/g?b=qq&k=KX81eH22t530OorJdVqPpA&s=100&t=1416830863"]

        let view = CompoundImageView.init(width: 200, height: 200, imageUrls: imageUrls)
        //let view = GroupCirCleImage.init(width: 200, height: 200, imageUrls: imageUrls)
        view.tag = 1000
        view.frame.origin.x = SCREEN_WIDTH / 2 - 200 / 2
        view.frame.origin.y = SCREEN_HEIGHT / 2 - 200 / 2
        self.view.addSubview(view)

        let sliderImageCover = UISlider.init(frame: CGRectMake(SCREEN_WIDTH / 2 - 100 / 2, CGRectGetMaxY(view.frame) + 20, 100, 20))
        sliderImageCover.minimumValue = 5
        sliderImageCover.maximumValue = 40
        sliderImageCover.addTarget(self, action: "sliderValueChanged:", forControlEvents: .ValueChanged)
        sliderImageCover.value = 10
        self.view.addSubview(sliderImageCover)

        let labelImageCover = UILabel.init(frame: CGRectMake(CGRectGetMinX(sliderImageCover.frame) - 110, sliderImageCover.center.y - 30 / 2, 100, 30))
        labelImageCover.text = "覆盖像素:"
        self.view.addSubview(labelImageCover)

        let sizeWidthSlider = UISlider.init(frame: CGRectMake(SCREEN_WIDTH / 2 - 100 / 2, CGRectGetMaxY(sliderImageCover.frame) + 20, 100, 20))
        sizeWidthSlider.minimumValue = 100
        sizeWidthSlider.maximumValue = 300
        sizeWidthSlider.addTarget(self, action: "sizeWidthSliderValueChanged:", forControlEvents: .ValueChanged)
        sizeWidthSlider.value = 200
        self.view.addSubview(sizeWidthSlider)

        let labelImageWidth = UILabel.init(frame: CGRectMake(CGRectGetMinX(sizeWidthSlider.frame) - 110, sizeWidthSlider.center.y - 30 / 2, 100, 30))
        labelImageWidth.text = "宽度"
        self.view.addSubview(labelImageWidth)

        let sizeHeightSlider = UISlider.init(frame: CGRectMake(SCREEN_WIDTH / 2 - 100 / 2, CGRectGetMaxY(sizeWidthSlider.frame) + 20, 100, 20))
        sizeHeightSlider.minimumValue = 100
        sizeHeightSlider.maximumValue = 300
        sizeHeightSlider.addTarget(self, action: "sizeHeightSliderValueChanged:", forControlEvents: .ValueChanged)
        sizeHeightSlider.value = 200
        self.view.addSubview(sizeHeightSlider)

        let labelImageHeight = UILabel.init(frame: CGRectMake(CGRectGetMinX(sizeWidthSlider.frame) - 110, sizeHeightSlider.center.y - 30 / 2, 100, 30))
        labelImageHeight.text = "高度"
        self.view.addSubview(labelImageHeight)
    }

    func sliderValueChanged(slider: UISlider) {
        let view: ValueChangeDelete = self.view.superview?.viewWithTag(1000) as! ValueChangeDelete
        print(slider.value)
        let startTime = NSDate().timeIntervalSince1970
        hlog("start point is \(startTime)")
        view.imageCoverPxChange(CGFloat(slider.value))
        hlog("end point is \(NSDate().timeIntervalSince1970) ,it takes \(NSDate().timeIntervalSince1970 - startTime)")
    }

    func sizeWidthSliderValueChanged(slider: UISlider) {
        let view: ValueChangeDelete = self.view.superview?.viewWithTag(1000) as! ValueChangeDelete
        print(slider.value)
        view.imageWidthChange(CGFloat(slider.value))
    }
    func sizeHeightSliderValueChanged(slider: UISlider) {
        let view: ValueChangeDelete = self.view.superview?.viewWithTag(1000) as! ValueChangeDelete
        print(slider.value)
        view.imageHeightChange(CGFloat(slider.value))
    }
}

总结及问题部分

1、总结，我们在做项目的过程中，会遇到一些需求中要用到的一些ui元素是我们现有的控件无法满足的，这时候，我们有必要自己做一些自定义控件，方便代码重用。
2、问题部分来了，呵呵~~

• 实现圆角的方式一定不是只有去改变layer层的cornerRadius，那么你还有其他方式吗？如何做呢？
• 就上一个问题，对比一下两种方式的区别，以及各自的性能，你能给出一份报告对比吗？
• 还是老话题，我欢迎将你的答案写在回复中。