iOS复杂表单

近期在网上看见一个关于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&param2
    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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,065评论 4 62
  • 前言 这几天项目的新需求中有个复杂的表单界面,在做的过程中发现要比想象中复杂很多,有好多问题需要处理。有很多东西值...
    Wang66阅读 14,021评论 60 142
  • 今早起来,梦见跟老爸还有另外两个人打牌,应该是麻将吧,可是天知道我根本就不会打。既然天天都多梦,干脆把梦都记录下来...
    鱼跃花见阅读 92评论 0 0
  • cfbe2bcd3fdb阅读 73评论 0 1
  • “活着,没什么意思”这句颓丧的话,近一年来成为我俩常常挂在嘴上的一句话。 话是这样说,到没有真的要去死的心,只不过...
    珏音Raya阅读 258评论 0 0