How to make a login screen like Facebook app? - ios

How can I make a login screen like the Facebook app with "Email" and "Password" textfields?
Facebook Login
I'm really new to iOS programming, sorry if this is an easy question.

First of all you have to understand UIViews and UIViewControllers creation and management.
Then, you could ask your self if you want to create the interface through xib files or programatically. The first way is quite simple. By means of drag and drop operations you could create a user interface in a short time. The second, instead, is more complex for a newbie but I think it could be a valid solution to understand stuffs.
Note that each operation that you do in xib files can be done programatically.
Now, I'll try to explain what elements you need to create that interface.
To create the interface like the following you could create a xib view interface. The view for this interface is the container for your elements. To the container view you could add a UITableView with a grouped style. This UITableView has 2 rows and each row allows to enter text by means of UITextField. To do this, you have to create it programatically. No chance to do it with xib.
Login and signup can be created with two UIButtons. To those buttons you need to attach some actions.
Finally the background image could be set programatically as a background image for your container.
This is a simple description on how to create such an interface. Before starting, I suggest you to read some tutorial on how to:
Use UIView and UIViewController
Create interface trough xib
Interact with interface xib through outlet and actions
Use UITableView and understand its management
Customize or editing UItableViewCell
Use UIImageView and/or UIImage
A good starting point for iOS application development could be www.raywenderlich.com/tutorials.
Hope it helps.

1)In your Xib file..add an image view..set it to the image you want..that will be background like in the Facebook pic.(blue) and that image should include middle (email and password background) part as well.
2) Drag and drop UITextField on it. Make the background custom.

Since you are new..I will point out the details..and then you search on them that way you will understand better :
Search on each of these things on google..cant give info for each.
1)In your Xib file..add an image view..set it to the image you want..that will be background like in the Facebook pic.(blue)
2)The middle part is a UITableViewCell with one section and 2 rows..search on it..
3) And the Log in and sign up are UIButtons..add them in xib and make them IBOutlets..again search on it

Related

creating a scrollview with data coming from database and variable number of elements for ios

So I was trying to create a sample ios application. As I am designing the app UI with the storyboard (and not coding), I find Xcode really hard to understand.
what I want to do is I added a scrollView to the view controller. now what I want to do in the scrollView is simple.
I want my scrollView to have buttons (vertically stacked) and it does some action on the basis of the data it is getting from the database. let's suppose it is getting links from the database and on a click of those buttons those links open. now the data may contain 10 links, or 20 links .. basically, we want it to be according to the database.
now if I was designing the UI programmatically it would look something like
ScrollView{
for loop...{
button("for example name coming from the database"
}
}
or atleast this is what I know of.
so how to do the same with storyboard ?
like we first take it's refernce to the uiViewController class.. and then ?
You need to add buttons programmatically if they are created dynamically depending on external non static data. Create new UIViewContoroller class and implement it with connecting storyboard file, the easiest would be to add buttons inside some kind of UIStackView which is inside scrollview imo, or by using UITableView if there are significant number of links to display.

Multiple Photos in slideshow type display within viewController?

I am new to Xcode (started a few days ago).
I'm trying to find a way to get a few photos or videos in a display where the user can scroll or tap through as they desire. There will be multiple viewControllers each with a different set of photos.
Is there any existing UI type data types I can just drag and drop to make this work? Or is this out of range of the capabilities for someone not using code specifically.
I know Java, C, C++, MATLAB, etc. but never have toyed with Objective-C until now. Point being, I should be able to follow any logic you can throw at me, but I'm unfamiliar with the GUI and layout of Xcode as a whole.
This is what I currently have.
This is what I want. Perhaps with functionality to tap to full screen the image or swipe to go to another image. (This image was made with photosop. I don't actually have the picture file in Xcode because I don't know how)
SOLVED: Placed desired images in "Supporting files" content folder inside Xcode. This allowed me to select which photo I want displayed in which ImageView. To fix the proportionality issue where photos in Simulator are far too large, I simply added height and width constraints along with some other centering aspects and got the desired result.
Add UICollectionView in your view and set flow of collection view is horizontal make cell size that you want to keep.
Take a look at UICollectionViewController where you can display multiple cells with embedded views for your images, and consider segueing between them via a UINavigationController.
Edit: Now that you've added screenshots, I'd recommend using a UICollectionView embedded on your subclass of a UIViewController instead of a UICollectionViewController. This should give you more flexibility.

Custom component in Swift

I have a storyboard that I want to reuse many times in my app. You can see it here.
The problem is, I don't know how to use that xib to create a custom component to use it. I will need many instances of that component, and once you click on the UIImageView in the right, or in the label, it will get you to a different scene, depending on which individual instance you clicked. Also, the left UIImageView will be different in every instance.
I have done similar in Android, and now I need to do it in iOS, with Swift.
Ive searched, and almost everything I found its in Objective-C. Does anybody knows about a good tutorial to do it in Swift?
Thank you.
EDIT
More elaborated explanation:
1) I have a scene where I need to put that component, as a whole, four times.
2)In every individual component, I need the image view in the right (the one with the white arrow) and the label to be clickable.
3) In every individual component, the click in the image or the label, will lead to a different screen in the app.
4) In Android, it looks like this. The label and the left ImageView are not seen, since they are set programmatically, but they are there. In the upper component, the click leads to an Activity. In the second one, the click leads to a different Activity, and so on.
From the images and your description, I would still recommend UITableView and custom UITableViewCells. But if you prefer not, ...
To create instances of your component from the XIB file, use the NSBundle "loadNibNamed" method:
let viewArray = NSBundle.mainBundle().loadNibNamed("ClickableComponent", owner:self, options: nil)
let clickableComponent = viewArray[0] as! UIView // or your subclass
You can then tailor programmatically to load the correct images and assign the associated actions.

Is there any way to make a custom table view cell look like a button in Xcode 6+?

I'm trying to create a Table View Cell array and have the name displayed in each table. The tables will look like what you see on the home screen of the Evernote app (shortcut, tags, places, notebooks etc.) and each one will access the next screen when tapped. How do I go about doing this? Novice app developer.
This is an image of the result I'm trying to get.
That is a basic cell with transparent background and other views (and images, layers, etc.) added as subviews.
For the other things I suggest to study how UITableView works and how to push a UIViewController using a UINavigationController.
In general you should study iOS and Objective-C from zero.

iOS/IB view layout template/inheritance guidance needed

This is a "sort-of" question, that I am just hoping some astute individual can give me some guidance on.
I have an iOS project that has numerous screens (ViewControllers) that all share a top and bottom bar (an UIImageView with a button on each). I am using a storyboard because I want to be able to easily visualize the entire graph of screens.
Is there any way in Xcode 4.5 to make a sort of UI Template, or somehow subclass the "view" in IB so that whenever I make a new screen (VC) it inherits the top and bottom bars and the associated functionality?
I was hoping if I created a UIViewController subclass, put an IBOutlet for each ImageView and Button into it, and the associated IBAction for the two buttons, then subclassed it when making my VCs I would be able to link it all up, allowing me to only have to duplicate the visual elements on each screen. But alas, when I do that I get "not KVC-compliant" errors on the subclass (when linking it to the existing outlet and actions).
The other thought I had was to programmatically add the visual elements from a superclass, but then, for me, the problem is in IB I have to remember to account for the missing space at the top and bottom, which I will have to live with if that turns out to be the only option...
Is there some way to do this that I am not seeing or do I really have to code this all over and over for each screen?
Any insight/input/ideas greatly appreciated.

Resources