昨天我們第一次嘗試使用 Auto Layout 來取代以往的定位方式。

今天，我們再稍微多探索一下 Auto Layout 的使用。

試著在原本的 logoView 上面加一個紫色的 topIMGContainerView。

//step 1: set the height
    topIMGContainerView.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.5).isActive = true  // 高度設定為整個 view 的一半
    topIMGContainerView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    topIMGContainerView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    topIMGContainerView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
   topIMGContainerView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
   topIMGContainerView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
  // but let use leading and trailing anchor instead rightAnch & leftAnch, for the sake of some languages(ex: Arabic) go from right to left

不過，光是使用 rightAnchor leftAnchor 在某些情況下可能仍會使我們的畫面出現非預期的效果。
比方說在一些語言或國家，文字是從右到左的排序。
這時候，假如我們改以 leadingAnchor trailingAnchor 來設定 Auto Layout 的定位，就可以避免掉這個問題了。

    topIMGContainerView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    topIMGContainerView.trailingAnchor.constraint(equalTo:view.trailingAnchor).isActive = true

不過此時，由於我們的 topIMGContainerView 佔據了整半個螢幕，也涵蓋了原本 logoView 的位置。所以 logoView 就被蓋在 topIMGContainerView 下面看不見了。

因此，我們必須根據 logoView 之於 topIMGContainerView ，對 logoView 重新進行定位。

首先，讓 logoView 出現於 topIMGContainerView 之中。

topIMGContainerView.addSubview(logoView)

接著，再進行相應於 topIMGContainerView 的定位。

    logoView.centerXAnchor.constraint(equalTo: topIMGContainerView.centerXAnchor).isActive = true
    logoView.centerYAnchor.constraint(equalTo: topIMGContainerView.centerYAnchor).isActive = true

即可以讓 logoView 重新在 topIMGContainerView 中定位了！

完成！

...
讓我們在 2018 的鐵人文中再次相見囉！