Giter Club home page Giter Club logo

PhotoCollection - Programmatic Constraints

Introduction

You may have created this application in the past, however you will be laying out the UI elements programmatically using the NSLayoutConstraint and NSLayoutAnchor APIs for this module project. The application allows a user to add photos from their photo library to a collection of photos in a UICollectionView. It will also let the user select a theme and it will persist that preference between launches of the app using UserDefaults.

Please look at the screen recording below to get an idea of what the finished project should look like. Use this screen recording as a guideline; you are free to change colors and tweak the constraints as you see fit. Don't stress about making your project look the exact same as this:

Instructions

Please fork and clone this repository. This repository contains a starter project.

Be regularly committing and pushing your code as appropriate.

Part 1

First, familiarize yourself with the code in the starter project. Much of the model and model controller code is given to you.

Most of what you will be doing is writing code that takes the place of what you would be doing in the storyboard. If you look in the Main.storyboard, the view controllers still exist but are largely empty, with only the elements for navigation still there. You should not need to modify the storyboard file in any way.

Part 2 - Storyboard Programmatic UI Set Up

PhotoCollectionViewCell

  1. Create a function called setUpSubviews() or something along those lines. In this function:

    • Create an image view that will display the UIImage that the photo.imageData contains.
    • Create a label that will display the Photo's title.
    • Constrain these views to the cell programmatically using only the NSLayoutConstraint initializer. (Yes, the long one. No anchors yet. 😉)
    • You will want to call this function only once. Otherwise you will end up adding image views and labels over and over again to the cell.
  2. Create an updateViews() function that passes the information from the Photo to the image view and label. (If you need help turning Data into a UIImage look at UIImage's initializers in the documentation. Call this function sometime after the photo variable has been given a value from the cellForItem at method in the PhotosCollectionViewController. There are a couple places you could decide to do this.

PhotoCollectionViewController

  1. Implement the following UICollectionViewDelegateFlowLayout methods. As a hint, look at what these functions want you to return:
    • insetForSectionAt. The collection view does not have any insets created in the storyboard. Add them using this method.
    • minimumInteritemSpacingForSectionAt. There is no spacing between items (cells) in the collection view.
    • sizeForItemAt. Similarly, the cells' size in the storyboard is very small. Implement this method to give the cells a good size to display the photo and its title.

As a stretch challenge make the cells dynamically get their size to show two cells horizontally no matter the size of the device.

PhotoDetailViewController Scene

  1. Create a function called setUpSubviews() or something along those lines. In this function:

    • Add an UIImageView to the view controller's view. You can leave its image empty in this function.
    • Add a UIButton to the view controller's view. Set its title to "Add Image" and add a target to it that calls the addImage function that already exists in this view controller.
    • Add a UITextField to the view controller's view. Set its placeholder to something like "Give this photo a title:". You can leave its text empty.
    • Constrain the above UI elements using only NSLayoutAnchors.
    • Create a UIBarButtonItem. Set its title to "Save Photo". Set its action as the savePhoto method that already exists in this view controller. Then, set it as the navigation item's right bar button item. (the documentation on UINavigationItem is your friend here). Note: a view controller subclass already has a navigationItem property built-in.
    • Don't forget to call this method somewhere that makes sense!
  2. Create an updateViews() function that passes the information from the Photo to the image view and text field. Call this function sometime after the photo variable has been given a value from the cellForItem at method in the PhotosCollectionViewController. Again, there are a couple places you could decide to do this.

ThemeSelectionViewController Scene

  1. Create a function called setUpSubviews() or something along those lines. In this function:
    • Add a label that tells the user to select a theme that they would like to use.
    • Add two buttons. The first's title should be "Dark" for the dark theme, and the other's should be "Blue". Add a target to each button that calls selectDarkTheme and selectBlueTheme respectively.
    • Constrain these UI elements using whichever method of programmatic constraints you prefer.
    • Don't forget to call this method somewhere that makes sense!

Go Further

  • Commit your final working version with the above requirements, then customize the layout of this application to futher practice your programmatic constraining skills.

Chris Price's Projects

8ball.appbrewery icon 8ball.appbrewery

Second homework project from Udemy course by AppBrewery - iOS 13 & Swift 5 - The Complete iOS App Development Bootcamp

aboutme2-ls.precourse icon aboutme2-ls.precourse

Lambda School pre-course final project. We made a basic app that has a a few labels, that update when you click a button.

alertcontrollerpractice icon alertcontrollerpractice

Follow along tutorial from DaddyCoding - TableView Add w/ AlertController. https://daddycoding.com/2018/05/17/ios-tutorials-tableview-add-w-alertcontroller/

animalspotter-ls.class15-guided icon animalspotter-ls.class15-guided

Lambda School guided project for the "iOS Networking Basic: API Authentication with Account Sign Up and Login" class. We will learn how to GET JSON from a website, and then POST info back to that website.

clima.appbrewery icon clima.appbrewery

Clima is a weather app built from a follow along tutorial for the lesson- "Section 13: Networking, JSON Parsing, APIs and Core Location."

countdown-ls.11-guided icon countdown-ls.11-guided

Countdown timer app for Lambda School class- "iOS Fundamentals II: AlertControllers, PickerViews, and Timers."

dicee.appbrewery icon dicee.appbrewery

Follow along project from Udemy course by AppBrewery - iOS 13 & Swift 5 - The Complete iOS App Development Bootcamp

easybutton-ls.afterhours icon easybutton-ls.afterhours

(Lambda iospt6) Johnny Hicks made a us a supplemental project to go over the material in the iOSUserInterface module.

eggtimer.appbrewery icon eggtimer.appbrewery

Follow along project for Section 8: "Intermediate Swift Programming - Control Flow and Optionals" (from the Udemy course "iOS 13 & Swift 5" by AppBrewery).

findacrew-ls.class14-guided icon findacrew-ls.class14-guided

Lambda School guided project for the "iOS Networking Basic: REST Basic and Enums" class. We are practicing using APIs by making a crew using the Star Wars API (SWAPI).

gigs-ls.class15-practice icon gigs-ls.class15-practice

Lambda School afternoon project for the "iOS Networking Basic: API Authentication with Account Sign Up and Login" class.

hello-ls.class2-practice icon hello-ls.class2-practice

Introductions to the Lambda Community. Afternoon project for "Swift Fundamentals: iOS Development Tools."

hobbytracker-ls.class6-guided icon hobbytracker-ls.class6-guided

Guided Project for Module 2 - iOS Fundamentals II for both AutoLayout and the Delegation Design Pattern (for iospt5, 5 January 2020).

iampoor.appbrewery icon iampoor.appbrewery

First homework challenge from Udemy course by AppBrewery - iOS 13 & Swift 5 - The Complete iOS App Development Bootcamp

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.