ガジェット部

autolayoutをコードで実装する入門 - Swift4

2017年12月3日

説明

autolayoutをコードで実装してみたいと思います。制約を考えるときのポイントは、どのオブジェクトを基準に、対象のオブジェクトに制約を与えるかです。相対的な位置関係を指定します。難しい、言葉で説明するの。ていうか、面倒くせえ笑(<-サイテー)でも、アインシュタインも言っていた。小学生、おばあちゃんが分かるように説明できなければ理解したとは言えない。

実装

//
//  ViewController.swift
//  test
//
//  Created by ryosuke-hujisawa on 2017/11/25.
//  Copyright © 2017年 ryosuke-hujisawa. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()



        /*

         UIViewを作る。ここはオートレイアウトを使わずに
         self.viewの大きさを基準に描画位置を決める


         */
        let BlueView = UIView.init(frame: CGRect.init(x: 0, y: 0, width: 100, height: 100))
        let bgColor = UIColor.blue
        BlueView.center = CGPoint(x:self.view.frame.width/2,y:self.view.frame.height/2)
        BlueView.backgroundColor = bgColor
        self.view.addSubview(BlueView)


        /*


         UILabelを作る。これはオートレイアウトによる描画方法を採用する


         */
        let myLabel:UILabel = UILabel()
        myLabel.backgroundColor = UIColor.blue
        myLabel.textAlignment = NSTextAlignment.center
        myLabel.backgroundColor = UIColor.red // 赤
        myLabel.text = "テキスト"
        myLabel.numberOfLines=1
        myLabel.textColor=UIColor.black
        myLabel.font=UIFont.systemFont(ofSize: 22)
        myLabel.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(myLabel)


        /*


         ここからオートレイアウトをコードで実行する

         */

        // myLabelのleadingAnchor(左端)はBlueViewのleadingAnchor(左端)と同じ
        myLabel.leadingAnchor.constraint(equalTo: BlueView.leadingAnchor).isActive = true
        // myLabelのtopAnchor(最上部)の位置は、BlueViewのbottomAnchor(最下部)の位置から20pt下
        myLabel.topAnchor.constraint(equalTo: BlueView.bottomAnchor, constant: 20.0).isActive = true
        // myLabelのwidthAnchor(横幅)はBlueViewのwidthAnchor(横幅)と同じ
        myLabel.widthAnchor.constraint(equalTo: BlueView.widthAnchor).isActive = true
        // myLabelのheightAnchor(縦幅)はBlueViewのheightAnchor(縦幅)と同じ
        myLabel.heightAnchor.constraint(equalTo: BlueView.heightAnchor).isActive = true

    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

 

スクリーンショット 2017-12-03 10.59.21.png

環境

  • swift
  • swift3
  • swift4
  • xcode
  • xcode9
  • mac
  • uilabel
  • constraint
  • autolayout

参考

[Swift][OSS] iOS 9以上でAuto Layoutの制約が簡潔に書けるTinyConstraintsを試してみた

Pocket
LinkedIn にシェア

エンジニアにおすすめできる本

Card image cap
リーダブルコード

より良いコードを書くためのシンプルで実践的なテクニック

Card image cap
Webを支える技術

HTTP,URI,HTML,そしてREST

Card image cap
誰でもPythonで作れる

儲かるAIとソフトウェアの作り方

Card image cap
プログラマが知るべき97のこと

現場で使える実践哲学のマスターピース

Card image cap
情熱プログラマー

時代を超えて。ソフトウェア開発者の幸せな生き方

Card image cap
アジャイルサムライ

プログラミング達人開発者への道

Card image cap
Rubyを作った男 まつもとゆきひろ

コードの世界 スーパー・プログラマになる14の思考法

ご提供 sponsor
 

Meee!(ミー)は、ビジネスからプライベート利用まで、個人のスキルを気軽に売り買いできるスキルマーケットです。カテゴリや居住地から、検索することが可能です。

 

ランゲージエクスチェンジは、ネイティブスピーカーと気軽にマッチングできる言語交換プラットフォームです。あなたの地元に住む外国人を探したり、留学や海外移住の前に、現地のネイティブスピーカーと繋がることもできます!

宣伝
 

りょすけトークchは、仕事や私生活をより豊にするYouTubeチャンネルです。文献(本、映画、論文)から役に立つ情報をまとめ、生涯にわたり役に立つ哲学をお届けしています。是非、チャンネル登録してみてね

-ガジェット部

Copyright© offブログ! , 2021 All Rights Reserved Powered by AFFINGER5.