画面構成

正面図

立体図

セルの構成

背景のUIView

• UIView①を背景と見立てて、上下左右にAutoLayoutをつける
• これにより、セルとセルの間に余白ができる
• また、UIView.layout.cornerRadiusを調整することで角丸にできる

UIViewの中のUIView

• 複数の画像の位置を調整するときは、UIViewのなかに入れ込むのが良い（図ではUIView②のなかにUIView③を入れている）
• この構造を親子関係と言う（図では②が親、③が子）
• UIViewの位置をコードで調整するときは、UIView.frame = CGRect(x: 8, y: 8, width: 45, height: 45)などで調整できる
• CGRectはUIViewの位置をを調整できる
• この関数はAutoLayoutよりも優先されるので、storyboardで設定した制約を上書きしてしまうため、扱いには注意が必要
• パラメーターはx, y, width, height
• 例えばこの記事では、ラベルに代入される値に応じて、赤黄青のViewの位置を変えている

なぜUIViewのなかにいれる？

• UIViewのなかに入れることで、バラバラなViewを１つのグループとしてまとめることができる
• 親子関係になったパーツは位置の基準が親のViewの位置になる
• storyboardから、そのパーツの位置は数字で確認できる

セルの更新について

• 画面が読み込まれたタイミング（viewDidload）では、セルの中身はstoryboardによって決められているので、このままではコードによってセルの内容を制御できない
• これを解消するためには、viewDidAppearと言う関数を用いて、tableの内容をreloadする

hoge.swift

override func viewDidAppear(_ animated: Bool) {
    table.reloadData()
}

• viewDidAppearは、全ての画面のレイアウトの処理が正常に終わった後、呼ばれる関数
• viewDidloadとかviewDidAppearは書けば自動的に呼んでくれるが、呼ばれる順番は決まっているので、詳しくはUIViewControllerのライフサイクルを参照
• reloadData()はUITableViewの関数
• セルの内容を更新し、表示する内容を変更したいときはこの関数を呼ぶとUITableViewをリロードして、値を更新してくれる

改めて完成図

画面構成

正面図

立体図

セルの構成

背景のUIView

• UIView①を背景と見立てて、上下左右にAutoLayoutをつける
• これにより、セルとセルの間に余白ができる
• また、UIView.layout.cornerRadiusを調整することで角丸にできる

UIViewの中のUIView

• 複数の画像の位置を調整するときは、UIViewのなかに入れ込むのが良い（図ではUIView②のなかにUIView③を入れている）
• この構造を親子関係と言う（図では②が親、③が子）
• UIViewの位置をコードで調整するときは、UIView.frame = CGRect(x: 8, y: 8, width: 45, height: 45)などで調整できる
• CGRectはUIViewの位置をを調整できる
• この関数はAutoLayoutよりも優先されるので、storyboardで設定した制約を上書きしてしまうため、扱いには注意が必要
• パラメーターはx, y, width, height
• 例えばこの記事では、ラベルに代入される値に応じて、赤黄青のViewの位置を変えている

なぜUIViewのなかにいれる？

• UIViewのなかに入れることで、バラバラなViewを１つのグループとしてまとめることができる
• 親子関係になったパーツは位置の基準が親のViewの位置になる
• storyboardから、そのパーツの位置は数字で確認できる

セルの更新について

• 画面が読み込まれたタイミング（viewDidload）では、セルの中身はstoryboardによって決められているので、このままではコードによってセルの内容を制御できない
• これを解消するためには、viewDidAppearと言う関数を用いて、tableの内容をreloadする

hoge.swift

override func viewDidAppear(_ animated: Bool) {
    table.reloadData()
}

• viewDidAppearは、全ての画面のレイアウトの処理が正常に終わった後、呼ばれる関数
• viewDidloadとかviewDidAppearは書けば自動的に呼んでくれるが、呼ばれる順番は決まっているので、詳しくはUIViewControllerのライフサイクルを参照
• reloadData()はUITableViewの関数
• セルの内容を更新し、表示する内容を変更したいときはこの関数を呼ぶとUITableViewをリロードして、値を更新してくれる

改めて完成図

はじめに

Swiftでjsonファイルを取り出す過程で詰まるポイントがありましたので、共有したいと思います。

①jsonファイルを作成するまで

Export Json Fileというボタンを押して、jsonファイルを吐き出すようにしました。
※Simulatorではなく、実機で動かしています

②jsonファイルをXcodeからダウンロードする

Devices and Simulatorsから作成したアプリケーションを選択します。

選択後、以下のような歯車ボタンからDownload Containerを開きます。

ダウンロード後、Finderよりダウンロードファイル(ex. com.kamimura.HealthKitDataCollection 2020-11-20 14/46.13.735.xcappdata)からパッケージの内容を表示で開きます。

その後、AppData -> Documents -> output.jsonで作成したjsonファイルが存在しております。

※ファイルの存在場所は、この限りではありませんのでご注意ください！

本アプリのGithub (https://github.com/Ryosukekamimura/HealthKit_Data_Collection)

最後まで読んでいただき、ありがとうございます。
誰かのためになれば、幸いです！

はじめまして。初めて記事を書いてみます。

実際に見たことはあるのに名前がわからない機能があると、検索もできなくて悲しいですよね。
今回はそのために、機能とその名前をまとめてみました。（2つだけですが）
探してるのあったらラッキー程度に思ってください。

Tab-Bar

lineとかtwitterとかの下にあるやつです。これがあると一気にアプリらしくなりますね。

activeViewController

SNSへシェアするときなどに、したからニュッと出てくるやつです。

こんにちは。みやこです。

実際に見たことはあるのに名前がわからない機能があると、検索もできなくて悲しいですよね。
今回はそのために、機能とその名前をまとめてみました。
たまたまこの記事の中に探している機能があったらラッキーですね。

Tab-Bar

lineとかtwitterとかの下にあるやつです。これがあると一気にアプリらしくなりますね。

activeViewController

SNSへシェアするときに、したからニュッと出てくるやつです。

こんにちは。みやこです。

実際に見たことはあるのに名前がわからない機能があると、検索もできなくて悲しいですよね。
今回はそのために、機能とその名前をまとめてみました。
たまたまこの記事の中に探している機能があったらラッキーですね。

Tab-Bar

lineとかtwitterとかの下にあるやつです。これがあると一気にアプリらしくなりますね。

activeViewController

SNSへシェアするときに、したからニュッと出てくるやつです。

なぜstoryboardだけでやらない？

Swiftで開発を進める際に、storyboardでUIを構築するか、コードのみでUIを構築するか初学者の方は悩まれるのでは？と私は思います。

storyboardのみで開発しても良いのですが、コードでカスタムした方が作業工数を減らせることや、デザインの変更などが必要な場合に、コードの方が編集しやすい点などからコードでカスタムを行います。しかし、コードのみだと画面遷移などが直感的に理解しずらいので、今回は最低限をstoryboardで構築し、カスタム内容はコードで記述します。

その他にも、storyboarｄのみで構築するとコンフリクトが発生しやすい問題や、コードのみで構築するとコードの記述量が多くなるなど双方にメリット,デメリットが存在します。

storyboardでNavigartionControllerの実装

まずstoryboardでNavigationBarを用意します。

①storyboardのiPhoneを選択（下記画像中央）

②Xcodeのメニューバー（Mac液晶最上部）から
/Editor/Embed In/NavigationController/を選択

③すると下記画像のようにNavigationControllerを継承したViewControllerが作成される。

これでstoryboardによるNavigationBarの準備が整いました。

コードのよるNavigationBarのカスタム

NavigationBarのカスタムをコードでおこないます。今回カスタムするのは以下の通り。

① NavigationBarの色
② NavigationBarのtitle
③ NavigationBarのtitleの文字色
④ NavigationBarのtitleのフォントとサイズ
⑤ すりガラスのような状態をfalseに
⑥ NavigationBarの下線を消す

それではコードを記述します。

ViewController.swift

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        //NavigationBarのtitleとその色とフォント
        navigationItem.title = "サンプル文字列"
        self.navigationController?.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white, NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20.0)]

        //NavigationBarの色
        self.navigationController?.navigationBar.barTintColor = UIColor.red

        //一部NavigationBarがすりガラス？のような感じになるのでfalseを指定
        self.navigationController?.navigationBar.isTranslucent = false

        //NavigationBarの下線を消す
        navigationController?.navigationBar.setValue(true, forKey: "hidesShadow")
    }
}

ビルドすると下記画像の通りNavigationBarのデザインが変更されたのが確認できます！

//一部NavigationBarがすりガラス？のような感じになるのでfalseを指定
self.navigationController?.navigationBar.isTranslucent = false

//一部NavigationBarがすりガラス？のような感じになるのでfalseを指定に関しては、
falseを指定しない場合、想定外のカラーになるので記述。

実際に自身で色やフォントサイズをアレンジしてみると学びが深まると思いますのでぜひ！

最後に

冒頭でも述べましたが、storyboardでのUI構築とコードのみでのUI構築の双方にメリット&デメリットが存在するので、互いの特徴を理解して扱っていく必要がありますね！

最後までご覧いただきありがとうございます！
ぜひ参考にしてください。

textfield.placeholderColorみたいな感じで簡単に変更できるかなと思っていたのですが、そういう訳には行かなかったです。

開発環境	バージョン
Xcode	12.1
iOS	14.1
Swift	5

textFieldのattributedPladeholderに値を代入してスタイルを変更する

textField.attributedPlaceholder = NSAttributedString(string: "placeholder text",
                                                     attributes: [NSAttributedString.Key.foregroundColor: UIColor.red])

foegroundColorで色を変更する

attributes: [NSAttributedString.Key.foregroundColor: UIColor.red]

今回は例で赤色にしている箇所をお好みの色に変更すればplaceholderの色が変更出来ます。

おまけ

・attributedって何だと思い意味を調べたら、

〜に帰属する

という意味でした。

・attributedPladeholderの説明には、このように記載があります。

The styled string that is displayed when there is no other text in the text field.

テキストフィールドにテキストが無い時に表示されるスタイルされたStringです

とのことです。

そのスタイルにNSAttributedStringを代入して決めてあげる感じみたいです。

参考

SwiftでPlaceholderテキストの色を変更する