iOS 10 + Swift 3の私のWKWebViewの上にUILabelをプログラムで追加します。

Question

ストーリーボードにWKWebViewを作成することはできません。私は、次のコードでのViewControllerの私のインスタンスのいずれかでプログラムを作成する必要がありました：

override func loadView() { 
     let webConfiguration = WKWebViewConfiguration() 
     webView = WKWebView(frame: .zero, configuration: webConfiguration) 
     webView.uiDelegate = self 
     webView.navigationDelegate = self 
     view = webView 
} 

私は幅をまたがるwebView上方に配置されたUILabelを持っているしたいと思いますされて直面しています問題デバイス。それのすぐ下に、目に見えるスペースがなくて、私はwebViewを置いて欲しい。したがって、もし私のラベルが20ピクセルの高さであれば、webViewは技術的に21ピクセル下に置かれます。

ストーリーボードでは、これは明らかに簡単な作業です。それはどのようにプログラムで行われますか？

Answer 1

UIScrollViewにUILabelとWKWebViewを追加することができます。ウェブビューでスクロールとバウンスを無効にするだけで、自動的にウェブビューの高さに合わせる必要があります。

Answer 2

WKWebViewをビューコントローラのビューにする代わりに、WKWebViewをviewControllerのビューのサブビューにします。これはビューコントローラのviewDidLoadで行うことができます。

var webView: WKWebView! 
let label = UILabel() 

override func viewDidLoad() { 
    super.viewDidLoad() 

    let webConfiguration = WKWebViewConfiguration() 
    webView = WKWebView(frame: .zero, configuration: webConfiguration) 
    webView.uiDelegate = self 
    webView.navigationDelegate = self 
    view.addSubview(webView) 

    ... // Other customization here 
    view.addSubview(label) 
} 

次にviewDidLayoutSubviewsに手動で

override func viewDidLayoutSubviews() { 
    super.viewDidLayoutSubviews() 

    webView.frame = ... 
    label.frame = ... 

} 

Answer 3

このコードは、好ましくビューが（まだ表示されませんので、いずれかのinit、のviewDidLoadのViewControllerのライフサイクルのほとんどで行うことができるビュー配置することができます、viewWillAppear）。画面の幅であるため、高さ20ピクセルおよび幅

プレースUIラベル：

let label = UILabel(frame: CGRect(x: 0, y:0, width: view.frame.width, height: 20)) 
view.addSubview(label) 

下に置きWKWebViewのでWKWebView原点の（0、20）になり、高さは次のようになり（画面の高さ - 20）

let wkWebView = WKWebView(frame: CGRect(x: 0, y:20, width: view.frame.width, height : view.frame.height - 20)) 
view.addSubview(wkWebView) 

ここでは、viewはViewController自体のビューです。

これはかなりです！ビューのフレームを変更するだけでレイアウトビューを作成し、それをメインビューのサブビューとして追加することができます。柔軟なビューが必要な場合は、手作業でLayoutConstraintコードを実装する必要がありますが、これはこれよりもはるかに複雑です。

Answer 4

あなたは制約を使用してソリューションを必要とする場合には、このような何か：ここ

class ViewController: UIViewController { 
    var label: UILabel! 
    var webView: WKWebView! 

    override var prefersStatusBarHidden: Bool { 
     return true 
    } 

    override func viewDidLoad() { 
     super.viewDidLoad() 

     label = UILabel() 
     label.translatesAutoresizingMaskIntoConstraints = false 
     label.backgroundColor = UIColor.lightGray 
     label.text = "some text" 

     let webViewConfiguration = WKWebViewConfiguration() 
     webView = WKWebView(frame: .zero, configuration: webViewConfiguration) 
     webView.translatesAutoresizingMaskIntoConstraints = false 
     webView.backgroundColor = UIColor.darkGray 

     let request = URLRequest(url: URL(string: "http://www.google.de")!) 
     webView.load(request) 

     view.addSubview(label) 
     view.addSubview(webView) 

     // horizontal constraints 
     NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "|[label]|", options: [], metrics: nil, views: ["label": label])) 
     NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "|[webView]|", options: [], metrics: nil, views: ["webView": webView])) 

     // vertical constraints 
     NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "V:|[label][webView]|", options: [], metrics: nil, views: ["label": label, "webView": webView])) 
    } 
} 

が、それは次のようになります。

Answer 5

André Slotta's AnswerVisual Format Languageを使用して動作するはずですが。私はNSLayoutAnchorを使用して別のソリューションを示したい（ヒントはコードコメントにあります）。 3番目の選択肢はNSLayoutConstraintです。

<LMColumnView spacing="0"> 
    <UILabel text="This is the label" textAlignment="center" backgroundColor="#eeeeee"/> 
    <WKWebView id="webView" weight="1"/> 
</LMColumnView> 

を：あなたはMarkupKitを使用している場合は、次のように、あなたはこれを実現することができ

Answer 6

：より多くの情報のためには、hereすべての3つのオプションの概要

import UIKit 
import WebKit 


class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate { 

    var webView: WKWebView! 
    var label: UILabel! 

    override var prefersStatusBarHidden: Bool { 
    return true 
    } 

    override func loadView() { 
    super.loadView() 

    setupLabel() 

    let webViewConfiguration = WKWebViewConfiguration() 
    webView = WKWebView(frame: .zero, configuration: webViewConfiguration) 
    webView.translatesAutoresizingMaskIntoConstraints = false 
    webView.uiDelegate = self 
    webView.navigationDelegate = self 
    let request = URLRequest(url: URL(string: "https://stackoverflow.com/")!) 
    webView.load(request) 

    view.addSubview(webView) 

    // x, y, width and height of the web view 
    webView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true 
    // put the top anchor just below the bottom anchor of the label 
    // with this the web view is directly below your label 
    webView.topAnchor.constraint(equalTo: label.bottomAnchor).isActive = true 
    webView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true 
    webView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true 
    } 

    func setupLabel() { 
    label = UILabel() 
    label.translatesAutoresizingMaskIntoConstraints = false 
    label.text = "label" 
    label.backgroundColor = .gray 
    label.textColor = .red 
    view.addSubview(label) 

    // x, y, width and height of the label 
    label.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true 
    label.topAnchor.constraint(equalTo: view.topAnchor).isActive = true 
    label.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true 
    // the height of your label (In your case 20 pixels) 
    label.heightAnchor.constraint(equalToConstant: 20).isActive = true 
    } 
} 

の検索結果を取得します