Swift - 微信聊天群头像实现 （群聊的组合头像）

1，样例效果图

（1）组合图片的功能我使用扩展  UIImage 的方式实现。

（2）根据初始化传入的图片数组中图片数量的不同（超过 9张图片的话也只显示前 9个），组件会自动设置内部图片的尺寸和位置。

（3）除了只有一张图片的情况外。内部小图片尺寸实际上只有两种。即小于等于 4张，或者大于 4张这两种情况。

（4）生成返回的是一个  UIImage 对象，为了让头像图标有圆角效果。这里给  imageView 设置了相关圆角属性。

2，样例代码

（1） UIImageExGroupIcon.swift（扩展  UImage 实现具体功能）

• 首先根据图片数量的不同，我们先初步生成田字格或9宫格这两种单元格布局。
• 再根据实际数量，删除多余单元格，并调整单元格位置。
• 最后将各个 image 绘制到对应的单元格雨区上。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119

import  UIKit   extension  UIImage  {            //生成群聊图标      class  func  groupIcon(wh: CGFloat , images:[ UIImage ], bgColor: UIColor ?) ->  UIImage  {          let  finalSize =  CGSize (width:wh, height:wh)          var  rect:  CGRect  =  CGRect .zero          rect.size = finalSize                    //开始图片处理上下文（由于输出的图不会进行缩放，所以缩放因子等于屏幕的scale即可          UIGraphicsBeginImageContextWithOptions (finalSize,  false , 0)                    //绘制背景          if  (bgColor !=  nil ) {              let  context:  CGContext  =  UIGraphicsGetCurrentContext ()!              //添加矩形背景区域              context.addRect(rect)              //设置填充颜色              context.setFillColor(bgColor!.cgColor)              context.drawPath(using: .fill)          }                    //绘制图片          if  images.count >= 1 {              //获取群聊图标中每个小图片的位置尺寸              var  rects =  self .getRectsInGroupIcon(wh:wh, count:images.count)              var  count = 0              //将每张图片绘制到对应的区域上              for  image  in  images {                  if  count > rects.count-1 {                      break                  }                                    let  rect = rects[count]                  image.draw( in : rect)                  count = count + 1              }          }                    let  newImage =  UIGraphicsGetImageFromCurrentImageContext ()          UIGraphicsEndImageContext ()          return  newImage!      }            //获取群聊图标中每个小图片的位置尺寸      class  func  getRectsInGroupIcon(wh: CGFloat , count: Int ) -> [ CGRect ] {          //如果只有1张图片就直接占全部位置          if  count == 1 {              return  [ CGRect (x:0, y:0, width:wh, height:wh)]          }                    //下面是图片数量大于1张的情况          var  array = [ CGRect ]()          //图片间距          var  padding:  CGFloat  = 10          //小图片尺寸          var  cellWH:  CGFloat          //用于后面计算的单元格数量（小于等于4张图片算4格单元格，大于4张算9格单元格）          var  cellCount: Int                    if  count <= 4 {              cellWH = (wh-padding*3)/2              cellCount = 4          }  else  {              padding = padding/2              cellWH = (wh-padding*4)/3              cellCount = 9          }                    //总行数          let  rowCount =  Int (sqrt( Double (cellCount)))          //根据单元格长宽，间距，数量返回所有单元格初步对应的位置尺寸          for  i  in  0..<cellCount {              //当前行              let  row = i/rowCount              //当前列              let  column = i%rowCount              let  rect =  CGRect (x:padding* CGFloat (column+1)+cellWH* CGFloat (column),                                y:padding* CGFloat (row+1)+cellWH* CGFloat (row),                                width:cellWH, height:cellWH)              array.append(rect)          }            //根据实际图片的数量再调整单元格的数量和位置          if  count == 2 {              array.removeSubrange(0...1)              for  i  in  0..<array.count {                  array[i].origin.y = array[i].origin.y - (padding+cellWH)/2              }          } else  if  count == 3 {              array.remove(at: 0)              array[0].origin.x = (wh-cellWH)/2          } else  if  count == 5 {              array.removeSubrange(0...3)              for  i  in  0..<array.count {                  if  i<2 {                      array[i].origin.x = array[i].origin.x - (padding+cellWH)/2                  }                  array[i].origin.y = array[i].origin.y - (padding+cellWH)/2              }          } else  if  count == 6 {              array.removeSubrange(0...2)              for  i  in  0..<array.count {                  array[i].origin.y = array[i].origin.y - (padding+cellWH)/2              }          } else  if  count == 7 {              array.removeSubrange(0...1)              array[0].origin.x = (wh-cellWH)/2          }          else  if  count == 8 {              array.remove(at: 0)              for  i  in  0..<2 {                  array[i].origin.x = array[i].origin.x - (padding+cellWH)/2              }          }          return  array      } }

（2） ViewController.swift（测试代码）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105

import  UIKit   class  ViewController :  UIViewController  {        override  func  viewDidLoad() {          super .viewDidLoad()                    //图标初始化          let  image0 =  UIImage (named: "0" )!          let  image1 =  UIImage (named: "1" )!          let  image2 =  UIImage (named: "2" )!          let  image3 =  UIImage (named: "3" )!          let  image4 =  UIImage (named: "4" )!          let  image5 =  UIImage (named: "5" )!          let  image6 =  UIImage (named: "6" )!          let  image7 =  UIImage (named: "7" )!          let  image8 =  UIImage (named: "8" )!            //聊天群图标尺寸（长宽一样）          let  viewWH: CGFloat  = 100                    //聊天群图标背景色（这里使用灰色，不设置的话则是透明的）          let  viewBgColor =  UIColor (red: 0, green:0, blue: 0, alpha: 0.1)                    //imageView的圆角半径          let  corner = viewWH/20                  //创建生成各种情况的聊天群图标          let  imageView0 =  UIImageView (frame:  CGRect (x:5,y:20,width:viewWH,height:viewWH))          imageView0.image =  UIImage .groupIcon(wh:viewWH, images:[image0],                                               bgColor:viewBgColor)          imageView0.layer.masksToBounds =  true          imageView0.layer.cornerRadius = corner   //圆角          self .view.addSubview(imageView0)                    let  imageView1 =  UIImageView (frame:  CGRect (x:110,y:20,width:viewWH,height:viewWH))          imageView1.image =  UIImage .groupIcon(wh:viewWH, images:[image0,image1],                                               bgColor:viewBgColor)          imageView1.layer.masksToBounds =  true          imageView1.layer.cornerRadius = corner   //圆角          self .view.addSubview(imageView1)                    let  imageView2 =  UIImageView (frame:  CGRect (x:215,y:20,width:viewWH,height:viewWH))          imageView2.image =  UIImage .groupIcon(wh:viewWH, images:[image0,image1,image2],                                               bgColor:viewBgColor)          imageView2.layer.masksToBounds =  true          imageView2.layer.cornerRadius = corner   //圆角          self .view.addSubview(imageView2)                    let  imageView3 =  UIImageView (frame:  CGRect (x:5,y:125,width:viewWH,height:viewWH))          imageView3.image =  UIImage .groupIcon(wh:viewWH, images:[image0,image1,image2,                                                                  image3],                                               bgColor:viewBgColor)          imageView3.layer.masksToBounds =  true          imageView3.layer.cornerRadius = corner   //圆角          self .view.addSubview(imageView3)                    let  imageView4 =  UIImageView (frame:  CGRect (x:110,y:125,width:viewWH,height:viewWH))          imageView4.image =  UIImage .groupIcon(wh:viewWH, images:[image0,image1,image2,                                                                  image3,image4],                                               bgColor:viewBgColor)          imageView4.layer.masksToBounds =  true          imageView4.layer.cornerRadius = corner   //圆角          self .view.addSubview(imageView4)                    let  imageView5 =  UIImageView (frame:  CGRect (x:215,y:125,width:viewWH,height:viewWH))          imageView5.image =  UIImage .groupIcon(wh:viewWH, images:[image0,image1,image2,                                                                  image3,image4,image5],                                               bgColor:viewBgColor)          imageView5.layer.masksToBounds =  true          imageView5.layer.cornerRadius = corner   //圆角          self .view.addSubview(imageView5)                    let  imageView6 =  UIImageView (frame:  CGRect (x:5,y:230,width:viewWH,height:viewWH))          imageView6.image =  UIImage .groupIcon(wh:viewWH, images:[image0,image1,image2,                                                                  image3,image4,image5,                                                                  image6],                                               bgColor:viewBgColor)          imageView6.layer.masksToBounds =  true          imageView6.layer.cornerRadius = corner   //圆角          self .view.addSubview(imageView6)                    let  imageView7 =  UIImageView (frame:  CGRect (x:110,y:230,width:viewWH,height:viewWH))          imageView7.image =  UIImage .groupIcon(wh:viewWH, images:[image0,image1,image2,                                                                  image3,image4,image5,                                                                  image6,image7],                                               bgColor:viewBgColor)          imageView7.layer.masksToBounds =  true          imageView7.layer.cornerRadius = corner   //圆角          self .view.addSubview(imageView7)                    let  imageView8 =  UIImageView (frame:  CGRect (x:215,y:230,width:viewWH,height:viewWH))          imageView8.image =  UIImage .groupIcon(wh:viewWH, images:[image0,image1,image2,                                                                  image3,image4,image5,                                                                  image6,image7,image8],                                               bgColor:viewBgColor)          imageView8.layer.masksToBounds =  true          imageView8.layer.cornerRadius = corner   //圆角          self .view.addSubview(imageView8)      }        override  func  didReceiveMemoryWarning() {          super .didReceiveMemoryWarning()      } }

源码下载 ： hangge_1463.zip
原文出自： www.hangge.com   转载请保留原文链接： http://www.hangge.com/blog/cache/detail_1463.html