Solved

iphone facebook app view

Posted on 2011-09-02
2
730 Views
Last Modified: 2012-05-12
Hi,

I was wondering what view is Facebook using for their home screen (please check the attachment)
It does not look like a 3*3 table. I see this view more and more combined with the navigation view but not sure which view that is ? Cause I

Can you also refer me to an article showing how this view (whatever it is) is used with the swipe ?

I am kinda new to IOS

Thanks,
Ross


photo.PNG
0
Comment
Question by:ucsdmbdm
2 Comments
 
LVL 2

Accepted Solution

by:
Snapples earned 500 total points
ID: 36477499
The view that is used to swipe is a UIScrollView, in this case with paging enabled.
Like any other view, a UIScrollView has a frame property that are the dimensions of that view on the screen, on your screenshot that would be (0, 0, 320, 284). But a UIScrollView also has a ContentSize property, which is the size of what is inside it. When the ContentSize is larger than the size of the frame, you can automatically scroll in it. In your screenshot there are 2 pages, so the ContentSize would be (640, 284). Also in this case you can only either see one page or the other, so you'll have to enable paging.

For an example: http://www.iosdevnotes.com/2011/03/uiscrollview-paging/


As for the icons, I don't know how they did it in the Facebook app but I recently had to make an app with a dashboard just like it so I can tell you how I did it.

I made a subclass of UIView, DashboardIcon, for the icons. It stores a CGPoint which is the position in the grid, top left icon being (0,0), bottom right (2,2), top left on the second page (3,0) and so on. It responds to a LongPress GestureRecognizer and a Pan GestureRecognizer. As soon as the long press is triggered, a delegate method, didStartDragging in the UIViewController is called which tells all DashbardIcons to start their little dance animation. At this point the Pan  GestureRecognizer takes over and every time it's delegate method is called, meaning the user has moved his finger, it moves the DashboardIcon by the same amount as the finger moved. It also calls a delegate method in the viewController, didDragIcon, which will loop through all DashboardIcons, look if the user's finger is currently on top of one of them and if so, change the CGPoint in each of them to their new position in the grid and move them. When the user lets go, another delegate method is called which will move the DashboardIcon the user is currently dragging to it's position in the grid.


0
 

Author Comment

by:ucsdmbdm
ID: 36478793
Thanks for the  comprehensive response. I think there must be an easier way to do the home screen view. I've seen that more and more app are following the same style for their home.  It certainly doesn't look like a 3 by 3 table. I may be wrong. In gonna give the points anyway but please let me know if u figure it out
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Yesterday Apple introduced their revolutionary new iOS 5 operating system that claims to be the ultimate mobile technology interface. One of the biggest innovations of the new operating system is the introduction of the iCloud computing network. Thi…
The Basics of Storyboard Storyboards were first introduced to developers in the release of iOS 5. They save the developer the trouble of designing each screen’s interface in a different file. The storyboard allows you to see the conceptual mockup o…
Users will learn how resize a batch of photos from a single command in Photoshop via Photoshop's Image Processor. Open up an Image you'd like to resize in Adobe Photoshop: Adjust the image size according to your preferences. Image > Adjustments > …
Users will learn how to set proper sequence settings, scale images, paste attributes, add transitions, fades, and music. Open up Final Cut Pro 7 and Create a new Project: Set the Sequence Settings. a) Click File > Easy Setup > Format > Apple ProRe…

860 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question