转载

html页面如何用iOS的原生控件展示

html页面如何用iOS的原生控件展示 HtmlDisplyWithNativeControl.zip

这是一段简单的html代码

                                             教程           亲自试一试

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

html页面如何用iOS的原生控件展示

用这两个简单的控件，来说一下怎样用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模拟器上的运行效果

html页面如何用iOS的原生控件展示