How To Make an App – Ep 8 – Completing the UI (Xcode 7, iOS 9)

[ad_1]
How To Make iPhone Apps with NO Programming Experience!
Lesson 8: Completing the UI

This lesson combines what we learned about Auto Layout and Size Classes to complete the user interface for our War Card game app.

This video series uses the latest and greatest from Apple (Xcode 7, Swift 2, iOS 9) and will teach a beginner with no programming experience how to make iPhone apps. I’m creating these videos with the assumption that the student has no prior knowledge and is starting from scratch.

The lesson plan for the How To Make an App series can be found on my site here:

For more tutorials on how to build iPhone apps, make sure you subscribe and visit my site where you’ll find a community of like minded learners! Learning something new is always more fun with other people!

Website:
Youtube:

CodeWithChris is dedicated to teaching beginners and non-programmers all about building iOS apps. On the site, you’ll find a ton of free resources and tutorials to aid you on your journey to learn iOS development. Many people have successfully picked up Swift, Objective-C, Xcode and app building from my course and materials!

Intro & Outro music
“Heartbreaker” by Jahzzar (


Posted

in

by

Tags:

Comments

29 responses to “How To Make an App – Ep 8 – Completing the UI (Xcode 7, iOS 9)”

  1. TNA2Me Avatar

    🙁 My simulator doesn't seem to be working properly. It starts up. I get the black screen with the Apple logo. Then the little loading bar. Then a black screen and nothing happens. Just an iPhone with a black blank screen. My iMac is struggling today.

  2. nolareaper Avatar

    Is is normal if my cards are sideways when I rotate the simulator to "upside-down?" Is that orientation supposed to display properly by now?

  3. Darren K Avatar

    The only issue I have is that when I run the app in older models of iPhone, such as 5s, the portrait view is altered and my cards touch. Is there any way I can fix this other than by decreasing the card's border spacing in portrait?

  4. Chad711m Avatar

    Here is what I do not understand about the view mode. For example Compact Regular states "For all iPhones in portrait". So if I add say 4 Imageviews and I want all 4 of them to be in the middle of the screen with maybe 5 pixels in between each one so they are not touching. When I add constraints to them no matter what I do they never look the same in the simulator when I switch it from iPhone 6 to say iPhone 6 Plus or iPhone 6s Plus. Why does it states for all iPhones in portrait mode but it never looks the same when I run each iPhone in the sim?

  5. Kendra T Avatar

    This tutorial is great. In the simulator, how do you switch between portrait and landscape view?

  6. Sam Zalahi Avatar

    hi chris ty for your tutorial its awesome. my qes is, i designed a ipad background image in photoshop (w2048*h1536) to fit with full screen, i inserted in anyw anyh class, and then in portrait mode its showing actual image perfectly but in landscape mode its not showing full image. did i miss any constraint or is there any way to fix that?

  7. Armando V. Avatar

    Seriously. I messed the width and height of both cards up and I couldn't figure out how to undo the mistakes, so I had to start all over.. But I got it back in less than 3 minutes. I love this series. Thank you for this!

  8. rchrddi Avatar

    Hey Chris, You explain things so well! However, you did not touch on MacInCloud in your earlier videos. I am a PC user and I signed up for an account on MacInCloud, but cannot find the Xcode or Swift. Perhaps I am not maneuvering correctly. Any suggestions?

  9. JeNaruto Avatar

    Hello and thank you very much for this series, the videos are really good, but I have one question, How do you make your simulator run so fast? Mine runs so slow, or is it just my mac?

  10. ShakeAndBake Yolo Avatar

    Can someone explain this:
    After setting up all the constraints for different views, does xcode automatically keep track of which constraint is for which view? Cuz it keeps showing that there is constraint conflict. Thank you so much!

  11. Raymond Shades Avatar

    thanks dude! the help has been freaking radical man <3

  12. powellcrazd Avatar

    Hey Chris, You don't alway explain what key strokes you did to accomplish a task. example how to delete your image card. If your going to make a how to for dummies, you gotta explain any and everything you do when we can't see what your typing, but do hear keyboard. Otherwise, you vids are fairly good.

  13. diesel5355 Avatar

    I lose my button switching between portrait and landscape. In portrait, the button is visible and accessible, but in landscape, it disappears and becomes faded on the view controller. Do I have to add a different button for each view?

  14. aignaciodc Avatar

    Hi! Man, Chris, these videos have helped me SO much. First time coding EVER at 44 years old, and you've taken away much of my trepidation. Thank you! I had some confusion in the beginning because I didn't go back to wAny hAny to do things first, before handling portrait/landscape, but someone in the comments gave me a heads up and then you mentioned it a few times later.

    I'm only having one problem so far – in the simulator it looks good portrait, then good landscape, then the next portrait (?upside down phone?) is completely wrong, then landscape is good. I'm not sure if the simulator is supposed to simulate the phone spinning complete, but the secondary portrait orientation doesn't put anything in the right place. Is this anything to be concerned about that needs to be fixed somewhere?

  15. AldosWorld TV Avatar

    Hey chris! I've been following up on this series & havn't had any issues until this episode!

    I wanna first say you're PHENOMENAL 🙂

    Comment: it seems like everytime I switch from portrait to landscape to all layouts, my 2nd card disappears & i have to redo everything for each view (update frame is greyed out for some reason)

    Any idea why? Thanks!

  16. Anthony Dalleh Avatar

    episode 7: 3 constraints at the end, start of episode 8: 4 constraints, mind boggling stuff boys and girls… mind boggling stuff

  17. Jack Tang Avatar

    Hi Chris. First off, great tutorial and thanks. I see that you only had 3 constraints at the end of the Episode 7. Some how when you start this episode, there are 4 constraints. Can you please let me know what you've added?

  18. Mohammed R Avatar

    to avoid the problem of disappearing of the second card in land scape, make sure when u copy the second card from the first card the class is selected on W ANY H ANY

  19. Irina Tanase Avatar

    Hi Chris. Your videos are really nice. I know that this is a stupid easy question for you, but why is my button inactive in portrait and landscape view and why can I access it only in wAnyhAny?

  20. Suraj Gaikwad Avatar

    Hi Chris, I find it very difficult to design for iPhone 4s. Which size class should be used ?

  21. Lasse Vad Avatar

    When i run my project for iPhone 4, 5, or 6, the launch screen is so big that i have to scroll up and down to watch my application. I use Macbook air 13,3'', is that too small? Or can i fix this in some options?

  22. Kyle Enzweiler Avatar

    at 4:10 you said you are going to ignore the warning about not having an x position. But if you test this app on a phone instead of an emulator you will have a different view. So, do you have a solution instead of ignoring the warning?

  23. mpe Avatar

    No matter what I do the second card disappears and I cannot retrieve it when i change to w Any h Compact. Is driving me crazy.

  24. Lars Yoyoyo Avatar

    Hey guys, why do my secondcard disappear when I change to landscape at 2.46? It is not over firstcard. It would be nice if someone could help me. Thanks anyways.

  25. Miguel Deleon Avatar

    You can also do option drag from the first image view to duplicate it

  26. Ethan Beckley Avatar

    after following along with this tutorial i had essentially the same outcome, but if i tried to cycle through all four rotations of the simulated iPhone when it is in the "upside down" portrait orientation the two images didn't update their orientation from when they were in landscape, only when the phone was in "right-side up" portrait did they squeeze back together

  27. Hassan Hajjar Avatar

    At the end of Ep 7 you had 3 constrains, how come you have 4 constraints in the beginning of Ep 8?
    I had an error saying "missing constrains"

  28. Vincent Vianen Avatar

    I like your tutorials. Especially how you give tips in between to make certain steps faster. Very clear explanation.

Leave a Reply

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