code ソーシャル

Unityアプリcodetips(82)

スポンサーリンク

//tips

//swiftを使い四角形を表示

画面に表示されているテキストにプラスボタンのviewからrectangleをドラッグ+commandでドロップし、真っ黒な資格を表示し、表示が画面いっぱいになり気持ち悪いので、padding()を追加。

import SwiftUI

struct ContentView: View {
var body: some View {
Rectangle().padding()
}
}

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

画面に黒い四角形が表示される。

//imageの表示と加工

Viewからテキスト部分にimageをドロップ。”smiley”を呼び出す。

初期では小さく表示されるようになっているのでmodifierからimage resizableを呼び出し、addする。

この際に、resumeを行うと顔が画面いっぱい広がる。

縦横比を適切に設定するために、modifierからscaled to fitをドロップするだけで顔のサイズの縦横比が適切に調整される。

さらにpaddingを追加し、foreground colorをimageの上にドロップすると色が変わる。

import SwiftUI

struct ContentView: View {
var body: some View {
Image(systemName: "smiley")
.resizable()
.foregroundColor(/*@START_MENU_TOKEN@*/.blue/*@END_MENU_TOKEN@*/)
.padding(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
.scaledToFit()
}
}

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

Smileyのようなappleが用意するSF Symbolsにどのような種類があるかは下記サイトへアクセスしてアプリをダウンロードする必要がある。

https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/

//viewやmodifierの詳細

プラスボタンを押して表示されるUI部品の使い方を知りたい場合は、気になる部品をクリックし、その説明文下記に表示されているopen in developer documentationを開くと、より詳しい使い方を確認することができる。

//カウンターアプリの作成

ViewからButtonをテキストの下に追加。
コードを下記のように編集。

import SwiftUI

struct ContentView: View {
@State var number = 0
var body: some View {
VStack {
Text("\(number)")
.padding()
Button(action: {self.number += 1}) {
Text("カウント")
}
}
}
}

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

バックスラッシュはoption+¥マークで表示できる。

またButton(action: {self.number += 1}) の部分は

Button(action:count){}

func count()
{
Self.number += 1
}

とcountメソッドを組み込むことができる。countメソッドを使用しない代わりにaction以下では{self.number += 1}と本来ならメソッドで使用される{ }が残っている。

@stateを用いることで変数の値が変わるごとにstate構造体に組み込まれているupdateが呼び出され、viewの再表示が自動的に行われる。

これはプロパティラッパーと呼ばれ、プロパティ宣言時に指定すると、プロパティが特別な機能を持つものである。

@Stateの他には、プロパティの値が変更されたときに親のUI部品のプロパティも変わる@Bindingなどがある。

カウンターの画像も表示させたいのでAssets.xcassetsにデスクトップからimageをドラッグアンドドロップ。

全てのサイズのimageの追加後に、content view.swiftに変更。

プラスボタンのメディアというカテゴリーをおすと、追加したimageが表示されている。

数字の表示の上にimageを差し込んだあとは、画像を編集するため、画像サイズを変更するimage resizable,画像の縦横比を調節するAspect ratioをimageにドロップする。

数字の色も変更したい場合は、foreground colorを数字表記にドロップする。

カウンターの上に数字を重ねて表示させたいので、数字は白に変更。

Zstackを用いてUI部品を前後に重ねる。後に実装したviewが上に重なる。

import SwiftUI

struct ContentView: View {
@State var number = 0
var body: some View {
VStack {
ZStack{
Image("counter")
.resizable()
.aspectRatio(contentMode: .fit)
Text("\(number)")
.foregroundColor(/*@START_MENU_TOKEN@*/.white/*@END_MENU_TOKEN@*/)
.padding()
}
Button(action: {self.number += 1}) {
Text("カウント")
}
}
}
}

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


キーボードのoptionボタンを押しながら、プラスボタンを押すと、常時プラスのライブラリを表示した状態になるので便利。

 

 

人気の記事

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.