やぎ星人です。どうもこんにちは。
最近腰痛に悩んでいます。
職業柄、座り仕事が多い（というか座り仕事しかしない）ので腰に負担がかかるのでしょうね。
ずっと座りっぱなしにならないように定期的に席を立つようにしないとダメですね。
意識的に席を立つようにしようと思ったのですが、これが意外と難しい。キリが悪いからとなかなか手を止められないわけですよ。
そこで最近編み出した作戦がこちら
「カフェインチャージ！利尿作用で離業作用！」
解説するまでもないかもしれませんが、カフェインには利尿作用があるため、
仕事中にコーヒーを飲む → トイレに行きたくなる → 席を立つ
という形で強制的に離席する作戦です。生理現象には敵いません。
皆さんも是非お試しを！
※カフェインの取りすぎにはご注意ください
さて本題へ
今回は画面レイアウト編です。
前回作成したTabViewに対し、UIパーツを配置していきたいと思います。
画面レイアウト作成はじめるよ！
前回記事で作成したTabViewの各画面レイアウトを作成します。
事前準備
各Viewを作成するために、swiftファイルを新設し、そこにViewプロトコルを継承した構造体を記述します。
追加したのはこちらのファイル
- ControlView.swift
- AlarmView.swift
- BleStateView.swift
SearchView.swift
ファイルの追加手順はProject Navigatorより右クリック->「New File…」でファイルを追加できます。
テンプレートの選択画面が表示されるため、「SwiftUI View」を選択しファイルを追加しました。
前回記事でTabViewを実装したファイル「ContentView.swift」にて、各ビューにTextラベルが指定されているので、そちらを上記の追加ファイルのViewに置き換えます。
実装内容と動作確認結果はこちらです。
追加した各Viewが正しく表示されていることを確認するため、各View背景色を付けて動作確認しました。
＜実装＞
//
// ContentView.swift
// SmartCurtain
//
// Created by yagi seijin on 2020/08/14.
// Copyright © 2020 Loose Life Hack. All rights reserved.
//
import SwiftUI
struct ContentView: View {
init(){
UITabBar.appearance().barTintColor = UIColor(named: "tab")
}
@State private var selection = 0
var body: some View {
TabView(selection: $selection){
//カーテン制御機能View
ControlView()
.font(.title)
.tabItem {
VStack {
Image(systemName: "gear")
Text("Control")
}
}.tag(0)
//カーテン開閉時刻設定View
AlarmView()
.font(.title)
.tabItem {
VStack {
Image(systemName: "alarm.fill")
Text("Alarm")
}
}.tag(1)
//デバイス接続状態(BLE)View
BleStateView()
.font(.title)
.tabItem {
VStack {
Image(systemName: "antenna.radiowaves.left.and.right")
Text("Search")
}
}.tag(2)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
//
// ControlView.swift
// SmartCurtain
//
// Created by yagi seijin on 2020/08/24.
// Copyright © 2020 Loose Life Hack. All rights reserved.
//
import SwiftUI
struct ControlView: View {
var body: some View {
Color.red
}
}
struct ControlView_Previews: PreviewProvider {
static var previews: some View {
ControlView()
}
}
//
// AlarmView.swift
// SmartCurtain
//
// Created by yagi seijin on 2020/08/26.
// Copyright © 2020 Loose Life Hack. All rights reserved.
//
import SwiftUI
struct AlarmView: View {
var body: some View {
Color.green
}
}
struct AlarmView_Previews: PreviewProvider {
static var previews: some View {
AlarmView()
}
}
//
// BleStateView.swift
// SmartCurtain
//
// Created by yagi seijin on 2020/08/26.
// Copyright © 2020 Loose Life Hack. All rights reserved.
//
import SwiftUI
struct BleStateView: View {
var body: some View {
Color.blue
}
}
struct BleStateView_Previews: PreviewProvider {
static var previews: some View {
BleStateView()
}
}
＜動作確認結果＞
1.カーテン制御機能（開作動・閉作動・停止）画面
ControlViewにUIパーツを配置していきます。
とりあえず前回学んだZStackやVStackを使用し、パーツを配置してみます。
アセットカタログ(プロジェクトで使用する画像や色情報を管理するファイル)に画像や色情報を登録し、ImageビューやColorビューとして配置しました。
＜アセットカタログ＞
こちらが実装結果です。
＜ControlView.swift＞
//
// ControlView.swift
// SmartCurtain
//
// Created by yagi seijin on 2020/08/24.
// Copyright © 2020 Loose Life Hack. All rights reserved.
//
import SwiftUI
struct ControlView: View {
var body: some View {
ZStack{
Color("background")
VStack(){
// 窓とカーテンのイメージ画像
ZStack(){
Image("blue_sky")
Image("role_curtain05")
}
HStack(){
// カーテン開けるボタン
Image("openBtn")
// カーテン閉めるボタン
Image("closeBtn")
}
// 作動を止めるボタン
Image("stopBtn")
}
}
}
}
struct ControlView_Previews: PreviewProvider {
static var previews: some View {
ControlView()
}
}実際に動作させてみました。
ぐぬぬ。サイズや余白などの調整が必要そうですね。
ちなみにカーテン部分の画像の違いは、UIデザイン以降にシステム設計の変更（ロールカーテンを使用する方針）が発生したためです。
＜UIデザインイメージ＞
＜プログラム実行結果＞
課題はありますが、次に進みます。
2.カーテン開閉時刻設定画面
AlarmViewは見るからに難しそうですが、とりあえずパーツを配置してみました。
「.resizable()」および「.scaledToFit()」Imageビューのモディファイアで、画像をリサイズしビューにフィットさせるものです。次回以降の記事で改めて紹介します。
また、トグルSWを配置するためにToggleビューを使用してます。このあたりも今後の記事に書いていけたらと思います。
こちらが実装結果です。
＜AlarmView.swift＞
//
// AlarmView.swift
// SmartCurtain
//
// Created by yagi seijin on 2020/08/26.
// Copyright © 2020 Loose Life Hack. All rights reserved.
//
import SwiftUI
struct AlarmView: View {
@State var toggle1IsOn = false
@State var toggle2IsOn = false
var body: some View {
VStack(){
// 画面の上半分
ZStack(){
// 背景色を指定
Color("night")
VStack(){
Image("moon")
.resizable()
.scaledToFit()
Text("0:00")
Toggle(isOn: $toggle1IsOn){Text("")}
}
}
// 画面の下半分
ZStack(){
// 背景色を指定
Color("morning")
VStack(){
Toggle(isOn: $toggle2IsOn){Text("")}
Text("0:00")
Image("sun")
.resizable()
.scaledToFit()
}
}
}
}
}
struct AlarmView_Previews: PreviewProvider {
static var previews: some View {
AlarmView()
}
}実際に動作させてみました。
ご覧の通り、UIデザインとは似ても似つかぬものが姿を現しました。
＜UIデザインイメージ＞
＜プログラム実行結果＞
こちらも一旦手を止めて、次に進めます。
3.デバイス接続状態(BLE)確認、ペアリング開始画面
最後にBleStateViewを実装します。
同様にパーツを配置してみました。
こちらが実装結果です。
＜BleStateView.swift＞
//
// BleStateView.swift
// SmartCurtain
//
// Created by yagi seijin on 2020/08/26.
// Copyright © 2020 Loose Life Hack. All rights reserved.
//
import SwiftUI
struct BleStateView: View {
var body: some View {
ZStack{
Color("background")
VStack(){
Image("wave04")
Text("デバイス検索中")
Image("searchBtn")
}
}
}
}
struct BleStateView_Previews: PreviewProvider {
static var previews: some View {
BleStateView()
}
}実行結果です。
こちらもテキストサイズやパーツの位置の微調整が必要そうです。
＜UIデザインイメージ＞
＜プログラム実行結果＞
おわりに
今回の作業はここまで。
雑にはなりますが、各ビューにUIパーツを配置してみました。
ご覧の通り、課題が多数ありそうなので、次回以降の記事にて調整を行いながら一つ一つ解決したいと思います。
それではまた次回の記事でお会いしましょう！
コメント