【IOS UI系列】UI开发中碰到的一些问题

最近在做IOS的项目，碰到了一些UI的issue，在这里总结下，备用。

【1】键盘无法隐藏

步骤：view中点击了一个button，用NavigationController弹出一个view，在该view中有一个TextField和button，当焦点在TextField中的时候，键盘弹出；当点击Button的时候，键盘不会消失。

原因：NavigationController中，设置了ModelPresentationStyle为PresentationFromSheet，从而导致键盘无法隐藏。

修改：设置模式为PresentationPageSheet。

具体代码如下：

self.navigationController.modalPresentationStyle = UIModalPresentationPageSheet;

【2】键盘弹出时，UIWebView中的内容被往上挤，输入框被挡住

步骤：在NavigationController，导入一个SSOLoginController，这个SSO就只有一个控件UIWebView，装载进来的page中有一个user name，passwrod的输入框，和login的按钮。

当用户的焦点在user name或password的时候，键盘弹出，webview的内容，被往上挤走，导致用户看不到输入框中的内容。

常见解决方案：

1. 监听键盘显示事件，修改WebView的scrollview的属性：

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(onKeyBoardShow:) name:UIKeyboardDidShowNotification object:nil];

-(void)onKeyBoardShow:(NSNotification*) notification
{
    [self.webView.scrollView setContentOffset:CGPointZero animated:NO];
    self.webView.scrollView.bounces = NO;//doesn't work.
    self.webView.scrollView.scrollEnabled = NO;//doesn't work.
    self.webView.scrollView.scrollsToTop = YES;//doesn't work.
}

注：bounces是当用户往上拉到底，或往下拉到顶的时候，底部或顶部显示的填充框，表示内容已经到了边界。设置为NO，则到了边界就拉不动了；

scrollEnabled会导致webview无法拉动；

scroolsToTop：移动到顶部；

生效的是代码setContentOffset，设置scrollView显示内容的偏移量，(0，0)就是顶部显示(scroll到顶部)。

2. 采用Native JS的代码

    NSString *jsCode1 = @"$('email').live('focus', function(e) {e.preventDefault(); e.stopPropagation();window.scrollTo(0,0); });";
    NSString *jsCode2 = @"$(window).scrollTop(0)";
    NSString *jsCode3 = @"function keyDown(){$(window).scrollTop(0);}document.onkeydown = keyDown;";
    NSString *jsCode4 = @"var aElement=document.createElement(\"<input type='button' value='haha'>\");sign-in-form.appendChild(aElement);";
    NSString *jsCode5 = @"var div =document.getElementById(\"ssologinForm\"); var file=document.createElement(\"input\"); file.setAttribute(\"type\",\"button\");div.appendChild(file);";
    NSString *jsCode6 = @"var div =document.getElementById(\"ssologinForm\");div.insertAdjacentHTML(\"beforeBegin\",\"<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>\");";
    [self.webView stringByEvaluatingJavaScriptFromString:jsCode];

注：

jsCode1本意是在email这个输入框获取焦点的时候，webview的窗口回复到(0,0)的位置；

jsCode2是不管什么时候，都回复到这个位置；

jsCode3是当按钮按下的时候，窗口回复到(0,0)位置;

jsCode4是想在输入框前面添加一个button按钮，把输入框挤到屏幕中间，结果是添加到了底部，应该用插入的方法；

jsCode5实现的是跟4一个道理；

jsCode6是在输入框前面出入很多的空白行，也输入框挤下来。

方法1和2都可以在键盘出现后，把屏幕定位到输入框的位置(输入框在屏幕中央)，但当键盘开始输入的时候，又会把输入框挤到屏幕上面，没有彻底解决问题。

【3】修改presentViewController弹出界面的大小

PresentViewController弹出的界面，有四种模式，分别是：

UIModalPresentationFullScreen代表弹出VC时，presented VC充满全屏，如果弹出VC的wantsFullScreenLayout设置为YES的，则会填充到状态栏下边，否则不会填充到状态栏之下。

UIModalPresentationPageSheet代表弹出是弹出VC时，presented VC的高度和当前屏幕高度相同，宽度和竖屏模式下屏幕宽度相同，剩余未覆盖区域将会变暗并阻止用户点击，这种弹出模式下，竖屏时跟UIModalPresentationFullScreen的效果一样，横屏时候两边则会留下变暗的区域。
UIModalPresentationFormSheet这种模式下，presented VC的高度和宽度均会小于屏幕尺寸，presented VC居中显示，四周留下变暗区域。
UIModalPresentationCurrentContext这种模式下，presented VC的弹出方式和presenting VC的父VC的方式相同。
这四种方式在iPad上面统统有效，但在iPhone和iPod touch上面系统始终已UIModalPresentationFullScreen模式显示presented VC。

当要自定义弹出框的大小时候:

MyModalViewController *targetController = [[[MyModalViewController alloc] init] autorelease];
targetController.modalPresentationStyle = UIModalPresentationFormSheet;
targetController.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;  //transition shouldn't matter
[self presentModalViewController:targetController animated:YES];
targetController.view.superview.frame = CGRectInset(targetController.view.superview.frame, 100, 50);

//if you want to change its size but the view will remain centerd on the screen in both portrait and landscape then:
composeTweetViewController.view.superview.bounds = CGRectMake(0, 0, 320, 480);
//or if you want to change it's position also, then:
composeTweetViewController.view.superview.frame = CGRectMake(0, 0, 320, 480);

需要注意的是，

targetController.view.superview.frame = CGRectInset(targetController.view.superview.frame, 100, 50);

这句代码，一定要在presentModalViewController 执行之后再调用，否则无效。