ios utiliser Ajout d'une étiquette de légende à UImageView en mode Collection




version ordinateur safari ios 11 (2)

Avec votre projet, vous voulez ajouter l'étiquette en dessous de l'affichage de l'image, vous devriez ajouter à la cellule sur le storyboard comme ceci:

Drage sortie à la cellule:

Modifier la fonction setdata:

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

Et dans viewController recalculer la taille de la cellule:

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

Dépen vous voulez que vous pouvez changer 31 à la taille de l'étiquette que vous voulez.

Je vois la frontière que vous voulez est l'arrière-plan de la cellule. alors ajoutez-le dans l'élément ci-dessus. Si vous voulez juste voir la bordure de l'image: vous pouvez utiliser:

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

choisissez l'attente que vous voulez.

Changer la couleur de la vue que vous ajoutez dans viewDidload

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

Voici une démo de votre source: Démo

Je suis complètement nouveau pour le développement iOS. Je n'ai jamais écrit un morceau de code dans ma vie. Mais j'essaie de suivre ce tutoriel ici . J'ai terminé avec succès le tutoriel, mais je cherche à modifier un peu le code.

  • Comment puis-je ajouter un texte «Titre» sous chaque image chargée?
  • Et comment puis-je changer les couleurs de la bordure de l'image et de l'arrière-plan de l'application?

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)", preferredStyle: .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)
}

}


Pour changer la couleur de la bordure:

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

Cela changera la couleur de la bordure de votre vue Image.

Le code suivant définit l'étiquette sur l'affichage de l'image:

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)

Voici la méthode mise à jour:

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




uicollectionview