How to add images to collectionview from folder in project?

Question

I want to ask if there is a way to parse images to array from folder.

I have categories: "Colors", "Buildings" etc. and inside every category folder there are relevant images.

I need a collectionView first with categories and after cell tap I need to fill collectionView with relevant images from category.

Answer 1

Your images in bundle file so you can use your images directly with the image name like [UIImage imagedNamed : @"<name.png>"]. You have folder which contains multiple images so to display these images you can do :

Make array which contains name of this images like NSArray *arrBravy = @[@"Bravy_cool.png", @"Bravy_angry.png" ... ];for all your four folders. And in collectionView

cell.imgView.image = arrImages[indexPath.row];

arrImages  = arrBravy or arrBudovy... etc , as per the condition user clicked on which option.

But as you said you have many folders like so you cant manage multiple array so to resolve this problem you make a json file and add it in you bundle. Now apply serialisation on this json file and you get list of all files their name.

Suggested pattern for json file:

 {
      {
               "folderName": "Bravy",
            "imgList": [ "Bravy_cool", "Bravy_angry", "Bravy_OK"]

      },
      {
             "folderName": "Budovy",
            "imgList": [ "Budovy_kiss", "Budovy_sleep", "Budovy_cry"]

      }
    } 

I have just given you example with two folder name, you can extend this upto your use. And keeping json is the best way to deal with this type of problems.

HOW TO DEAL WITH JSON

Get json data:

NSArray *arrJson = [NSJSONSerialization JSONObjectWithData: data options: NSJSONReadingMutableContainers error: &e];

Assign Json for image

//userSelectedString is string which notifes user selected which folder

for(int i= 0; i< arrJson.count: i++){
  if(arrJson[i][@"folderName"] == @"userSelectedString"){
    arrImages = arrJson[i][@"imgList"];
  }
}

In collectionview ItemFor Row

cell.imgView.image = arrImage[indexPath.row];

If you have XML, that's OK! You can deal with the xml same like the json data but little bit different.

1. If you wanted to fetch the XML file go with this tutorial : https://www.raywenderlich.com/725/xml-tutorial-for-ios-how-to-read-and-write-xml-documents-with-gdataxml

2. If you wanted to convert XML to Json go with this online converter and download your file: http://www.utilities-online.info/xmltojson/#.WFTDfuZ97IU

HOW TO SHOW IMAGES IN UICOLLECTIONVIEW

First write this

@interface myViewController : UIViewController {

    //BOOL isFolderSelected;
    NSMutableArray *arrMutImages;
}

in ViewDidLoad

arrMutImages = [NSMutableArray New];
    [arrMutImages addObject:[self getFolderNames]];

make new method

- (NSMutableArray *) getFolderNames{
    NSMutableArray *arrMutfetchImage = [NSMutableArray New];
    for(int i=0 ; i < arrJson.count ; i++){
       [arrMutfetchImage addObject:arrayJson[i][@"folderName"]]
    }

    return arrMutfetchImage;
}

in numberOfItemsInSection

return arrMutImages.count;

in cellforrowatindexpath

imageView.image = [UIImage imageNamed: arrMutImages[indexPath.row]];

in didSelectItemAtIndexPath

[arrMutImages removeAllObjects];
[arrMutImages addObject:arrayJson[indexPath.row][@"ImgList"]];
[collectionView reloadData];

if there is any button toggle from List of images to folder then write below code in button action

[arrMutImages removeAllObjects];
[arrMutImages addObject:[self getFolderNames]];
[collectionView reloadData];

Answer 2

This is how I solved displaying images from first two groups

I wrote a json file and add him to my project

{
    "Barvy": [ "Bila.jpg", "Cerna.jpg", "Cervena.jpg",
               "Fialova.jpg", "Hneda.jpg", "Modra.jpg",
               "Oranzova.jpg", "Zelena.jpg", "Zluta.jpg"],

    "Budovy": [ "Budova.jpg", "Cirkus.jpg", "Domov.jpg",
                "Dum.jpg", "Kostel.jpg", "Nemocnice.jpg",
                "Obchod.jpg", "Restaurace.jpg", "Skola.jpg"]
}

Then

    var arrImages = [String]()
    let dataUrl = Bundle.main.url(forResource: "test", withExtension: "json")


    override func viewDidLoad() {
    super.viewDidLoad()

    collectionView.dataSource = self
    collectionView.delegate = self

    let jsonData = try! Data(contentsOf: dataUrl!)

    do {

        if let arrJson = try JSONSerialization.jsonObject(with: jsonData, options: .mutableContainers)
        as? Dictionary<String, AnyObject> {

            if let barvy = arrJson["Barvy"] as? [String] {
                arrImages = barvy
            }

            if let budovy = arrJson["Budovy"] as? [String] {
                arrImages += budovy
            }

        }
    } catch {
        print(error)
    }

}

And

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

    if let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "TestCell", for: indexPath) as? Cell {
        cell.imgView.image = UIImage(named: "\(arrImages[indexPath.row])")
        return cell
    }
    return UICollectionViewCell()
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return arrImages.count
}

Finally my images from first 2 groups are displaying in collectionView.. I will update answer when I figure out how to first display only names of categories and after click display images only for clicked category.

Answer 3

First of all rename all the group's images in ascending order along with group name like 'Barvy_0.jpg' and so on..

Then declare one blank string like:

var image_name:String = ""

Then set image_name as group name on button click like on Barvy button click:

image_name = "Barvy"

In collectionview:

cell.imageview.image = UIImage(named:"\(image_name)\(indexPath.row).png")!