近期在网上看见一个关于iOS复杂表单的文章，采用的是tableView创建不同类型cell来实现，笔者愚钝，想到了使用本地HTML来写出有关于复杂表单。
粘出文件UI：
Simulator Screen Shot 2017年2月6日 下午10.30.44.png
HTML代码:
<body>
<div class="OneSection">
<div class="leftdiv">姓名</div>
<div class="rightdiv">
<input id="name" type="" name="请输入姓名">
</div>
</div>
<div class="OneSection">
<div class="leftdiv">年龄</div>
<div class="rightdiv">
<input id="age" type="" name="">
</div>
</div>
<div class="OneSection">
<div class="leftdiv">身高</div>
<div class="rightdiv">
<input id="height" type="" name="">
</div>
</div>
<div class="OneSection">
<div class="leftdiv">职业</div>
<div class="rightdiv">
<input id="job" type="" name="">
</div>
</div>
<div class="discribtionSection">
<div class="leftdiv">工作简介</div>
<div class="rightdiv">
<textarea id="introduce" rows="3" cols="20">
</textarea>
</div>
</div>
<!-- 地址选择 -->
<div class="OneSection">
<div class="leftdiv">服务地址</div>
<div class="rightdiv">
<div class="provinceDiv">浙江省</div>
<div class="cityDiv">杭州市</div>
</div>
</div>
<div class="OneSection">
<div class="leftdiv"></div>
<div class="rightdiv">
<input id="place" type="" placeholder="请输入详细地址">
</div>
</div>
<br><br><br>
<div align="center">
<button id="nextMethod" onclick="chickedbutton()">下一步</button>
</div>
</div>
</body>
内链CSS样式表:
body {
padding: 20px;
}
html {
-webkit-user-select: none;
}
.OneSection {
height: 80px;
margin-top: 0px;
}
.discribtionSection {
height: 200px;
}
.leftdiv {
float: left;
text-align: left;
color: #666666;
line-height: 80px;
vertical-align:center;
width: 30%;
height: 100%;
}
.rightdiv {
float: right;
margin: 0 auto;
text-align: center;
width: 70%;
height: 100%;
}
#LOGO{
float: right;
margin: 0 auto;
text-align: center;
width: 70%;
height: 100%;
background-color: yellow;
}
textarea {
margin: 10px;
padding-left: 15px;
border: none;
border-radius: 5px;
background-color: #dcdcdc;
border-color: #888888;
border-width: 0.5px;
width: 90%;
height: 70%;
font-size: 20px;
}
input {
outline:none;
margin: 10px;
padding-left: 15px;
width: 90%;
height: 70%;
border: none;
border-radius: 5px;
background-color: #dcdcdc;
border-color: #888888;
border-width: 0.5px;
font-size: 20px;
/*text-align: center;*/
}
/*地址选择*/
.provinceDiv {
margin-left: 10px;
float: left;
text-align: center;
border-radius: 5px;
width: 40%;
vertical-align:center;
line-height: 65px;
border-color: #888888;
background-color: #dcdcdc;
height: 80%;
}
.cityDiv {
float: right;
margin-right: 10px;
text-align: center;
border-radius: 5px;
width: 40%;
vertical-align:center;
line-height: 65px;
background-color: #dcdcdc;
border-color: #888888;
height: 80%;
}
button {
margin:0 auto;
width:90%;
color:rgb(255, 255, 255);
font-size:14px;
padding-top:15px;
padding-bottom:15px;
padding-left:32px;
padding-right:32px;
border-width:0px;
border-color:rgb(197, 229, 145);
border-style:solid;border-radius:5px;
background-color:rgb(72, 186, 34);
color:#ffffff;
background-color:#78c300;
border-color:#c5e591;
text-align: center;
}
.photoBtn{
background-color: red;
width: 50px;
height:50px;
}
在JS代码中，点击下一步获取到每个div中填入的文字信息的，在webView通过传递一个URL类型的方式进行交互，在原生中拿到参数进行处理或者本地保存。
JS代码:
function chickedbutton ()
{
var name = document.getElementById('name').value;
var age = document.getElementById('age').value;
var height = document.getElementById('height').value;
var job = document.getElementById('job').value;
var introduce = document.getElementById('introduce').value;
var place = document.getElementById('place').value;
console.log('xiu://'+'name:age:' +'?'+ name + '&' + age);
window.location.href = encodeURI('xiu://'+'name:age:height:job:introduce:place:'
+'?'+ name + '&' + age+ '&' + height+ '&' + job+ '&' + introduce+ '&' + place);
}
window.onload = function () {
var logo = document.getElementById('LOGO');
var photoBtn = document.getElementsByClassName('photoBtn')[0];
}
function getStyle(obj,styleName){
if(obj.currentStyle){
return obj.currentStyle[styleName];
}else{
return getComputedStyle(obj,null)[styleName];
}
}
以上为web端代码，不做过多赘述，复杂表单的视线，在tableView中应该采用static cell的方式来实现，代码量较大，即使采用MVC的方式，代码逻辑尽量放在view和model中去，但是controller中的代码量也有些庞大。而采用html方式来实现，代码量相对较少，维护方便，通过交互的方式也可以很好的展现。
以下为OC ViewController中代码:
- (void)viewDidLoad {
[super viewDidLoad];
UIWebView *web = [[UIWebView alloc] initWithFrame:self.view.frame];
web.delegate = self;
web.scrollView.showsHorizontalScrollIndicator = NO;
web.scrollView.bounces = NO;
_webView = web;
[web scalesPageToFit];
[self.view addSubview:web];
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
NSString * htmlPath = [[NSBundle mainBundle] pathForResource:@"复杂表单"
ofType:@"html"];
NSString * htmlCont = [NSString stringWithContentsOfFile:htmlPath
encoding:NSUTF8StringEncoding
error:nil];
[web loadHTMLString:htmlCont baseURL:baseURL];
}
使webView中边界不反弹:
- (void)webViewDidFinishLoad:(UIWebView *)theWebView
{
CGSize contentSize = theWebView.scrollView.contentSize;
CGSize viewSize = self.view.bounds.size;
float rw = viewSize.width / contentSize.width;
theWebView.scrollView.minimumZoomScale = rw;
theWebView.scrollView.maximumZoomScale = rw;
theWebView.scrollView.zoomScale = rw;
}
JS和OC交互的过程中，需要注意的是汉字在JS文件中转换成UTF-8后再赋值给OC去转码获取
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
NSString *urll = [request.URL.absoluteString stringByRemovingPercentEncoding];
if (![urll containsString:@"xiu://"]) return YES;
NSDictionary *dic = [self cutOffRequest:urll];
NSLog(@"%@",dic);
[self dealInfo:dic[@"param"]];
return YES;
}
字符串处理：
-(NSDictionary *)cutOffRequest:(NSString *)request{
//协议 如下：xiu://login:password:?param1¶m2
NSString *agreementHeader = @"xiu://";
NSString *waySep = @"?";
NSMutableDictionary *mutablDic = [NSMutableDictionary dictionary];
//截取掉协议
NSRange range = [request rangeOfString:agreementHeader];
NSString *subStr = [request substringFromIndex:range.location+range.length];
//截取方法：
if (![subStr containsString:waySep]) {
//没有参数
[mutablDic setObject:subStr forKey:@"way"];
return mutablDic;
}
NSRange wayRange = [subStr rangeOfString:waySep];
NSString *wayStr = [subStr substringToIndex:wayRange.location];
[mutablDic setObject:wayStr forKey:@"way"];
//截取参数：
NSString *param = [subStr substringFromIndex:wayRange.location+wayRange.length];
NSMutableArray *paramArr = [NSMutableArray array];
[self cutOffParam:param paramArray:paramArr];
//如果参数只有一个，方法的冒号截取不了，自己手动添加
if (paramArr.count == 1) {
NSString *wayStr1 = [wayStr stringByAppendingString:@":"];
[mutablDic setObject:wayStr1 forKey:@"way"];
}
[mutablDic setObject:paramArr forKey:@"param"];
return mutablDic;
}
//截取参数
-(void)cutOffParam:(NSString *)param paramArray:(NSMutableArray *)paramArray{
//关键字
NSString *key = @"&";
if (![param containsString:key]){
[paramArray addObject:param];
return;
}
NSRange range = [param rangeOfString:key];
NSString *param1= [param substringToIndex:range.length+range.location-1];
[paramArray addObject:param1];
NSString *subParam = [param substringFromIndex:range.length+range.location];
[self cutOffParam:subParam paramArray:paramArray];
}
传值或者执行其他事件：
-(void)dealInfo:(NSArray *)arr{
[self presentViewController:[[nextViewController alloc] init] animated:YES completion:nil];
for (NSString *s in arr) {
NSLog(@"asdf--%@",[s stringByRemovingPercentEncoding]);
}
}
附上程序执行完毕截图:
Simulator Screen Shot 2017年2月6日 下午10.47.26.png
屏幕快照 2017-02-06 下午10.47.36.png
