code ソーシャル

Unityアプリcodetips(81)

スポンサーリンク

//tips

//xcode/swiftを使用したアプリ作成

Xcodecreate a new Xcode projectから新規アプリ作成。

そうするとxcodeに下記のスクリプトが表示される。

import SwiftUI

struct ContentView: View {

    var body: some View {

        Text("Hello, world!")

            .padding()

    }

}

struct ContentView_Previews: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

今回はiphone11proMaxでのプレビュー形状とする。

画面右上のプラスボタンを押してiphoneに設置するUIを検索する。

navigationを見つけたのでiPhoneテキスト上にcommandを押しながらドラッグアンドドロップする。

ドロップするタイミングはreplace text with navigation viewの表示が出たときでないとうまくいかないので注意。失敗した場合は、command+zで戻す。複数の手順戻りたい場合はメニューのeditからundoをクリックする。

これにより左記コードも下記のように変化する。

import SwiftUI

struct ContentView: View {

    var body: some View {

        NavigationView {

            NavigationLink(destination: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Destination@*/Text("Destination")/*@END_MENU_TOKEN@*/) { /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Content@*/Text("Navigate")/*@END_MENU_TOKEN@*/ }

        }

    }

}

struct ContentView_Previews: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

Navigation link部分をcommand+クリックし、embed in listを選択する。

再度プラスボタンを押し、モディファイヤーライブラリからnavigation Bar TitleNavigationView}の外に配置。

Xcode12で動作させていたが、なぜかnavigation Bar Titleが存在せず、なぜかうまく反映されないので、情報が多いXcode11に一旦ダウングレード。

こちらでもエラーになり、iosをダウングレードするのが嫌だったので、再度xcode12の方で挑戦。

Navigation bar titleというものがios12ではなくなり、navigation titleに変わっていた。似たものにnavigation bar title display modeというものがあったが、そちらと間違えないように注意する。

諸々の変更点が記載されている下記も参考になった。

https://note.com/kaigian/n/n0974b1b982dc#tFWbh

//swift playgrounds

以前まではXcodeに組み込まれていたget started with a playgroundがxcode12にはなくなり、代わりにswift playgroundsができたのでそちらでswiftを書いていく。

//テキスト表示の変更

Resumeボタンでcanvasに表示されたiPhoneのtext部分をクリックするとインスペクターにtextの中身が表示されているのでそこを自由に書き換えることができる。

インスペクターでの書き換えは、自動的にコードに反映されるので、記入が終わったら、コードの別の箇所をクリックすると反映がすぐに見れる。

編集した文字に編集を加えたい場合は、プラスボタンmodifiersからfont,foreground colorを表示させ、記入したテキストにドロップする。

import SwiftUI

struct ContentView: View {

    var body: some View {

        Text("こんにちは")

            .font(/*@START_MENU_TOKEN@*/.title/*@END_MENU_TOKEN@*/)

            .foregroundColor(/*@START_MENU_TOKEN@*/.blue/*@END_MENU_TOKEN@*/)

            .padding()

    }

}

struct ContentView_Previews: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

このように私たちが編集するのはstruct ContentView: View 以下の部分で、struct ContentView_Previewsの部分は制作中のアプリをプレビューに表示するコードとなる。

import SwiftUIappleがあらかじめ作ってくれているUI部品を利用できるようにするコードである。

このSwiftUIが記載されているのは、プロジェクト開始時にuser interfaceSwiftUIとして設定しているから。

これらのフレームワークを使用することでかなり簡単にアプリを作成することが可能になる。

上記の中で、プラスボタンにmodifierとviewというカテゴリの違いが出てきたがそれは、文字の種類や色などの装飾を決める機能がmodifier、List,Buttonなどの部品そのものを導入するものをviewとしている。

なので、viewで導入した部品を、modifierで加工すると考えておけば良い。

//swiftでsliderを編集する

sliderを導入し、sliderの左右にimageを追加。

さらに、sliderの水平棒の色をaccent color、スライダー前面の色をforeground colorで調整、さらに部品周りの余白をpaddingで加える。

あとはimageの中身をappleが素材として持っているsystemName:"speaker.fill”などで指定してあげればsliderが完成する。

import SwiftUI

struct ContentView: View {

    var body: some View {

                HStack {

                    Image(systemName:"speaker.fill")

                    Slider(value: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Value@*/.constant(10)/*@END_MENU_TOKEN@*/)

                    Image(systemName: "speaker.3.fill")

                }

                .accentColor(/*@START_MENU_TOKEN@*/.gray/*@END_MENU_TOKEN@*/)

                .foregroundColor(.gray)

                .padding(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)

            }

}

struct ContentView_Previews: PreviewProvider {

    static var previews: some View {

        ContentView()

    }

}

Hstackとはhorizontal stackのことで、複数のUI部品を水平方向に並べるためのUI部品である。

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-code, ソーシャル
-,

Copyright© BUSINESS HACKER , 2020 All Rights Reserved Powered by AFFINGER5.