[UIKit][UILabel] 背景色、枠線、角丸の設定をするには?

はじめに

今回は UILabel に背景色や枠線、角丸の設定をする方法について説明します。

環境

Xcode: 10.2

Swift: 5.0

背景色の設定

背景色の設定は backgroundColor プロパティを使用します。

backgroundColor プロパティには UIColorクラスの値を設定します。

例えば、Cyan を設定したい場合は以下のようにします。

self.myLabel.backgroundColor = UIColor.cyan // 背景色

枠線の設定

枠線を作成するには layer.borderWidth プロパティに枠線の太さを設定し、色を設定するには layer.borderColor プロパティを使用します。

layer.borderColor プロパティには cgColor 値を設定する必要があります。

例えば、枠線の幅を2、色を red にしたい場合は以下のようにします。

self.myLabel.layer.borderWidth = 2.0    // 枠線の幅
self.myLabel.layer.borderColor = UIColor.red.cgColor    // 枠線の色

角丸の設定

角丸にするには、layer.cornerRadius プロパティに角の半径を指定します。また clipsToBound プロパティに true を指定しないと角丸にならないので注意が必要です。

以下は、角の半径を 20 に設定する例です。

self.myLabel.layer.cornerRadius = 20.0      // 角の半径
self.myLabel.clipsToBounds = true           // この設定を入れないと角丸にならない

実行例

上記のコードの実行例を以下に示します。

実行例

[UIKit][UILabel] テキストを表示するには?

はじめに

今回はUILabelを使用してテキストを表示する方法について説明します。

テキストを操作するにはTextプロパティの設定で行うことができますが、Attributes Inspector のTextプロパティには「Plain」と「Attributed」の2種類から選択することができますので併せて説明をします。

環境

Xcode: 10.2

Swift: 5.0

目次

  1. Plain によるテキスト設定
  2. Attributed によるテキスト設定

Plainによるテキスト設定

Main.storyboard で UILabel を配置して Attributes Inspector のTextプロパティで[Plain]を選択し、下の欄に任意のテキストを入力すると表示する文字列が設定されます。

PlainでのTextプロパティ設定

Attributedによるテキスト設定

Textプロパティで[Attributed]を選択すると、設定可能な項目が以下のようになり、アライメント設定(左寄せや右寄せなど)、フォント、表示行数などを変更できるようになります。

Attributed 選択時の「設定

テキストの位置を設定する

テキストの位置設定は textAlignment プロパティで設定します。

説明
Left左寄せ
Center中央寄せ
Right右寄せ
Justified両端揃え
Natural自然

textAlignment プロパティ

コードで記述する場合は以下のよう textAlignment プロパティに NSTextAlignment 列挙体の値を設定します。

labelTitle.textAlignment = NSTextAlignment.left
labelTitle.textAlignment = NSTextAlignment.center
labelTitle.textAlignment = NSTextAlignment.right
labelTitle.textAlignment = NSTextAlignment.justifi
labelTitle.textAlignment = NSTextAlignment.natural

フォントを設定する

フォントを設定するには、fontプロパティを使用します。Attributes Inspectorでフォントを選択することができます。

コードでカスタムフォントを設定する場合は以下のようにします。

labelTitle.font = UIFont(name:"Helvetica", size: 20.0)

コードでシステムフォントを設定する場合は以下のようにします。

labelTitle.font = UIFont.systemFont(ofSize: 20.0)

[Realm][Swift4対応 完全保存版] 5.データの更新と削除

はじめに

前回はRealmにおけるクエリについて説明をしました。

第5回目となる今回は、既存データの更新と削除をする方法について説明します。

過去記事は以下を参照ください。

環境

Xcode:9.4.1
Swift:4.1.2
Realm:3.7.4

目次

  1. 前準備
  2. データの更新
  3. データの削除
  4. Realmファイルの削除

“[Realm][Swift4対応 完全保存版] 5.データの更新と削除” の続きを読む

[Realm][Swift4対応 完全保存版] 4.クエリによるデータの取得

はじめに

前回はRealmにおけるモデルオブジェクトの作成方法とデータベースへの書き込み方法について説明しました。

第4回目となる今回は、クエリを使用してデータベースからデータを取得する方法について説明します。

過去記事は以下を参照ください。

環境

Xcode:9.4.1
Swift:4.1.2
Realm:3.7.4

目次

  1. 前準備
  2. 全データの取得
  3. 件数の取得
  4. 各レコードデータの参照
  5. filterによるクエリ
  6. 並べ替え

“[Realm][Swift4対応 完全保存版] 4.クエリによるデータの取得” の続きを読む

[Realm][Swift4対応 完全保存版] 3.モデルオブジェクトの作成と書き込み

はじめに

前回はRealmにおけるモデルの定義について説明しました。

第3回目となる今回は、モデルからインスタンスを生成してデータを設定し、データベースに書き込むまでを説明します。

過去記事は以下を参照ください。

環境

Xcode:9.4.1
Swift:4.1.2
Realm:3.7.4

目次

“[Realm][Swift4対応 完全保存版] 3.モデルオブジェクトの作成と書き込み” の続きを読む

[ライブラリ] Eurekaでヘッダーやフッターを非表示にするには?

はじめに

Eurekaで入力欄を作成するときに、Sectionを作成します。

このSectionを作成すると、自動でヘッダー欄が作成されてしまいます。

今回は、このヘッダーやフッターを非表示にする方法を紹介します。

環境

Xcode:9.4.1
Swift:4.1.2

ヘッダーやフッターを非表示にするには?

ヘッダーやフッターを非表示にするのは簡単で以下のようにコードを記述するだけです。

form
    +++ Section() {
        // ヘッダーを非表示にする
        $0.header?.height = { CGFloat.leastNormalMagnitude }
        // フッターを非表示にする
        $0.footer?.height = { CGFloat.leastNormalMagnitude }
    }
    <<< TextRow() {
        $0.title = "テキスト入力"
        $0.value = "テスト"
}

上記を実行すると、以下のようにヘッダーは非表示になります。

 

[ライブラリ] Eurekaでヘッダーにイメージを表示するには?

はじめに

本ブログに「Eurekaのリストの開始位置の変更方法を知りたい」とのコメントをいただきましたので調査しました。

Eurekaのリストの開始位置(行の表示位置)を変更するには、ヘッダーのサイズで調整することができますので、その方法を説明します。

環境

Xcode:9.4.1
Swift:4.1.2

目次

“[ライブラリ] Eurekaでヘッダーにイメージを表示するには?” の続きを読む

[ライブラリ] EurekaでImageRowを使用するには?

はじめに

Eurekaは、標準では ImageRow という行はありません。

そこで、EurekaCommunity にあるImageRowをインストールして画像の選択をできるようにする方法を紹介します。

環境

Xcode:9.4.1
Swift:4.1.2

目次

“[ライブラリ] EurekaでImageRowを使用するには?” の続きを読む

[Realm][Swift4対応 完全保存版] 2.モデルの定義

はじめに

第2回目となる今回は、Realmにおけるモデルの定義について説明します。

過去記事は以下を参照ください。

環境

Xcode:9.4.1
Swift:4.1.2
Realm:3.7.4

目次

“[Realm][Swift4対応 完全保存版] 2.モデルの定義” の続きを読む