0

Am learning watchOS development and learning SwiftUI too and having 2 issues. In the below image,

Issue 1 - I wish to have uniform text for "Set 1", "Set 2", "Settings 1"(on 2nd row) and "My settings"(on 2nd row). I am noticing that when text is bit longer, it either wraps on to 2nd line(As shown in image 2). If I add it to be in one line, then I don't see uniform text in all the options. Is there a way I can keep my text size uniform even if the text is little big? My text won't be bigger than "My Settings".

Issue 2 - I wish to change the font color of navigation title and want to make entire "Sample Application" visible i.e. entire "Application" word should be visible without ellipsis. In this case as well, my title name will never be bigger than "Sample Application". For title color, I tried changing accent color, but it didn't work. How I do I change the title color and the reduce the size of title to fit the display?

enter image description here enter image description here

Code:

import SwiftUI

struct ContentView: View {
    
    @State var menu: [MenuItem] = [
        MenuItem(id: 0, name: "Set 1", imageName: "settings"),
        MenuItem(id: 1, name: "Set 2", imageName: "settings"),
        MenuItem(id: 2, name: "Settings 1", imageName: "settings"),
        MenuItem(id: 3, name: "My Settings", imageName: "settings"),
    ]
    
    var columns = Array(repeating: GridItem(.flexible(), spacing: 10), count: 2)
    @Namespace var namespace
    @State var selected: [MenuItem] = []
    
    var body: some View {
        NavigationView {
            ScrollView {
                if !self.menu.isEmpty {
                    LazyVGrid(columns: columns, spacing: 10) {
                        ForEach(self.menu) { item in
                            VStack {
                                Button(action: {}) {
                                    VStack{
                                        Image(item.imageName)
                                            .renderingMode(.template)
                                            .resizable()
                                            .scaledToFill()
                                            .frame(width: 20, height: 20)
                                            .padding(10)
                                            .background(Color(red: 34 / 255, green: 34 / 255, blue: 34 / 255))
                                            .foregroundColor(Color(red: 32 / 255, green: 148 / 255, blue: 249 / 255))
                                            .clipShape(Circle())
                                    }
                                }
                                .buttonStyle(PlainButtonStyle())
                                Text(item.name)
                                    .scaledToFill()
                                    .minimumScaleFactor(0.1)
                                    .lineLimit(1)
                                    .foregroundColor(Color.secondary)
                            }.padding(10)
                        }
                    }.padding()
                }
            }.navigationTitle("Sample Application")
                .scaledToFill()
                .minimumScaleFactor(0.1)
                .lineLimit(1)
                .accentColor(Color.blue)
        }
    }
}

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

struct MenuItem: Identifiable {
    var id: Int
    var name: String
    var imageName: String
}
tech_human
  • 6,592
  • 16
  • 65
  • 107
  • For your own sanity and to reduce the pyramid of doom it is recommended to extract some of those nested views out into their own types. That way you can see a more descriptive version of the view without having to visually parse a deep tree of indentation. – Fogmeister Jun 07 '22 at 22:37
  • Yes I am learning.. this is my first project. I don't know how to move that code to a separate file in SwiftUI and use it. I will have different actions for each button so eventually I will have to move some of the logic out of ContentView into it's own file and make it reusable. :) – tech_human Jun 07 '22 at 22:43

0 Answers0