swift代碼實(shí)現(xiàn)群聊縮略圖的自定義控件

背景介紹

效果圖.png

比如要實(shí)現(xiàn)上圖所示的這樣一種效果，我們可以做一個(gè)自定義控件，該自定義控件構(gòu)造方法接受3個(gè)參數(shù)。
1、控件的寬度
2、控件的高度
3、群聊中人的圖片數(shù)組

最終實(shí)現(xiàn)效果

最終效果.gif

設(shè)計(jì)思路

1、我們可以用一個(gè)UIView來(lái)放圖片，分為4種情況來(lái)處理：

case 1 : 只有一張圖片
    直接用一個(gè)UIimageView填充整個(gè)UIView
case 2 : 有兩張圖片
    分為左上角一個(gè)，有下角一個(gè)，主要是frame的計(jì)算。
case 3: 有三張圖片
    分為上面一個(gè)居中，左下角一個(gè)，有下角一個(gè)，也是主要是frame的計(jì)算
case 4: 有四張圖片
    四個(gè)角落各一個(gè)

2、另外圓角處理：
UIView 都的layer中有一個(gè)cornerRadius的屬性，這個(gè)直接就加圓角了，比android方便很多，圓角的borderWidth以及borderColor都很方便。

2、然后，圖片之間還存在疊加的處理：
思路就是，我們雖然等分了這個(gè)UIView為4塊，但是我們估計(jì)把每塊的寬高，都稍微加一點(diǎn)，并且保證它們的frame都落在我們這個(gè)UIView之內(nèi)就OK。

代碼實(shí)現(xiàn)

//
//  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()

        // 設(shè)置筆觸顏色
        CGContextSetStrokeColorWithColor(ctx, borderColor.CGColor)

        // 設(shè)置筆觸寬度
        CGContextSetLineWidth(ctx, borderWidth)

        // 設(shè)置填充色

        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:
            // 畫(huà)圖
            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);
                // 裁剪(按照當(dāng)前的路徑形狀裁剪)
                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()
        }
    }

    /**
     重新排序，覆蓋方式，層級(jí)越大，越在上層,注意，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);
        // 裁剪(按照當(dāng)前的路徑形狀裁剪)
        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) {
    }
}

測(cè)試用例

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))
    }
}

總結(jié)及問(wèn)題部分

1、總結(jié)，我們?cè)谧鲰?xiàng)目的過(guò)程中，會(huì)遇到一些需求中要用到的一些ui元素是我們現(xiàn)有的控件無(wú)法滿足的，這時(shí)候，我們有必要自己做一些自定義控件，方便代碼重用。
2、問(wèn)題部分來(lái)了，呵呵~~

  • 實(shí)現(xiàn)圓角的方式一定不是只有去改變layer層的cornerRadius，那么你還有其他方式嗎？如何做呢？
  • 就上一個(gè)問(wèn)題，對(duì)比一下兩種方式的區(qū)別，以及各自的性能，你能給出一份報(bào)告對(duì)比嗎？
  • 還是老話題，我歡迎將你的答案寫(xiě)在回復(fù)中。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果，實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜，今天將帶大家一窺iOS動(dòng)畫(huà)全貌。在這里你可以看...
    F麥子閱讀 5,275評(píng)論 5贊 13
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果，實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜，今天將帶大家一窺ios動(dòng)畫(huà)全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,699評(píng)論 6贊 30
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,835評(píng)論 4贊 61
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,366評(píng)論 25贊 708
  • 李奶奶 李奶奶大概70來(lái)歲，因?yàn)槲覊焊鶝](méi)問(wèn)過(guò)她到底多大，認(rèn)識(shí)李奶奶，一切機(jī)緣來(lái)自我們班的五個(gè)一基地之一助殘基地...
    艾一支小筆閱讀 799評(píng)論 2贊 12

友情鏈接更多精彩內(nèi)容