思いつきでSwiftでiOSのアプリを開発することにしました。
触ったこともないので単純な画面と単純な機能を作成してみます。
1.画面イメージの作成
今回は、単純な画面イメージを作成します。
なぞなぞを出題し、回答するアプリケーションとしており、上部に問題文を表示し、下部に回答を入力するテキストボックスとボタンを作成する予定です。
テキストが解答とあっていると、正解と表示されます。下部のボタンをタップすると、正解の表示が消え、問題文が表示される状態になります。
以下は画面のイメージです。
2.XCodeで実装
単純なものですが、作成するのに5時間ほどかかりました。
画面イメージとは少し違う感じですが、まあよいとしましょう。
なにか作ることが目的だったので本人としては満足です。
以下はソースコードと作成した画面になります。
ContentView.swift
import SwiftUI
struct ContentView: View {
@State private var answer = ""
@State var buttonText = "Button"
@State var flag = false
// 画面サイズ
@State var screenSizeHeight = UIScreen.main.bounds.height
@State var scSizeWidth = UIScreen.main.bounds.width
var body: some View {
VStack {
Spacer().frame(height:screenSizeHeight/16)
if (self.flag){
Text("正解!!")
.frame(width: scSizeWidth, height: screenSizeHeight/8, alignment: .center)
.font(.largeTitle)
.background(.red)
.foregroundColor(.white)
}else{
Text("")
.frame(width: scSizeWidth, height: screenSizeHeight/8, alignment: .center)
}
Spacer().frame(height:screenSizeHeight/128)
Text("みないでのむのみものは?")
.font(.title)
.foregroundColor(Color(red: 122/255, green: 122/255, blue: 122/255, opacity: 1.0))
Spacer().frame(height:screenSizeHeight/8)
TextField("Answer", text: $answer)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding()
.offset(x: 0, y: screenSizeHeight/8)
.frame(width: scSizeWidth*0.8, height: screenSizeHeight/8, alignment: .center)
.background(.white)
Spacer().frame(height:screenSizeHeight/8)
Button(action: {
if (self.flag ){
buttonText = "Return"
flag = false
}else if(answer == "みず"){
buttonText = "Button Tapped"
flag = true
}
}){
Text(buttonText)
.font(.largeTitle)
.foregroundColor(Color(red: 122/255, green: 122/255, blue: 122/255, opacity: 1.0))
.padding()
}
Spacer().frame(height:screenSizeHeight/16)
}
.frame(maxWidth: .infinity,
maxHeight: .infinity)
.background(.white)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
3.今後の予定
気まぐれでiOS開発をしようなかと思っています。
答えが間違っている時に動作がなにもないので、変更しようかな。
part.1としましたが、今回が最終回の予定も気がしなくはないです。。。