Closed16
SwiftUI
View背景色
.background(Color(red: 241/255, green: 238/255, blue: 229/255, opacity: 1.0))
角丸
.cornerRadius(10.0)
TabViewのタブの背景色
init(){
UITabBar.appearance().backgroundColor = UIColor(red: 241/255, green: 238/255, blue: 229/255, alpha: 1.0)
}
var body: some View {
TabView {
ステータスバーも含む背景全体の色を設定
var body: some View {
ZStack {
Color(red: 241/255, green: 238/255, blue: 229/255, opacity: 1.0)
.edgesIgnoringSafeArea(.all)
Text("Hello, World!")
}
}
- bold
- 周辺のパディング
- フォアグラウンドカラー
- バックグラウンドカラー
- 角丸
Text("+ Start a room")
.bold()
.padding(EdgeInsets(top: 10, leading: 15, bottom: 10, trailing: 15))
.foregroundColor(Color.white)
.background(Color(red: 50/255, green: 160/255, blue: 80/255, opacity: 1.0))
.cornerRadius(20)
NavigationView で背景色を全体に適用するにはZStackを入れ子にする
NavigationView {
ZStack {
Color(red: 241/255, green: 238/255, blue: 229/255, opacity: 1.0)
.edgesIgnoringSafeArea(.all)
こちらに記事として書いた
NavigationView でタイトルをインライン表示
.navigationBarTitleDisplayMode(.inline)
SwiftUIのNavigatinViewでnavigation barの色を設定する方法
let coloredNavAppearance = UINavigationBarAppearance()
struct ListView: View {
init() {
coloredNavAppearance.configureWithOpaqueBackground()
coloredNavAppearance.backgroundColor = .systemBlue
coloredNavAppearance.titleTextAttributes = [.foregroundColor: UIColor.white]
coloredNavAppearance.largeTitleTextAttributes = [.foregroundColor: UIColor.white]
UINavigationBar.appearance().standardAppearance = coloredNavAppearance
UINavigationBar.appearance().scrollEdgeAppearance = coloredNavAppearance
}
or
extension UINavigationController {
override open func viewDidLoad() {
super.viewDidLoad()
let standard = UINavigationBarAppearance()
standard.backgroundColor = .red //When you scroll or you have title (small one)
let compact = UINavigationBarAppearance()
compact.backgroundColor = .green //compact-height
let scrollEdge = UINavigationBarAppearance()
scrollEdge.backgroundColor = .blue //When you have large title
navigationBar.standardAppearance = standard
navigationBar.compactAppearance = compact
navigationBar.scrollEdgeAppearance = scrollEdge
}
}
NavigationViewの左右にボタンを追加(以下のやり方は 14.0 でdeprecatedになったらしい)
.navigationBarItems(
leading:
Button(action: {
}) {
Image(systemName: "magnifyingglass")
.resizable()
.aspectRatio(contentMode: .fill)
.scaledToFit()
.padding(.leading)
.foregroundColor(.black)
},
trailing:
Button(action: {
}) {
Image(systemName: "person")
.resizable()
.aspectRatio(contentMode: .fill)
.scaledToFit()
.padding(.trailing)
.foregroundColor(.black)
}
)
- 簡易検索バー
- TextField
- 角丸
- ボーダー
TextField("Find People", text: $searchText)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding(.top, 10)
.padding(.leading, 20)
.padding(.trailing, 20)
SwiftUIで検索バーの実装例
- SwiftUI でViewが表示された時に副作用のある処理を実行する
- View のライフサイクル
- 文字列から英数のみを取得
let characterSet = CharacterSet.lowercaseLetters
.union(CharacterSet.uppercaseLetters)
.union(CharacterSet.decimalDigits)
username = String(username.unicodeScalars.filter(characterSet.contains).map(Character.init))
- 任意の文字セットを追加したい時は
CharacterSet(charactersIn: )
を使う
TextField
- アルファベットと数字のみ入力可能な TextField
-
.autocapitalization(.none)
先頭大文字の無効化 -
.keyboardType(.asciiCapable)
asciiキーボード
TextField("username(alphabet or digit only)", text: $username)
.autocapitalization(.none)
.keyboardType(.asciiCapable)
.background(Color.white)
.cornerRadius(5)
.padding(.bottom, 5)
.onChange(of: username, perform: { value in
let characterSet = CharacterSet.lowercaseLetters
.union(CharacterSet.uppercaseLetters)
.union(CharacterSet.decimalDigits)
username = String(username.unicodeScalars.filter(characterSet.contains).map(Character.init))
})
NavigationView で back した時に呼び出し元で画面を更新する
- NavigationLinkのdestinationで指定するViewの
onDisapper()
をハンドリングする
NavigationLink(destination: ProfileEditView().onDisappear(){
updateProfileIcon()
}) {
swiftlinit
brew install swiftlint
swiftlint lint
swiftlint rules
このスクラップは2021/09/12にクローズされました