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 でタイトルをインライン表示

.navigationBarTitleDisplayMode(.inline)

SwiftUIのNavigatinViewでnavigation barの色を設定する方法

https://stackoverflow.com/questions/56923397/how-change-background-color-if-using-navigationview-in-swiftui
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)

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()
}) {
このスクラップは3ヶ月前にクローズされました
ログインするとコメントできます