OCUI界面设计：网页视图 UIWebView

简介

• UIWebView是iOS sdk中一个常用的控件。是内置的浏览器控件，我们可以用它来浏览网页、打开文档等等。

初始化

- (instancetype)initWithFrame:(CGRect)frame;

常用方法

// 1、加载
- (void)reload;

// 2、停止加载
- (void)stopLoading;

// 3、后退
- (void)goBack;

// 4、前进
- (void)goForward;

// 5、加载请求
- (void)loadRequest:(NSURLRequest *)request;

// 6、加载HTML数据
- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;

// 7、加载Data数据
- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;

常用属性

• delegate：设置代理

• scrollView：设置滚动视图

• request：设置请求

• canGoBack：设置是否可以后退

• canGoForward：设置是否可以前进

• scalesPageToFit：设置是否自适应屏幕

• detectsPhoneNumbers：设置是否识别网页中的电话号码

UIWebViewDelegate

// 1、是否允许开始加载
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;

// 2、开始加载
- (void)webViewDidStartLoad:(UIWebView *)webView;

// 3、加载完成
- (void)webViewDidFinishLoad:(UIWebView *)webView;

// 4、加载失败
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;

网页视图基本实现示例

- (void)viewDidLoad {

    [super viewDidLoad];

    // 1、初始化网页视图
    UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.frame];

    // 2、配置加载请求
    // 注意：网络资源地址必须以“http://”开头；
    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]];

    // 3、加载数据
    [webView loadRequest:request];

    // 4、添加网页视图
    [self.view addSubview:webView];

}

网页视图案例

• 效果展示

• 代码示例

#import "ViewController.h"

@interface ViewController () <UIWebViewDelegate, UITextFieldDelegate>

@property (nonatomic, strong) UITextField *textField; /**< 文本输入框 */

@property (nonatomic, strong) UIWebView *webView; /**< 网页视图 */

- (void)initializeUserInterface; /**< 初始化用户界面 */

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    [self initializeUserInterface];
}

#pragma mark - init
- (void)initializeUserInterface {

    self.view.backgroundColor = [UIColor whiteColor];
    self.automaticallyAdjustsScrollViewInsets = NO;

    // 加载网页视图
    [self.view addSubview:self.webView];

    // 在导航栏添加文本输入框
    self.navigationItem.titleView = self.textField;

    /* NavigationItem */
    // 初始化item
    UIBarButtonItem *browseItem = [[UIBarButtonItem alloc] initWithTitle:@"浏览"
                                                                   style:UIBarButtonItemStylePlain
                                                                  target:self
                                                                  action:@selector(repondsToBarButtonItem:)];
    // 设置前景色
    browseItem.tintColor = [UIColor darkGrayColor];
    // 添加item
    self.navigationItem.rightBarButtonItem = browseItem;

    /* 工具栏 */
    // 显示工具栏
    self.navigationController.toolbarHidden = NO;

    // 初始化分段控件
    UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:@[@"后退", @"刷新", @"停止", @"前进"]];

    segmentedControl.frame = CGRectMake(0, 0, 170, 30);
    segmentedControl.tintColor = [UIColor clearColor];

    [segmentedControl setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor blackColor]} forState:UIControlStateNormal];
    [segmentedControl addTarget:self action:@selector(respondsToSegmentedControl:) forControlEvents:UIControlEventValueChanged];

    // 自定义item
    UIBarButtonItem *segmentedItem = [[UIBarButtonItem alloc] initWithCustomView:segmentedControl];

    // 延展item
    UIBarButtonItem *flexibleItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace
                                                                                  target:nil
                                                                                  action:nil];

    // 添加item到工具栏上
    self.toolbarItems = @[flexibleItem, segmentedItem, flexibleItem];

}

#pragma mark - responds event
- (void)respondsToSegmentedControl:(UISegmentedControl *)segmentedControl {
    switch (segmentedControl.selectedSegmentIndex) {
            // 返回
        case 0:[_webView goBack];break;
            // 加载
        case 1:[_webView reload];break;
            // 停止加载
        case 2:[_webView stopLoading];break;
            // 前进
        case 3:[_webView goForward];break;
        default:
            break;
    }
}

- (void)repondsToBarButtonItem:(UIBarButtonItem *)sender {
    [self reloadDataWithWebAddress:self.textField.text];
    [self.view endEditing:YES];
}
#pragma mark - private methods
- (void)reloadDataWithWebAddress:(NSString *)string {
    // 异常处理
    if (string.length == 0) {
        // 收起键盘
        [self.view endEditing:YES];
        return;
    }
    NSString *requestString = nil;
    // 网址判断
    // 1、如果用户只输入网址名称如只输入"tabobao"，则自动补全域名；
    if (![string hasSuffix:@"www"]) {
        requestString = [NSString stringWithFormat:@"http://www.%@.com", string];
    }
    // 2、如果用户只输入"www.taobao.com"，则自动插入"http:"
    else if (![string hasSuffix:@"https"]) {
        requestString = [NSString stringWithFormat:@"http://www.%@.com", string];
    }
    // 将完整域名赋值给文本输入框
    _textField.text = requestString;

    // 创建请求，并且设置缓存
    /**
     * cachePolicy表示缓存策略
     * NSURLRequestUseProtocolCachePolicy = 0 -> 默认策略，使用缓存；
     * NSURLRequestReloadIgnoringLocalCacheData = 1 -> 忽略本地缓存；
     * NSURLRequestReturnCacheDataElseLoad = 2 -> 如果有缓存，不管过期时间优先使用本地缓存，如果没有本地缓存，才从原地址下载；
     * NSURLRequestReturnCacheDataDontLoad = 3 -> 只使用缓存，如果没有匹配的缓存则报告离线模式，而不会从网上load数据；
     */
    NSURLRequest *resuest = [NSURLRequest requestWithURL:[NSURL URLWithString:requestString] cachePolicy:NSURLRequestReturnCacheDataElseLoad timeoutInterval:1.0];
    // 加载数据
    [self.webView loadRequest:resuest];
}

#pragma mark - <UITextFieldDelegate>
// 相应return键
- (BOOL)textFieldShouldReturn:(UITextField *)textField {
    [textField resignFirstResponder];

    [self reloadDataWithWebAddress:textField.text];

    return YES;
}
#pragma mark - <UIWebViewDelegate>
// 加载失败
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
    NSLog(@"%@", error.localizedDescription);
    UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"提示" message:error.localizedDescription delegate:self cancelButtonTitle:nil otherButtonTitles:@"确定", nil];
    [alertView show];
}

// 是否允许开始加载
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    return YES;
}

// 开始加载
- (void)webViewDidStartLoad:(UIWebView *)webView {
    NSLog(@"%@", NSStringFromSelector(_cmd));
}

// 加载完成
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSLog(@"%@", NSStringFromSelector(_cmd));
}

#pragma mark - touch
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    [self.view endEditing:YES];
}

#pragma mark - getter
- (UIWebView *)webView {
    if (!_webView) {
        // 初始化网页视图
        _webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 64, CGRectGetWidth(self.view.bounds), CGRectGetHeight(self.view.bounds) - 64 - CGRectGetHeight(self.navigationController.toolbar.bounds))];

        // 配置URL：http:// +...
        NSURL *url = [NSURL URLWithString:@"http://www.sina.com"];

        // 创建请求
        NSURLRequest *request = [NSURLRequest requestWithURL:url];

        // 自动对页面进行缩放以适应屏幕
        _webView.scalesPageToFit = YES;

        // 自动检测网页上的电话号码，单击可以拨打
        // _webView.detectsPhoneNumbers = YES;

        // 加载网页
        [_webView loadRequest:request];

        // 设置代理
        _webView.delegate = self;

        // 设置是否回弹
        _webView.scrollView.bounces = NO;
    }
    return _webView;
}

- (UITextField *)textField {
    if (!_textField) {
        _textField = [[UITextField alloc] initWithFrame:CGRectMake(0, 0, 300, 30)];
        _textField.textAlignment = NSTextAlignmentLeft;
        _textField.clearButtonMode = UITextFieldViewModeWhileEditing;
        _textField.borderStyle = UITextBorderStyleRoundedRect;
        _textField.delegate = self;
        _textField.returnKeyType = UIReturnKeyGo;
        _textField.placeholder = @"点击输入网页浏览";
        _textField.returnKeyType = UIReturnKeyGo;
        // 再次编辑清空
        // _textField.clearsOnBeginEditing = YES;
        // 改变光标牙呢
        _textField.tintColor = [UIColor lightGrayColor];
    }
    return _textField;
}


@end

代码下载

下载地址：http://download.youkuaiyun.com/detail/hierarch_lee/9030069