源码

首页 » 归档 » 源码 » html页面如何用iOS的原生控件展示-ios学习从入门到精通尽在姬长信

html页面如何用iOS的原生控件展示-ios学习从入门到精通尽在姬长信

分享最热门的资讯

HtmlDisplyWithNativeControl.zip

这是一段简单的html代码

    
  
      
          
          
        教程  
        亲自试一试

 

直接用浏览器打开,是下面这样的

20170523141232722.png

用这两个简单的控件,来说一下怎样用iOS的原生控件展示。

Xml解析类

//  
//  ParserXml.h  
//  HtmlDisplyWithNativeControl  
//  
//  Created by yfc on 17/5/23.  
//  Copyright ? 2017年 yfc. All rights reserved.  
//  
  
#import   
  
@interface ParserXml : NSObject  
{  
    NSXMLParser                     *parser_;  
    NSMutableArray                  *controls;  
}  
- (instancetype)initWithData:(NSData*)data;  
- (NSArray *)getAllControls;  
@end 
//  
//  ParserXml.m  
//  HtmlDisplyWithNativeControl  
//  
//  Created by yfc on 17/5/23.  
//  Copyright ? 2017年 yfc. All rights reserved.  
//  
  
#import "ParserXml.h"  
#import "MyControl.h"  
#import "MyButtonControl.h"  
#import "MyAControl.h"  
  
@implementation ParserXml  
- (instancetype)initWithData:(NSData*)data  
{  
    self = [super init];  
    if (self) {  
        parser_ = [[NSXMLParser alloc] initWithData:data] ;  
        [parser_ setDelegate:self];  
        [parser_ setShouldProcessNamespaces:NO];  
        [parser_ setShouldReportNamespacePrefixes:NO];  
        [parser_ setShouldResolveExternalEntities:NO];  
        [parser_ parse];  
          
    }  
    return self;  
}  
- (NSArray *)getAllControls;{  
    return controls;  
}  
  
#pragma mark Parse Process  
  
- (void)parser: (NSXMLParser *)parser didStartElement:(NSString *)elementName namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName attributes:(NSDictionary *)attributeDict {  
      
    NSLog(@"%@ %@",elementName,attributeDict);  
      
    MyControl *myControl = nil;  
      
    if ([elementName isEqualToString:@"input"]) {  
        if ([attributeDict[@"type"] isEqualToString:@"button"]) {  
            myControl = [[MyButtonControl alloc]initWithPropery:attributeDict];  
        }  
    }else if ([elementName isEqualToString:@"a"]){  
        myControl = [[MyAControl alloc]initWithPropery:attributeDict];  
    }  
      
      
    if (!controls) {  
        controls = [[NSMutableArray alloc]initWithCapacity:4];  
    }  
    if (myControl != nil) {  
        [controls addObject:myControl];  
    }  
  
}  
  
@end

 说明:把解析后的html标签和原生控件相对应,添加到一个数组里。

原生控件:对UIKit控件简单的封装。都继承同一父类

父类 :MyControl

//  
//  MyControl.h  
//  HtmlDisplyWithNativeControl  
//  
//  Created by yfc on 17/5/23.  
//  Copyright ? 2017年 yfc. All rights reserved.  
//  
  
#import   
#import   
@interface MyControl : NSObject  
@property(nonatomic,retain)NSDictionary *properyList;  
@property(nonatomic,retain)UIView *myView;  
  
- (instancetype)initWithPropery:(NSDictionary *)dict;  
  
@end

 

//  
//  MyControl.m  
//  HtmlDisplyWithNativeControl  
//  
//  Created by yfc on 17/5/23.  
//  Copyright ? 2017年 yfc. All rights reserved.  
//  
  
#import "MyControl.h"  
#import "UIView+Utils.h"  
  
@implementation MyControl  
- (instancetype)initWithPropery:(NSDictionary *)dict  
{  
    self = [super init];  
    if (self) {  
        _properyList = dict;  
        _myView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 60, 40)];  
    }  
    return self;  
}  
@end

 一个子类:MyButtonControl

//  
//  MyButtonControl.h  
//  HtmlDisplyWithNativeControl  
//  
//  Created by yfc on 17/5/23.  
//  Copyright ? 2017年 yfc. All rights reserved.  
//  
  
#import "MyControl.h"  
  
@interface MyButtonControl : MyControl  
 
@end
//  
//  MyButtonControl.m  
//  HtmlDisplyWithNativeControl  
//  
//  Created by yfc on 17/5/23.  
//  Copyright ? 2017年 yfc. All rights reserved.  
//  
  
#import "MyButtonControl.h"  
  
@implementation MyButtonControl  
- (instancetype)initWithPropery:(NSDictionary *)dict  
{  
    self = [super initWithPropery:dict];  
    if (self) {  
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];  
        button.frame = CGRectMake(0, 0, 60, 40);  
        NSString *title = dict[@"value"];  
        if (title.length > 0) {  
            [button setTitle:title forState:UIControlStateNormal];  
        }  
        [button setTitleColor:[UIColor colorWithRed:23/255.0 green:125/255.0 blue:250/255.0 alpha:1] forState:UIControlStateNormal];  
        [self.myView addSubview:button];  
        self.myView.frame = button.frame;  
    }  
    return self;  
}  
@end

   使用方法

- (void)viewDidLoad {  
    [super viewDidLoad];  
     
    //  
    //1从网络或本地读取取html代码  
    //  
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"demo" ofType:@"html"];  
    NSData *data = [NSData dataWithContentsOfFile:filePath];  
    NSString *content = [[NSString alloc]initWithData:data encoding:NSUTF8StringEncoding];  
     
    //  
    //2对上面得到的数据进行xml解析  
    //  
    ParserXml *parser = [[ParserXml alloc]initWithData:data];  
     
    //  
    //3解析完之后 跳转页面或展示页面  
    //  
    [self performSelectorOnMainThread:@selector(displayView:) withObject:[parser getAllControls] waitUntilDone:NO];  
  
      
}
- (void)displayView:(NSArray*)allControls{  
    NSLog(@"%@",allControls);  
      
    //  
    //4进行竖向居中对齐  
    //  
      
    MyControl* lastCon = nil;  
    int cellHeight = 40;  
  
    int i = 0;  
    for (MyControl* con in allControls) {  
        if (i != 0) {  
            if (con.myView.left < lastCon.myView.right) {  
                con.myView.left = lastCon.myView.right+ 10;  
            }  
        }  
        [self.view addSubview:con.myView];  
        i++;  
        lastCon = con;  
    }  
      
    //  
    //4进行横向居中对齐  
    //  
    lastCon = nil;  
    i = 0;  
    for (MyControl* con in allControls) {  
        if (i != 0) {  
            con.myView.centerY = lastCon.myView.centerY;  
        }  
        i++;  
        lastCon = con;  
    }  
}

   在iPhone模拟器上的运行效果

imagedddd.png

当然,这是最简单的思路,还有页面切换、报错信息、点击事件、联动、传值、

ios学习从入门到精通尽在姬长信

(0)

本文由 姬長信 创作,文章地址:https://blog.isoyu.com/archives/2256.html
采用知识共享署名4.0 国际许可协议进行许可。除注明转载/出处外,均为本站原创或翻译,转载前请务必署名。最后编辑时间为:5 月 25, 2017 at 09:13 上午

关键词:, , , ,

热评文章

发表回复

[必填]

我是人?

提交后请等待三秒以免造成未提交成功和重复