在集合视图中向UImageView添加标题标签

Question

我是iOS开发的新手.我一生中从未写过一段代码.但我试图在这里遵循这个教程.我已经成功完成了本教程,但我希望稍微修改一下代码.

• 如何在每个加载的图像下添加文本"标题"？
• 还有我如何改变图像边框和应用背景的颜色？

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

}

Answer 1

要更改边框颜色:

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

它将更改您的图像视图边框颜色.

以下代码将在图像视图上设置标签:

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)

这是更新的方法:

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

Answer 2

对于您想在项目视图下方添加标签的项目,您应该在故事板上添加单元格,如下所示:

Drage出口到细胞:

更改setdata功能:

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

并在viewController重新计算细胞大小:

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

您想要的依赖项可以将31更改为您想要的标签大小.

我看到你想要的边界是细胞的背景.所以将它添加到上面的设置项中.如果您只想要边框图像视图:您可以使用:

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
}

选择你想要的等待.

更改您添加的视图的颜色 viewDidload

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

以下是您的来源演示: Demo