iPad view layout similar to facebook - ios

How would one go about creating an ipad app that has a similar view layout to the facebook app? That is, one big view in the center, and the smaller, menu-like controller on the left side gets visible when you slide the main view to the right?
Are they using a modified splitview layout, or is this a custom multi-layer layout?
I know that I probably must make use of some gesture recognizers, but can anyone point me into the right direction of how to remake the facebook app layout? E.g what would be the two main controllers (tableview on the left, custom view in fullscreen size in the middle, place above the tableview?), and how do i slide in/out the menu?
Thanks in advance
as a note: I only need landscape orientation, should make thins easier.
[edit] this is my current implementation with the viewdeckcontroller:
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
RootViewController* menu = [[RootViewController alloc] init];
UINavigationController* navController= [[UINavigationController alloc] initWithRootViewController:menu];
DetailViewController* center = [[DetailViewController alloc] init];
IIViewDeckController* rootController = [[IIViewDeckController alloc] initWithCenterViewController:center leftViewController:navController];
_menuController = rootController;
rootController.leftLedge = [[UIScreen mainScreen] bounds].size.width - 50.0;
self.window.rootViewController = rootController;
[self.window makeKeyAndVisible];
This is the rootviewcontroller class (left side menu-thing controller):
-(void)loadView
{
// [super loadView];
// self.tableView = [[[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStyleGrouped] autorelease];
self.view= [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320, 704)];
UITableView* tableView= [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStyleGrouped];
[self.view addSubview:tableView];
self.tableView= tableView;
}

This is a drop-in Xcode project for exactly what you want. :)
https://github.com/devindoty/DDMenuController

IIViewDeckController implements sliding views (like in the Path and Facebook apps) and also supports rotation.

I know this could be a bit late.
Hard to be certain this is what you mean but for the width of your left slide out view, you can control how much of it is shown by modifying the leftLedge property to how many pixels from the edge should be covered by the centerViewController. ie. leftLedge=50 would make your left menu 320-50=270 visible, leftLedge=250 would make your left menu 320-250=70 visible. This is visible width not actual width.
In your appDelegate
IIViewDeckController *deckController = [[IIViewDeckController alloc] initWithCenterViewController:self.mainNavigationController leftViewController:self.sideMenuViewController];
deckController.panningMode = IIViewDeckNavigationBarPanning;
deckController.leftLedge = 50;
deckController.centerhiddenInteractivity = IIViewDeckCenterHiddenNotUserInteractiveWithTapToClose;

Related

Material component tab bar bottom navigation

How can I create a material component tab bar bottom navigation? The docs describe
that I have to implement positionForBar: and return UIBarPositionBottom to configure the tab bar as a bottom navigation bar. The bar will automatically update with the appropriate styling. How ever it looks like it doesn't work -example:
ViewController.h
...
#interface ViewController : MDCCollectionViewController <MDCTabBarDelegate>
ViewController.m
- (void)viewDidLoad {
[super viewDidLoad];
self.styler.cellStyle = MDCCollectionViewCellStyleCard;
// Do any additional setup after loading the view, typically from a nib.
self.appBar = [[MDCAppBar alloc] init];
[self addChildViewController:self.appBar.headerViewController];
self.appBar.headerViewController.headerView.backgroundColor = [UIColor colorWithRed:120.0/255 green:144.0/255 blue:156.0/255 alpha:1.0];//rgba(38,50,56 ,1)
self.appBar.headerViewController.headerView.trackingScrollView = self.collectionView;
self.appBar.navigationBar.tintColor = [UIColor blackColor];
[self.appBar addSubviewsToParent];
self.title = #"W0rX";
MDCTabBar *tabBar = [[MDCTabBar alloc] initWithFrame:self.view.bounds];
tabBar.items = #[
[[UITabBarItem alloc] initWithTitle:#"Recents" image:[UIImage imageNamed:#"phone"] tag:0],
[[UITabBarItem alloc] initWithTitle:#"Favorites" image:[UIImage imageNamed:#"heart"] tag:0],
];
tabBar.itemAppearance = MDCTabBarItemAppearanceTitledImages;
tabBar.delegate = self;
tabBar.autoresizingMask =
UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin;
[tabBar sizeToFit];
[self.view addSubview:tabBar];
}
- (UIBarPosition)positionForBar:(id <UIBarPositioning>)bar {
NSLog(#"######## UIBarPositionBottom");
return UIBarPositionBottom;
}
Thanks for using MDC-iOS.
Looks like your code is almost there!
What's missing is setting the frame of the tab bar to the bottom of the screen. See BottomNavigationBarExample for an example of how to do that. In that example view controller, the tab bar is placed at the bottom of the screen in viewWillLayoutSubviews:
barFrame.origin.y = CGRectGetMaxY(bounds) - barFrame.size.height
I know you just put a snippet of code here but I don't see you setting the origin except when you instantiate the tab bar. Your line
MDCTabBar *tabBar = [[MDCTabBar alloc] initWithFrame:self.view.bounds];
puts the top-left corner as the origin for the tab bar (0,0) to start with. Which is fine. But you'll need to move it down to the bottom of the view eventually.
BTW: Also take a look at MDCTabBarViewController which is a lot like a UITabBarViewController. It may work for you depending on what you're trying to do.

bad orientation in screen with multiple viewcontrollers/ views in iOS 7, landscape only (iOS 8 is fine)

I'm using TheSidebarController to implement add a sliding menu into an iOS application. This is the library I'm using, but I've found the same issue in other libraries, like ECSlidingViewController, etc. They essentially work by adding multiple view controllers onto a containing view controller, nothing too crazy.
The issue is, when you make the app a landscape app, all the screens in the container- the menu, the content screen- seem to think they're in portrait mode, and get cut off half way. You can see the issue in this screenshot where the table is cut off:
http://imgur.com/xD5MUei
I've been trying to get this to work in any way I can, and no luck.
The library I'm using + example project can be found here:
https://github.com/jondanao/TheSidebarController
Any help is greatly appreciated :)
EDIT: people are saying I can stretch the table out to make it look normal, but this just masks the underlying problem, which is the app and/or the screens still think they're in portrait orientation. As a quick example, if I take the example project, and in LeftViewController substitute the following code:
- (void)dismissThisViewController
{
UIViewController* vc = [[UIViewController alloc] init];
UINavigationController* pulldown = [[UINavigationController alloc] initWithRootViewController:vc];
pulldown.view.frame = CGRectMake(pulldown.view.frame.origin.x, -[[UIApplication sharedApplication] delegate].window.frame.size.height,
pulldown.view.frame.size.width, pulldown.view.frame.size.height);
[[[UIApplication sharedApplication] delegate].window addSubview:pulldown.view];
[UIView animateWithDuration:.5 animations:^{
pulldown.view.frame = CGRectMake(pulldown.view.frame.origin.x, 0,
pulldown.view.frame.size.width, pulldown.view.frame.size.height);
} completion:^(BOOL finished) {
;
}];
}
The viewcontroller comes in sideways, not from the top.
This was a strange one... I had to set the frame of the content view controller, which made sense, but then I had to reset it every time the content was refreshed:
- (void)setContentViewController:(UIViewController *)contentViewController
{
// Old View Controller
UIViewController *oldViewController = self.contentViewController;
[oldViewController willMoveToParentViewController:nil];
[oldViewController.view removeFromSuperview];
[oldViewController removeFromParentViewController];
// New View Controller
UIViewController *newViewController = contentViewController;
[self.contentContainerViewController addChildViewController:newViewController];
[self.contentContainerViewController.view addSubview:newViewController.view];
[newViewController didMoveToParentViewController:self.contentContainerViewController];
_contentViewController = newViewController;
if ([DeviceDetection isDeviceiPad]) {
_contentViewController.view.frame = CGRectMake(0, 0, 1024, 768);
}
}
Did you check if it's has something to do with the new interface orientation?
https://developer.apple.com/library/ios/releasenotes/General/WhatsNewIniOS/Articles/iOS8.html
chapter -> Supporting New Screen Sizes and Scales
In CenterViewController.h make the class a subclass of a UITableViewController instead.
Then comment out [self.view addSubview:self.tableView]; in CenterViewController.m.
Done!
In centerViewController.m, when you create the tableview, add this line:
self.tableView.autoresizingMask = UIViewAutoresizingFlexibleWidth;

UIView above UIAlertView

In my app, a lock screen is used. Sometimes a UIAlertView is shown, now when the user sends the app to the background and brings it in front again, the UIAlertview is shown above the lock screen. Is there a possibility to add a UIViewController's view above everything, i.e. above the UIAlertView?
You should have like this
UIWindow *mySpecialWindowForLockScreen = [[UIWindow alloc]initWithFrame:[[UIScreen mainScreen] bounds]];
//"Hey iOS Please put this window above all alert view"
mySpecialWindowForLockScreen.windowLevel = UIWindowLevelAlert+100;
UIViewController *lockScreenViewController = [[UIViewController alloc]init];//Lock Screen
lockScreenViewController.view.frame = mySpecialWindowForLockScreen.bounds;
mySpecialWindowForLockScreen.rootViewController = lockScreenViewController;
// In lockScreenViewController view you can add lock screen images and other UI stuff
mySpecialWindowForLockScreen.rootViewController.view.backgroundColor = [UIColor greenColor];
[mySpecialWindowForLockScreen makeKeyAndVisible];
Whenever you want to hide the LockScreen window then simply hide it by setHidden:YES.
There are three kind of UIWindowLevel, the biggest one will be shown above the other window.
So I suggest you use a UIWindow to create your lock screen and let it's window level bigger than UIWindowLevelAlert,
Basically, their values are :
UIWindowLevelNormal = 0.000000;
UIWindowLevel UIWindowLevelAlert = 2000.000000;
UIWindowLevel UIWindowLevelStatusBar = 1000.000000;
so that's why the alert view will show above the other window.have a try.

(kal) calendar/tableview view hierarchy broken in tabbar

I'm using Kal and am having trouble getting it to display properly.
Right now, in the Storyboard, I have a subview of the main view with the tag 1:
I have that subview fitted to the space between the navbar and tabbar:
The problem is that the calendar/tableview (Kal) is not appearing properly in that subview:
First there is that small grey bar above the month (maybe Kal's spacing for the iPhone's info bar?). Then the tableview at the bottom of the calendar is behaving as if it extends far below the tab bar. That is, the cells won't scroll properly, as can be seen by the cell labeled 11:58 which is peeking up from the bottom. (I have scrolled it as far as it will go.)
Here is where I'm setting the delegates and loading the view for the Kal calendar/tableview:
- (void) viewDidLoad
{
NSLog(#"DateTimeViewController - viewDidLoad");
[super viewDidLoad];
self.calendar = [[KalViewController alloc] init];
self.calendar.delegate = self;
self.calendar.dataSource = self;
[[self.view viewWithTag:1] addSubview:self.calendar.view];
NSLog(#"selected date = %#",self.calendar.selectedDate);
}
I had exactly the same problem, I went to KalViewController.m in loadView
and changed the code in this way:
// KalView *kalView = [[KalView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame] delegate:self logic:logic];
int width = [[UIScreen mainScreen] applicationFrame].size.width;
int height = [[UIScreen mainScreen] applicationFrame].size.height-93;
KalView *kalView = [[KalView alloc] initWithFrame:CGRectMake(0, 0, width, height) delegate:self logic:logic];
This solved me both the problem of the "header" margin and the table view size.
Just play with the height value.
Play around a little bit with your 'y' value in CGRectMake to get a required frame. try this
KalViewController *kalView = [[KalViewController alloc] initWithFrame:CGRectMake(0,-20,100,320)];
self.calender = kalView;
CGRectMake(<x position> , <y position> , <required height> , <required width>)

Setting rootViewController on UIWindow changes UIScrollView with paging layout

UPDATE
It turns out that the code below is not actually the problem. In my app delegate I am doing:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
self.viewController = [[ViewController alloc] init];
self.window.rootViewController = self.viewController;// <-- this does not work
//[self.window addSubview:self.viewController.view]; // <-- this works
[self.window makeKeyAndVisible];
return YES;
}
If I remove the statement "self.window.rootViewController = self.viewController" and just add the viewController's view to the window, it works. Can anyone explain this? Does setting the rootViewController on the window constrain the child's bounds? I have tried to go through the docs, but it doesn't mention much about this.
ORIGINAL POST
I am having trouble adding padding to pages in a UIScrollView. I am basically trying to setup a simple scroll view that shows UIViews in different pages separated by a predefined padding (kind of like the Photos app without photos). I have been trying to follow Apple's ScrollView example from WWDC 2010 and their sample app PhotoScroller but always come up with padding showing in the view. The app currently hides the status bar and adds 1 view controller to the window. To make things simple, each of the pages should show a UIView that is colored green, while the space where there is padding is yellow. You should only see the yellow when the user is scrolling. Here are the first 3 pages:
I have a single class level field called pagingScrollView declared in the .h file. In my single view controller, I am basically just trying to follow what the sample code is doing.
#define PADDING 10
#define PAGE_COUNT 3
- (void)loadView
{
CGRect pagingScrollFrame = [[UIScreen mainScreen] bounds];
pagingScrollFrame.origin.x -= PADDING;
pagingScrollFrame.size.width += (2 * PADDING);
pagingScrollView = [[UIScrollView alloc] initWithFrame:pagingScrollFrame];
pagingScrollView.pagingEnabled = YES;
pagingScrollView.backgroundColor = [UIColor yellowColor];
pagingScrollView.contentSize = CGSizeMake(pagingScrollFrame.size.width * PAGE_COUNT, pagingScrollFrame.size.height);
self.view = pagingScrollView;
for(int i = 0; i < PAGE_COUNT; i++) {
CGRect frame = [self frameForPageAtIndex:i];
UIView *page = [[UIView alloc] initWithFrame:frame];
page.backgroundColor = [UIColor greenColor];
[pagingScrollView addSubview:page];
}
}
- (CGRect)frameForPageAtIndex:(NSUInteger)index {
CGRect bounds = pagingScrollView.bounds;
CGRect pageFrame = bounds;
pageFrame.size.width -= (2 * PADDING);
pageFrame.origin.x = (bounds.size.width * index) + PADDING;
return pageFrame;
}
The pagingScrollFrame has a width of 340, so (I thought) that scroll view would be broken up into pages of 340 pixels. What am I missing?
Looking at this very briefly, it appears that you are doing things fairly correct, except for the setting of your content size. You set:
pagingScrollView.contentSize = CGSizeMake(pagingScrollFrame.size.width * PAGE_COUNT, pagingScrollFrame.size.height);
This would be correct if each of your pages was truly right next to each other, but as you are adding a 10pt pad between each view, you should have something like:
pagingScrollView.contentSize = CGSizeMake(pagingScrollFrame.size.width * PAGE_COUNT + PADDING * (PAGE_COUNT - 1), pagingScrollFrame.size.height);
This should correct your problem and cause the yellow to not be in the visible area.
The reason the paging is off is because setting the RootViewController on the window is apparently doing something behind the scenes (what that is, I don't know). To fix is, I use the old way of adding a view to the window.
[self.window addSubview:self.viewController.view];
If you think you know how to fix it while setting the RootViewController, please let me know!

Resources