Agregar label de título a UImageView en la vista de colección

Soy completamente nuevo en el desarrollo de iOS. Nunca he escrito un código en mi vida. Pero estoy intentando seguir este tutorial aquí . He completado con éxito el tutorial, pero estoy buscando modificar el código un poco.

  • ¿Cómo puedo agregar un text 'Título' debajo de cada Imagen cargada?
  • ¿Y también cómo puedo cambiar los colors del borde de la image y el background de la aplicación?

ViewController :

import UIKit class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout { @IBOutlet var collectionView: UICollectionView! var galleryItems: [GalleryItem] = [] var listOfDescriptions = [String]() // MARK: - // MARK: - View Lifecycle override func viewDidLoad() { super.viewDidLoad() initGalleryItems() collectionView.reloadData() let value = UIInterfaceOrientation.LandscapeLeft.rawValue UIDevice.currentDevice().setValue(value, forKey: "orientation") } private func initGalleryItems() { var items = [GalleryItem]() let inputFile = NSBundle.mainBundle().pathForResource("items", ofType: "plist") let inputDataArray = NSArray(contentsOfFile: inputFile!) for inputItem in inputDataArray as! [Dictionary<String, String>] { let galleryItem = GalleryItem(dataDictionary: inputItem) items.append(galleryItem) } galleryItems = items } private func populateList() { listOfDescriptions.append("Valhaha is a flavor"); listOfDescriptions.append("Unicorns blood is made from dead unicorns. Harry Potter in this bit"); } private func getDescription(position: Int) -> String { return listOfDescriptions[position] } // MARK: - // MARK: - UICollectionViewDataSource func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return galleryItems.count } func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCellWithReuseIdentifier("GalleryItemCollectionViewCell", forIndexPath: indexPath) as! GalleryItemCollectionViewCell cell.setGalleryItem(galleryItems[indexPath.row]) return cell } func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int { return 1 } func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView { let commentView = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: "GalleryItemCommentView", forIndexPath: indexPath) as! GalleryItemCommentView commentView.commentLabel.text = "Supplementary view of kind \(kind)" return commentView } // MARK: - // MARK: - UICollectionViewDelegate func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) { let alert = UIAlertController(title: "didSelectItemAtIndexPath:", message: "Indexpath = \(indexPath)", prefernetworkingStyle: .Alert) let alertAction = UIAlertAction(title: "Dismiss", style: .Destructive, handler: nil) alert.addAction(alertAction) self.presentViewController(alert, animated: true, completion: nil) } // MARK: - // MARK: - UICollectionViewFlowLayout func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { let picDimension = self.view.frame.size.width / 4.0 return CGSizeMake(picDimension, picDimension) } func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets { let leftRightInset = self.view.frame.size.width / 14.0 return UIEdgeInsetsMake(0, leftRightInset, 0, leftRightInset) } } 

GalleryItemCollectionCellView :

 import UIKit class GalleryItemCollectionViewCell: UICollectionViewCell { @IBOutlet var itemImageView: UIImageView! func setGalleryItem(item:GalleryItem) { itemImageView.image = UIImage(named: item.itemImage) } 

}

Con su proyecto, desea agregar la label debajo de la vista de la image, debe agregar a la celda en el guión gráfico de esta manera:

introduzca la descripción de la imagen aquí

Drage outlet a la celda:

introduzca la descripción de la imagen aquí

Cambiar la function setdata:

 func setGalleryItem(item:GalleryItem) { itemImageView.image = UIImage(named: item.itemImage) itemNameLabel.text = item.itemImage self.backgroundColor = UIColor.purpleColor() } 

Y en viewController vuelva a calcular el tamaño de la celda:

 func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { let picDimension = self.view.frame.size.width / 4.0 return CGSizeMake(picDimension, picDimension + 31) } 

Dependiendo de que desee, puede cambiar el tamaño de la label que desee.

Veo que el borde que deseas es background de celda. así que agréguelo al elemento establecido anteriormente. Si solo quieres ver una image de borde aroud: puedes usar:

 func setGalleryItem(item:GalleryItem) { itemImageView.image = UIImage(named: item.itemImage) itemNameLabel.text = item.itemImage self.backgroundColor = UIColor.purpleColor() itemImageView.layer.borderColor = UIColor.networkingColor().CGColor itemImageView.layer.borderWidth = 1.0 } 

elige la espera que quieras.

Cambiar el color de la vista que agregue a viewDidload

  override func viewDidLoad() { super.viewDidLoad() initGalleryItems() collectionView.reloadData() self.view.backgroundColor = UIColor.lightGrayColor()//change color view } 

Aquí hay una demostración de su fuente: Demo

Para cambiar el color del borde:

 imageView.layer.borderColor = UIColor.anyColor().CGColor 

Cambiará el color del borde de la vista de Imagen.

El código siguiente establecerá la label en la vista de imágenes:

 var label = UILabel(frame: CGRectMake(x, y, width,hight)) label.center = CGPointMake(160, 284) label.textAlignment = NSTextAlignment.Center label.text = "I'am a test label" self.imageview.addSubview(label) 

Aquí está el método actualizado:

 func setGalleryItem(item:GalleryItem) { itemImageView.image = UIImage(named: item.itemImage) //This for imageview border color itemImageView.layer.borderColor = UIColor.anyColor().CGColor //This for setting label in image view var label = UILabel(frame: CGRectMake(x, y, width,hight)) label.center = CGPointMake(160, 284) label.textAlignment = NSTextAlignment.Center label.text = "I'am a test label" itemImageView.addSubview(label) }