iphone - tutorial - Добавление представления заголовка к UIWebView, аналогичному Safari и статьям

wkwebview or uiwebview (5)

Я хотел бы добавить представление заголовка в UIWebView похожее на адресную строку / строку поиска в MobileSafari и отличное приложение Articles.app от Софии Тойчлер. Точнее, я хотел бы создать представление «тянуть, чтобы исправить ориентацию» над UIWebView, как в статьях. Статьи действительно используют UIWebView, так что это кажется возможным. Есть ли способ сделать это без необходимости встраивать UIWebView в UIScrollView и постоянно обновлять его размер, как описано в этой статье ? По-видимому, мне нужны события прокрутки, чтобы «тянуть, чтобы исправить ориентацию» вести себя соответственно.

Enormego опубликовал некоторый пример кода, чтобы сделать процесс обновления:

https://github.com/enormego/EGOTableViewPullRefresh

Это действительно не так сложно. Вы можете получить панель заголовка в стиле Safari / Articles в виде таблицы, просто создав панель заголовка и просто добавив ее в свой UITableView в качестве подпредставления. Я делаю именно это в приложении, над которым работаю сейчас:

GBSpendingMeter *meterView = [[[GBSpendingMeter alloc] initWithFrame:CGRectMake(0,0,320,44)] autorelease];

// The meterView will appear pinned to the top of the table, similar to a headerView
[self.tableView addSubview:meterView];

Сложно наблюдать за событиями прокрутки в таблице (FYI, UITableView - это подкласс UIScrollView, поэтому все те же уведомления / обратные вызовы должны работать), но пример кода, на который я ссылаюсь, имеет хороший пример того, как это работает.

Мне особенно нравится AutoLayout, потому что я могу сделать динамически высоту заголовка.

Это мой код, использующий AutoLayout в контроллере со ссылкой «headerView» на представление заголовка и «webView» на webView.

// Function called in ViewDidLoad:
func addHeaderToWebView(){
    // We load the headerView from a Nib
    headerView = NSBundle.mainBundle().loadNibNamed(WebViewHeader.nibName, owner: self, options: nil).first as! WebViewHeader

    headerView.translatesAutoresizingMaskIntoConstraints = false

    webView.scrollView.addSubview(headerView)

    // the constraints
    let topConstraint = NSLayoutConstraint(item: headerView, attribute: .Bottom, relatedBy: .Equal, toItem: webView.scrollView, attribute: .Top, multiplier: 1, constant: 0)
    let leftConstraint = NSLayoutConstraint(item: headerView, attribute: .Leading, relatedBy: .Equal, toItem: webView, attribute: .Leading, multiplier: 1, constant: 0)
    let rightConstraint = NSLayoutConstraint(item: headerView, attribute: .Trailing, relatedBy: .Equal, toItem: webView, attribute: .Trailing, multiplier: 1, constant: 0)

    // we add the constraints
    webView.scrollView.addConstraints([topConstraint])
    webView.addConstraints([leftConstraint, rightConstraint])
}

// Function called in viewWillLayoutSubviews: to update the scrollview of the webView content inset
func updateWebViewScrollViewContentInset(){
    webView.scrollView.contentInset = UIEdgeInsetsMake(headerView.frame.height, 0, 0, 0)
}

После нескольких попыток я решил пойти с этим решением:

По сути, я только что добавил свой заголовок UIView в качестве подпредставления webview.scrollview.

Чтобы заголовок не перекрывал вид браузера:

циклически проходить через все [webview.scrollView subviews]
ищите самый большой, который должен содержать браузер (остальные для теней и линий)

изменить свое происхождение

вот код:

CGRect browserCanvas = web.bounds;
for(int i=0; i< [[web.scrollView subviews] count]; i++)
{
  UIView* subview = [[web.scrollView subviews] objectAtIndex:i];
  CGRect f = subview.frame;
  NSLog(@"sub %d -> x:%.0f, y:%.0f, w:%.0f, h:%.0f", i, f.origin.x, f.origin.y, f.size.width, f.size.height);

  if(f.origin.x == browserCanvas.origin.x && 
     f.origin.y == browserCanvas.origin.y && 
     f.size.width == browserCanvas.size.width && 
     f.size.height == browserCanvas.size.height)
     {
         f.origin.y = header.frame.size.height;
         subview.frame = f;
     }
}

if(![header superview])
{
  [web.scrollView addSubview:header];
  [web.scrollView bringSubviewToFront:header];
}

Статьи могут не использовать UIWebView для отображения основного текста статьи. Чтобы выполнить вашу задачу, UIScrollView потребуется почти наверняка. Изменение размера его подпредставлений может не быть необходимым. Ознакомьтесь с примерами кода UIScrollView, предоставленными Apple.

Я не могу сказать наверняка, но Twitter, кажется, использует UITableView для достижения этой цели. Возможно, вы можете попытаться поместить свое представление в заголовок табличного представления, а свое содержимое - в ячейку.

Вот интересный пример, который вы могли бы рассмотреть, глядя на то, как сделать Pull-To-Reload TableView так же, как Tweetie 2