Solved

iphone facebook app view

Posted on 2011-09-02
2
723 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
Comment Utility
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
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

What's a UDID? If you're involved in developing, testing, or even reviewing an iOS application that's in beta, then at some point you may need to know the UDID for any iOS devices that you'll be testing on. What's the UDID? It stands for Unique Dev…
     Intro      In this article, I will show you how to parse a JSON in Swift using an open source library called SwiftyJSON (https://github.com/SwiftyJSON/SwiftyJSON). If you haven't heard of a JSON before, it stands for JavaScript Object Notation…
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…
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now