How to Search Photos Using Flickr API In Swift 2.0

Inwizards-blog-img

Step 1: Create a Project

After opening Xcode, click on the “File” menu, hover over the “New” option, and then select “Project”.

So there are see a number of templates for creating iOS applications. These templates all include some default code that can help save us time. We’ll choose the “Single View Application” option for now. This comes with the smallest amount of default code, making it the best option for learning the basics.

Click the “Next” button and fill out the following details:
Product Name. This is the name of your application.
Organization Name. Enter your name or your company’s name.
Organization Identifier. Usually, this is formatted as a reverse domain name (so something com.inw.myApp).
Language. Set this to “Swift”.
Devices. Set this to “iPhone”.
Use Core Data. Leave this unchecked.


Click the “Next” button again. A dialog box will appear to save the project, so choose whatever location is convenient.

Step 2: Design an Interface

On the left side of the screen, we can see the “Navigator” pane. This is what we use to navigate the files in our project. There’s a few files that Xcode creates for us, but for the moment, click on the Main.storyboard file.

1. Select the Collection View and go to the Size Inspector. In the Collection View Section set the Cell size to a width and height of 110 points.

2. Drag an Image View from the Object Library inside the Collection View Cell and make sure the height and width is also 50 points. Select the Image View and go to the Attribute Inspector. In the View Section set the Mode to “Aspect Fit”

3. Next, create a class for the custom Collection View Cell. Add a new file to the project. Select File -> New File -> iOS -> Source -> Cocoa Touch Class. Name the class CollectionCell and make it a subclass of UICollectionViewCell.

4. Go back to the Storyboard and select the Collection View Cell. Go to the Identity Inspector and in the Custom Class section change the Class to ” CollectionCell”

5. Select the Assistant Editor and make sure the CollectionCell.swift file is visible. Ctrl and drag from the Image View to the CollectionCell class and create the following Outlet.

Go to CollectionCell.swift file and add the following property
@IBOutlet var ImageView: UIImageView!
Add third party libraries from helper class folder to your Xcode project
AFNetworking
UIKit+AFNetworking
SDWebImage
Add Bridging Header

As AFNetworking, UIKit+AFNetworking, SDWebImage is available in Objective C, we need to add bridging header to our Swift project. By using bridging header, we can use Objective C code in our Swift application.

To add bridging header to the project
Create new file by File >> New >> File from the menu to add temporary file.
Select Objective-C File.
Click Next.
Add File Name.
Click on Next.
Click on Create.
It will ask to configure Objective-C bridging header.
Click on Create Bridging Header button.
It will create Objective-C bridging header file.
Add following line of code to Bridging Header file

#import “AFNetworking.h”



#import “UIImageView+WebCache.h”

Get Flickr API Key from Developer flickr now go to this linkhttps://www.flickr.com/services/developer/api/

Now goto AlbumViewController.swift

import UIKit

class AlbumViewController:UIViewController,UICollectionViewDataSource,UICollectionViewDelegate,UITextFieldDelegate,UICollectionViewDelegateFlowLayout {

// MARK: Create Outlets and Proprty.

//*****************************************************************

@IBOutlet weak var AlbumCollection:UICollectionView!

@IBOutlet weak var SearchText:UITextField!

var sectionInsets = UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 0.0)

var searches = [FlickrSearchResults]()

var flickr = Flickr()

var flickrPhoto:FlickrPhoto!

// MARK: ViewDidLoad

//*****************************************************************

override func viewDidLoad() {

super.viewDidLoad()

self.SearchText.delegate = self

let dismiss: UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: “DismissKeyboard”)

view.addGestureRecognizer(dismiss)

}

override func prefersStatusBarHidden() -> Bool {

return true

}



// MARK: UITextField Delegate Method.

//*****************************************************************

func DismissKeyboard(){

view.endEditing(true)

SearchText.resignFirstResponder()

}

func textFieldDidEndEditing(textField: UITextField) {

SearchText.resignFirstResponder()

}

func textField(textField: UITextField, shouldChangeCharactersInRange range: NSRange, replacementString string: String) -> Bool {

if(string == “\n”){

SearchText.resignFirstResponder()

return false

}

return true

}

func textFieldShouldReturn(textField: UITextField) -> Bool {

let activityIndicator = UIActivityIndicatorView(activityIndicatorStyle: .Gray)

textField.addSubview(activityIndicator)

activityIndicator.frame = textField.bounds

activityIndicator.startAnimating()

let searchStr:String = SearchText.text!

flickr.searchFlickrForTerm(searchStr) {

results, error in

activityIndicator.removeFromSuperview()

if error != nil {

print(“Error searching : \(error)”)

let alert:UIAlertView = UIAlertView(title: “Error”, message: “Something went wrong please try again.”, delegate: self, cancelButtonTitle: “OK”)

alert.show()

}

if results != nil {

print(“Found \(results!.searchResults.count) matching \(results!.searchTerm)”)

self.searches.insert(results!, atIndex: 0)

self.AlbumCollection?.reloadData()

}

}

SearchText.text = nil

SearchText.resignFirstResponder()

return true

}

// Get index path of filtered image from Flickr.

func photoForIndexPath(indexPath: NSIndexPath) -> FlickrPhoto {

return searches[indexPath.section].searchResults[indexPath.row]

}

// MARK: CollectionView DataSource and Delegate Method.

//*****************************************************************

func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {

return searches.count

}



func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {

return searches

.searchResults.count

}

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) ->UICollectionViewCell {

let cell : CollectionCell = AlbumCollection.dequeueReusableCellWithReuseIdentifier(“Cell”, forIndexPath: indexPath) as! CollectionCell

flickrPhoto = photoForIndexPath(indexPath)

cell.backgroundColor = UIColor.blackColor()

cell.ImageView.image = flickrPhoto.thumbnail

return cell

}

func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {

flickrPhoto = photoForIndexPath(indexPath)

self.performSegueWithIdentifier(“fullimage”, sender: indexPath)

}

func collectionView(collectionView: UICollectionView,layout collectionViewLayout:UICollectionViewLayout,insetForSectionAtIndex section: Int) -> UIEdgeInsets {

return sectionInsets

}

// Navigate to FullViewController for show full image.

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?)

{

if (segue.identifier == “fullimage”)

{

let ObjVC = segue.destinationViewController as! FullViewController



ObjVC.image = flickrPhoto.thumbnail

}

}

}

You can download Demo Project Here :

https://goo.gl/I6qFs7

Enjoy 🙂

How to Search Photos Using Flickr API In Swift 2.0

Post navigation


Leave a Reply

Your email address will not be published. Required fields are marked *