背景介紹

效果圖.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，那么你還有其他方式嗎？如何做呢？
• 就上一個問題，對比一下兩種方式的區別，以及各自的性能，你能給出一份報告對比嗎？
• 還是老話題，我歡迎將你的答案寫在回復中。