初心者アプリ開発日記（Swift）_１

突発的にアプリ開発をしたくなった作者の開発日記になる予定です。（如何せん飽き性なので続きは期待しないでください笑）

テーマは基本構造が簡単かつ色々な機能を入れられそうな「単語アプリ」を作ろうと思います。

取り入れたい機能として

１、使いやすい（自分用にカスタマイズできる）

２、機能性がある（のちに機能をスイカできるようにする）

３、デザイン性（シンプルベスト）

４、画像読み込みで自動入力ができる（画像認識をしてみたい）

言語はswiftを予定（プログラム経験はあるが、まともに使えるのはCだけなので一から勉強）

まあ、でもSwiftは初心者の初心者なので

とれあえず４は置いておいて簡単な枠組みから作成したいきたいと思います。

で、画面構成を考えるところまではやる気とノリで行けました。

バックエンドしか経験ないですがこういったデザインは楽しいです。

いつかデザイン系に転職したいですね、、、。

ポイントとして

上下メニューバーの位置は固定

機能ごとの画面は機能によってはスクロールなどの操作可能

個人で使いやすいアプリにしてもらうため設定機能を凝りたい

ここら辺が今やりたいことです。

基本画面の構造は大体決まったので、次は枠組みの実装から作成したいきたいと思います。

SwiftUIでのアプリ開発の手法は「ipone　アプリ開発　集中講座」という本を購入しDay１をクリアしたところでアプリ開発に入りました。

画像の配置とかはすんなり行けましたが、値の受け渡しにずいぶん手間取ってしまいぼろぼろながら枠組みは完成しました。

コードは下記に記載しますが,,,参考にしないことをお勧めします。

import SwiftUI


struct ContentView: View {
 @State private var num = 00
 var body: some View {
     function_switching()
 }
}

//固定ボタンのデータを受け取り表示する画像・機能を選択する
struct function_switching: View {
@State private var Fixed_Button = 00
var body: some View {
       
    ZStack{
        //適当に作成した背景
       /* Image("Bac01")
        .resizable(capInsets: EdgeInsets(top: 2.0, leading: 0.0, bottom: 0.0, trailing: 0.0))*/
        Color(red: 166 / 255, green: 187 / 255, blue: 186 / 255)
            .edgesIgnoringSafeArea(.all)
        
        //機能選択
        switch Fixed_Button{
        case 00:  Text("機能画面_3")
        case 01:  Text("機能設定_3")
        default: Text(" エラー")
        }
        
        //ボタンの下に置く背景データ
        VStack{
            Rectangle()
               .fill(Color(red: 235 / 255, green: 235 / 255, blue: 235 / 255))
            
               .frame(minWidth: 0.0, maxWidth: .infinity)
               .frame(height: 50)
           Spacer()
          
            Rectangle()
                .fill(Color(red: 235 / 255, green: 235 / 255, blue: 235 / 255))
    
                .frame(minWidth: 0.0, maxWidth: .infinity)
                .frame(height: 55)
           }
           
        VStack{
           function_transition_button(num: $Fixed_Button)//固定ボタン
               
           Spacer()
               //機能ボタン選択
               switch Fixed_Button{
               case 00:  function_button()
               case 01:  Text("機能設定ボタン_1")
               default: Text(" ")
               }
           }
       }
   }
}

//機能画面
struct function_1: View {
var body: some View {
    Text("機能画面１")
}
}

//機能ボタン
struct function_button: View {
var body: some View {
   Button(action: {}) {
    Image("Botan01")
     .padding(.bottom)
   }
}
}

//固定ボタン
struct function_transition_button: View
{
// 親ビュー(ContentView)に値を伝える
@Binding var num: Int
var body: some View {
       
    HStack{
     Image("Botan01")
     Button(action: { self.num = 01 })
      { Image("Settei") }
    }
    .padding(.top)
    
    //この下にボタン追加していく
}
}

struct ContentView_Previews: PreviewProvider {
   static var previews: some View {
       ContentView()
   }
}

​お得意の力ずくでなんとか作成しましたが、大変怪しいコードです。（上の謎隙間が消せない、、、）

次回は機能画面作成を進めていきます。

＊アプリ開発をされている方にコードのアドバイス等いただけましたら大変嬉しいです！